How to show 3 text widgets inside a list-view-builder? - firebase

Question

Im trying to show a listviewbuilder with 3 text widgets. But the last text widget don't looks good. Heres how it looks
And heres my code
#override
Widget build(BuildContext context) {
final user = Provider.of<Userforid>(context);
if (nosuerfound == true) {
return ListView.builder(
itemCount: _resultsList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
child: ListTile(
onTap: () {
DatbaseService.instance
.createorGetConversation(user.uid, _resultsList[index].id,
(String _conversationID) {
/* NavigationService.instance.navigateToRoute(
MaterialPageRoute(builder: (context) {
return MeineBeitraege(
_conversationID,
_resultsList[index].id,
_resultsList[index].data()['username'],
);
}),
);*/
});
},
leading: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
child: Text(
_resultsList[index].data()['hashtag1'],
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
),
),
Expanded(
child: Container(
child: Text(
_resultsList[index].data()['hashtag2'],
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
),
),
Expanded(
child: Container(
child: Text(
_resultsList[index].data()['hashtag3'],
style: const TextStyle(
// fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
),
),
],
),
// subtitle: Text(_resultsList[index].data()['email']),
),
);
});
} else {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Container(
child: Text(
"No Hashtag found",
style: TextStyle(fontSize: 16),
)),
);
}
}
}
So what I want is getting a bit padding between every text widget inside column. And also the last hashtag should be showed correctly . Not showed half .Hope anyone can help .if you need more informations please leave a comment .

Answer 1

You don't need use ListTile for show three elements in trailing, use custom widget or simple Container with Gesture Detector (or InkWell for the material tap effect).
It is not necessary either the Expanded Widget.
ListView.builder(
itemCount: _resultsList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
margin: const EdgeInsets.all(10.0), // Add margin
child: InkWell(
onTap: () {
/*DatbaseService.instance
.createorGetConversation(user.uid, _resultsList[index].id,
(String _conversationID) {
/* NavigationService.instance.navigateToRoute(
MaterialPageRoute(builder: (context) {
return MeineBeitraege(
_conversationID,
_resultsList[index].id,
_resultsList[index].data()['username'],
);
}),
);*/
});*/
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_resultsList[index].data()['hashtag1'],
'Text 1',
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 15.0,
),
),
Text(
_resultsList[index].data()['hashtag2'],
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 15.0,
),
),
Text(
_resultsList[index].data()['hashtag3'],
style: const TextStyle(
// fontWeight: FontWeight.w500,
fontSize: 15.0,
),
),
],
),
),
);
},
),