Row not showing in listtile - flutter

I am trying to make a listview for a forum page but for the row under trailing and under the row where forumdata.getnop and the other data cannot be displayed under the list tile how do I fix this? there is no error with the class as removing the sized box with height 19 will just make it have an overflow error.
image of current app : -
Code : -
Container(
margin: const EdgeInsets.symmetric(vertical: 20.0),
height: 900.0,
child: ListView.separated(
physics: NeverScrollableScrollPhysics(),
itemCount: forumdata.getfLength(),
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ThreadPageScreen(
index: index,
)),
);
},
visualDensity: VisualDensity(vertical: 4),
leading: CircleAvatar(
backgroundColor:
Color(forumdata.getfcolor(index)),
child: Icon(
forumdata.getIcon(index),
color: Color(forumdata.geticolor(index)),
),
),
trailing: SizedBox(
width: 300,
height: 300,
child: Padding(
padding:
EdgeInsets.only(left: 20),
child: Column(
children: [
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
forumdata.getTitle(index),
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.blue),
),
),
),
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
forumdata.getDesc(index),
maxLines: 2,
),
),
),
Padding(
padding: EdgeInsets.only(left: 20),
child: SizedBox(
width: 300,
height: 19,
child: Row(
children: [
Container(
child: Padding(
padding:
EdgeInsets.only(
bottom: 20),
child: Row(
children: [
Text(
forumdata
.getnop(
index)
.toString() +
" posts " +
" ",
style:
TextStyle(
color: Colors
.grey,
fontSize: 3,
),
),
CircleAvatar(
child: Image
.network(
userdata.getProfileIcon(
forumdata
.getuser(index)),
),
),
Text(
" " +
forumdata
.getDateTime(
index),
style:
TextStyle(
color: Colors
.grey,
),
),
],
),
),
),
],
),
),
),
],
),
),
),
);

On a quick view, From this section of code:
SizedBox(
width: 300,
height: 19,
child: Row(children: [
Container(
child:
Padding(padding: EdgeInsets.only(bottom: 20),
child: Row(
Height of the SizedBox is 19 and the padding above second Row is 20. Thus the bottom padding completely hide the row.

trailing: SizedBox(
width: 300,
height: 300,
child: Padding(
/// replace with this
title: SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(

Related

How to make list items clickable so as to redirect user to their specific different pages without making different page for each item

I have created a list view of items in my app, and now I want the items to be clickable so that each item redirects the user to their respective page. What will be the easier way to do this without making a different page for each item on the list? Here's the code for the list which picks up data from json format.
Expanded(
child: ListView.builder(
// scrollDirection: Axis.horizontal,
itemCount: cryptoData.length,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.fromLTRB(20, 10, 16, 0),
height: 100,
width: double.maxFinite,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 5,
child: Container(
child: Padding(
padding: EdgeInsets.all(7),
child: Stack(children: <Widget>[
Align(
alignment: Alignment.centerRight,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 5, top: 5),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
cryptoIcon(
cryptoData[index]),
SizedBox(
height: 10,
),
// Spacer(),
cryptoChange(
cryptoData[index]),
SizedBox(
width: 10,
),
SizedBox(
width: 20,
)
],
),
],
))
],
),
)
]),
),
),
),
);
}),
),
Widget cryptoIcon(data) {
return Padding(
padding: const EdgeInsets.only(left: 0),
child: Align(
alignment: Alignment.centerLeft,
child: Image(
image: AssetImage('${data['image']}'),
)),
);
}
Widget cryptoChange(data) {
return Padding(
padding: EdgeInsets.only(left: 50),
child: RichText(
text: TextSpan(
text: '${data['change']}',
style: TextStyle(
fontFamily: "Raleway",
fontWeight: FontWeight.w900,
color: Color.fromARGB(255, 4, 35, 93),
fontSize: 14),
children: <TextSpan>[
TextSpan(
text: '\n${data['changeValue']}',
style: TextStyle(
color: Color.fromARGB(255, 4, 35, 93),
fontSize: 12,
)),
],
),
),
);
}
}
One possible way is that store data used in each list view element/tile as an object and pass that data to next page. You'll design page once and it will appear with new data every time you click different list view element/tile. If you can share code I can answer more accurately.

How to use Wrap widget inside column widget in flutter

I want to display items in a row using wrap widget, my code stack look like this
column>padding>wrap
and its output is this
i want them i row like in this tutorial
here is the code:
customExpansionTile(context, "Token Distribution Time", true,
Icon(Icons.info_rounded, color: HexColor("#5344ed")), <Widget>[
SizedBox10(),
Container(
// padding: EdgeInsets.only(right: 70),
child: Row(
children: [
Expanded(
child: SizedBox(
child: ListTile(
//font change
title: ListView.builder(
itemCount: checkBoxListTileModel.length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
controlAffinity:
ListTileControlAffinity.leading,
activeColor: HexColor("#5344ed"),
dense: true,
//font change
title: new Text(
checkBoxListTileModel[index].title,
value: checkBoxListTileModel[index]
.isCheck,
secondary: Padding(
padding: EdgeInsets.only(left: 1),
child: Container(
child:
checkBoxListTileModel[index].isCheck ==true?
Container(
child: TextButton(
onPressed: () {
_getSelectedRowInfo(
checkBoxListTileModel[index].title);
},
child: Center(
child: Text(
"Pick time",),
),
)
: null),
),
onChanged: (bool? val) {
itemChange1(val!, index);
}),
Padding(
padding: const EdgeInsets.fromLTRB(0, 8, 160, 0),
//here i am using wrap widget
child: Wrap(
children:[
Container(
child:checkBoxListTileModel[index]
.isCheck? Tags(
itemCount: _timingTagsList.length, // required
itemBuilder: (int index){
final item = _timingTagsList[index];
return ItemTags(
key: Key(index.toString()),
color:HexColor("#5344ed"),
index: index, // required
title: _timingTagsList[0],
textStyle: TextStyle( fontSize: 14, ),
combine: ItemTagsCombine.withTextBefore,
removeButton: ItemTagsRemoveButton(
onRemoved: (){
setState(() {
_timingTagsList.removeAt(index);
});
return true;
},
),
onPressed: (item) => print(item),
onLongPressed: (item) => print(item),
);
},):Padding(
padding: const EdgeInsets.only(left: 70),
child:
Row(crossAxisAlignment: CrossAxisAlignment.center, children: []))
),
]),
)]),
),
);
}),
))),
SizedBox(
width: 10,
),
],
))
User direction in Horizontal
Wrap(
direction:Axis.horizontal,
children:[
//.....
]
)
Try below code hope its helpful to you refer Wrap widget here
Wrap(
// direction: Axis.vertical,
children: <Widget>[
Container(
color: Colors.blue,
width: 100,
height: 100,
child: Center(
child: Text(
"W1",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.red,
width: 100,
height: 100,
child: Center(
child: Text(
"W2",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child: Center(
child: Text(
"W3",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.indigo,
width: 100,
height: 100,
child: Center(
child: Text(
"W4",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.orange,
width: 100,
height: 100,
child: Center(
child: Text(
"W5",
textScaleFactor: 2.5,
),
),
),
],
)
Your result screen horizontal Axis direction ->
Your Screen vertical Axis Direction->

how to show ListView.builder items in expansion tile

I am trying to show the list of items using ListView.builder in ```expansion tile, but it is not showing anything, nor giving any error.
here is the code of expansion tile
customExpansionTile(context, "Additional discount", true,
Icon(Icons.add_task, color: HexColor("#5344ed")), <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.9,
child: Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.022,
),
textformfieldCustomwithouticon(
context,
TextInputType.number,
MediaQuery.of(context).size.width * 0.4,
quantity,
"Enter the quantity",
"Quantity ",
55.0),
SizedBox(
width: MediaQuery.of(context).size.width * 0.03,
),
textformfieldCustomwithouticon(
context,
TextInputType.number,
MediaQuery.of(context).size.width * 0.42,
discountPercentage,
"Enter the discount",
"Discount",
55.0),
],
),
),
SizedBox20(),
customButton(context, "Add", () {},
MediaQuery.of(context).size.width * 0.85, 55.0),
SizedBox20(),
// here i'm using Listview.builder
Flexible(
fit: FlexFit.loose,
child: Container(
width:MediaQuery.of(context).size.width * 0.9,
height:MediaQuery.of(context).size.height*0.5,
child: ListView.builder(
itemCount: books.length,
itemBuilder: (context, index) {
final book = books[index];
return buildDiscount(book);
},
),
)),
],
),
SizedBox10()
]),
buildDiscount code:
Widget buildDiscount(Book book) => Card(
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: ListTile(
trailing: SizedBox(
height: 100,
child: Column(
children: [
InkWell(
onTap: () {
_getVariantRowInfo(book.id, book.id, book.id);
},
child: Icon(Icons.edit, color: HexColor("#7367f0")),
),
SizedBox(
height: 5,
),
InkWell(
onTap: () {},
child: Icon(Icons.delete, color: HexColor("#7367f0")),
),
],
),
),
title: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 15, 0),
child: Text(
" Quantity: 90",
style: GoogleFonts.montserrat(
fontSize: 15, fontWeight: FontWeight.bold,color: Colors.red),
),
),
horizontalTitleGap: 10,
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
" Discount %: " + "10%",
style: GoogleFonts.montserrat(fontSize: 15),
),
Text(
" Discounted Price: " + "90",
style: GoogleFonts.montserrat(fontSize: 15),
),
SizedBox(
height: 10,
)
],
),
));
output
please help, where i'm doing wrong.
customExpansionTile
Widget customExpansionTile(context, text,initiallyExpanded,leading,childern) {
return GestureDetector(
child: Container(
width:MediaQuery.of(context).size.width*0.9,
// height: 400,
decoration: BoxDecoration(
border: Border.all(color: HexColor("#6e6b7b")),
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: ExpansionTile(
title: Text(
text,
style: GoogleFonts.montserrat(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: HexColor("#5344ed")),
),
initiallyExpanded:initiallyExpanded,
leading:leading,
children: childern,
),
),
);
}
if you use Container with width and height u needn't Flexible widget like Expanded and Flexible at parent, remove Flexible, also you can add shrinkWrap: true to ListView.builder
Flexible( /// <--- remove this parent or remove Container if you get flexible ListView.builder
fit: FlexFit.loose,
child: Container(
width:MediaQuery.of(context).size.width * 0.9,
height:MediaQuery.of(context).size.height*0.5,
child: ListView.builder(
itemCount: books.length,
itemBuilder: (context, index) {
final book = books[index];
return buildDiscount(book);
},
),
)),
or
Try to use Expanded something like
Expanded:
child customExpansionTile(context, "Additional discount", true,
Icon(Icons.add_task, color: HexColor("#5344ed")), [
Expanded: child:
Column(
mainAxisSize: MainAxisSize.min,
.....

How to set container width inside Expanded ListView

I am unable to set width for the Container when I wrap ListView inside Expanded widget.
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 30, bottom: 30),
child: Text(
'Transactions History',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
),
Expanded(
child: ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
color: Colors.red,
child: Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 15),
),
),
);
},
),
),
],
),
);
}
You need to add the Container of your listItem in the itemBuilder inside an Align widget.
So your code in the itemBuilder will look like this:
return Align(
alignment: Alignment.centerLeft,
child: Container(
width: 100,
color: Colors.red,
child: Card(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 25,
vertical: 15,
),
),
),
),
);

Display list of datas from sharedprefrence to text widget flutter?

I am saving some list of data to Sharedprefrence and tried to call the data from saved sharedprefrence and it returs all the values i have saved,then i tried to show data from sharedprefrence to a text widget but it shows null,
i need something like,if i have t text widgets how do pass data to those two widget let's say ₹575 and TWA Cap
Retrieving the data from sharedprfrence
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
listdata = data;
print(listdata);
});
}
this what i am geting from the sharedprefrence
[TWA Cap, ₹575, M, Red]
trying to shows te data to text widget (Whole widget)
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
"Prodcut name",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text("Prodcut name",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Price"
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Book Now",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),
),
);
}
Try this:
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
setState(() {
listdata = data;
});
});
}
You're getting this because you didn't upated your screen after changing the listdata variable
use in initail function
setState(() {
listdata = data;
});
then
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
listdata.length!=0? listdata[0]:"",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text( listdata.length!=0? listdata[1]:"",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[2]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[3]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),``
),
);
}