I want to have a list tile that has a decent sized leading image, then a description of the item and an icon.
What I am finding, despite searching for answers online, is that I am unable to increase the height of the list tile no matter what height the leading image is.
Code:
ListTile(
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
minHeight: 260,
maxWidth: 104,
maxHeight: 264,
),
child: Image.asset('lib/images/burger_texas_angus.jpg', fit: BoxFit.fill),
),
title: Text('Texas Angus Burger'),
subtitle: Text('With fries and coke.'),
trailing: Icon(
Icons.menu,
),
onTap: () {},
onLongPress: () {},
dense: false,
),
Want it to end up looking something like this, where they have a nice big square leading icon which appears to dictate the height of the listtile, whereas everything I am doing crams the image into a narrow tile.
Ok so the answer to this is that it isn't possible. A ListTile is a very, very basic built-in widget that can only be a particular height, and there is nothing you can do about it.
If you want to do anything visually cool, with pictures etc like I have shown in my question, you have to create a custom CARD instead.
I will show my resulting code for a basic card layout that will give a similar result to the image I posted, in case anyone needs some help with this:
Container(
width: MediaQuery.of(context).size.width * 0.94,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
color: Colors.white70,
elevation: 10,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(2.0),
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.28,
maxHeight: MediaQuery.of(context).size.width * 0.28,
),
child: Image.asset(
'lib/images/burger_texas_angus.jpg',
fit: BoxFit.fill
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Text(
'Texas Angus Burger',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 10, 0, 0),
child: Text(
'100% Australian Angus grain-fed beef with cheese and pickles. Served with fries.',
style: TextStyle(
fontSize: 12,
),
),
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(5, 40, 0, 0),
child: Text(
'\$ 24.00',
style: TextStyle(
fontSize: 14,
),
),
),
],
),
],
),
),
),
],
),
),
Try this:
Container(height: 100, child: ListTile(
title: Text("My Title"),
trailing: Icon(Icons.arrow_right),
));
you can wrap ListTile with Container and give it width and height
ListTile(
leading: Container(
height: 80,
width: 80,
child: CircleAvatar(
backgroundImage: AssetImage(
'assets/images/splash_view_images/splash.png'),
),
),
title: Text('some text'),
subtitle:
Text('some text.'),
),
Related
I can't seem to figure out how to center my CircleAvatar inside the trailing component of my ListTile. Here is my code:
static Widget buildRecordCard(MyCard card, BuildContext context) {
var dateFormat = DateFormat('MM/dd/yyyy');
return Column(
children: [
ListTile(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
tileColor: Colors.white,
title: Text(
"Score: " + card.score!,
style: const TextStyle(fontSize: 38),
),
subtitle: Column(children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Personal Record",
style: TextStyle(fontSize: 22),
),
),
const SizedBox(height: 6),
Align(
alignment: Alignment.centerLeft,
child: Text(
dateFormat.format(card.createdOn.toDate()),
style: const TextStyle(fontSize: 18),
),
),
const SizedBox(height: 6),
]),
trailing: Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
height: double.infinity,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.transparent,
child: Image.asset("assets/" + card.subCategory + ".png")),
)),
const SizedBox(height: 18),
],
);
}
and here is what it is currently outputting:
I also tried to wrap my CircleAvatar in a SizedBox and in a Column with a mainAxisAlignment: MainAxisAlignment.center and it produced the same output.
You can used Transform.translate refer more about Offset
Transform.translate(
offset: Offset(0, 25),//set dy on your need
child: Container(),
),
Full Code:
trailing: Transform.translate(
offset: Offset(0, 25),
child: Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
height: double.infinity,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.transparent,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png",
height: 50,
),
),
),
),
Result->
You can use Row widget for this. and Use alignment: Alignment.center, on Container.
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [...],
),
Container(
constraints: const BoxConstraints(minWidth: 70.0, maxWidth: 80),
alignment: Alignment.centerRight,
child: CircleAvatar(
radius: 35,
backgroundColor: Colors.red,
....
),
),
],
);
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(
I have a Card inside a ListView which should be like the picture above.
//Code has been simplified by removing most theme.
ListView(
children: [
Card(
child: Row(children: [
Container(
color: Colors.red,
width: 8,
height: double.infinity, //Promblem here!!!
),
SizedBox(width: 8),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Detail',
),
Text('Detail'),
SizedBox(
width: double.infinity,
child: Text(
DateTime.now().toString(),
textAlign: TextAlign.end,
),
),
],
),
)
]),
),
]),
The problem is the Container with red color. It's a red vertical line as a notification thing. I want it to as high as Row or Card, but keep a limited width like 4.
So I have tried height: double.infinity and Expanded with the Container. It's either an exception or an overflow.
And also, trying to wrap the Row with Expanded cause another layout exception.
So how to make this red vertical line have a properly height?
Easy way to Achieve this is:
ListView(
children: [
ListTile(
leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
title: const Text("Random Name"),
subtitle: Text("Short Description \n ${DateTime.now()}"),
),
ListTile(
leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
title: const Text("Random Name"),
subtitle: Text("Short Description \n ${DateTime.now()}"),
),
ListTile(
leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
title: const Text("Random Name"),
subtitle: Text("Short Description \n ${DateTime.now()}"),
),ListTile(
leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
title: const Text("Random Name"),
subtitle: Text("Short Description \n ${DateTime.now()}"),
),
],
),
I want to make a note app but I faced a problem.When I dont scroll my list it looks great(for me ) but when I scroll it green background moving to the top of application and I want to cut it and make fixed size.I also want make this list more custom,make a bigger margin between elements and change form to the rounded rectangle
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
top: 0.0,
child: Row(
children: <Widget>[
Container(
child: Text(
"Notes",
style: TextStyle(
color: Color.fromRGBO(107, 119, 141, 1),
fontSize: 72,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
child: Text(
"Never Settle",
style: TextStyle(
fontSize: 12,
color: Color.fromRGBO(107, 119, 141, 0.25),
),
),
),
SizedBox(width: 20),
Container(
child: Image.asset(
'assets/images/magnifier.png',
height: 44,
width: 44,
),
),
SizedBox(width: 30),
Container(
child: Image.asset(
'assets/images/3dot.png',
height: 44,
width: 44,
),
),
],
),
),
Positioned(
top: 75.0,
child: ListView.builder(
itemCount: dList.length,
itemBuilder: (context, index) {
return Ink(
color: Colors.green,
child: ListTile(
title: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
)
);
},
),
),
Positioned(
height: 55,
width: 55,
// top:0.0,
right: 20.0,
bottom: 20.0,
child: Image.asset(
'assets/images/plus.png',
height: 22,
width: 22,
),
),
],
),
),
);
}
}
enter image description hereenter image description here
So I think this happens to you becouse you are using Stack widget. It looks nice, until you move list, becouse in fact it is floating over your top bar.
What I suggest you to do is using Scaffold and Column, here is your modified code:
Scaffold(
body: Container(
color: Colors.blue,
child: Column(
children: <Widget>[
SizedBox(height: 50),
Container(
color: Colors.indigo,
child: Row(
children: <Widget>[
Container(
child: Text(
"Notes",
style: TextStyle(
color: Color.fromRGBO(107, 119, 141, 1),
fontSize: 72,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
child: Text(
"Never Settle",
style: TextStyle(
fontSize: 12,
color: Color.fromRGBO(107, 119, 141, 0.25),
),
),
),
SizedBox(width: 20),
Container(
child: Icon(Icons.search, size: 40, color: Colors.red),
),
SizedBox(width: 30),
Container(
child: Icon(Icons.menu, size: 40, color: Colors.red),
),
],
),
),
Expanded(
child: Container(
color: Colors.green,
child: ListView.separated(
separatorBuilder: (BuildContext context, int index) =>
const Divider(),
itemCount: dList.length,
itemBuilder: (context, index) {
return Ink(
color: Colors.green,
child: ListTile(
title: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
));
},
),
),
),
],
),
),
floatingActionButton:
FloatingActionButton(onPressed: () => {}, child: Icon(Icons.add)),
)
And how it looks like:
What scaffold does is providing you perfect material design layout structure, it also wraps your code with Material, so you can use its benefits.
Scaffold also gives you opportunity to set your FloatingActionButton, you can find it on the bottom of the code, look how easy it's done, you don't need to create your own round button - it's already provided.
Read more about Scaffold
Another tip for you is using Icon() instead of importing your own images, three reasons for that:
It's super easy to do, you just write Icon(Icons.search), and it's done
Icons are scallable and modifable, you can change size, color
They support Material design
If you wrap Icon with IconButton, you can instantly get a beutiful button with tapping animation.
Read more about Icon and IconButton
List of Icons
If you want to make customized list tiles try this as your ListViews itemBuilder:
return Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black38.withOpacity(0.2)),
borderRadius:
BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
dList[index],
style: TextStyle(
fontSize: 25,
),
),
),
),
);
Result:
If you wrap something with Container it will get inside of its body, then you can decorate this container with rounded borders, color, borders and more.
Read more about Container
Last tip for you is using ListView.separated instead of ListViev.builder if you want to easly get a separator between your tiles.
Try to adjust code for you and good luck, if you have any questions feel free to ask.
Set background color to green ins scaffold and set transparent color to link then try
I want to make my text centered inside of a Stack widget. This is what I have attempted so far. Right now, it's to the left on top of the image and that's not where I want it to be. I've tried using the Align widget and the Center widget but to no avail. What am I doing wrong?
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
child: Stack(
children: <Widget>[
Wrap(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
],
),
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
child: Center(
child: Wrap(
children: <Widget>[
Center(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width/2,
child: Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
],
),
),
),
Any option to make this text in center
Expanded(child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
SafeArea(child: Text("asdad"))
],
),
),
),
))
Problem identifed if text size is small (means "abc") it is working but if text size is large(measn "abc abc abc acb acb abc") it is not workgingHow to solve this issue?
You can try it:
Container(
width: 500,
height: 100,
child: Stack(
children: <Widget>[
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
width: 500,
),
Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold),
),
)
],
),
)
Solved
Expanded(
child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
Positioned.fill(
child:Center(child:Align(
child: Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
alignment: Alignment.center,
)
),
)
],
),
),
),
),
),
I want at it by a different approach, what if you used a Container widget and decorate it using a background image? Then, you can avoid using a Stack widget altogether.
Here's the minimal code:
return Padding(
padding: const EdgeInsets.all(8),
child: Container(
height: 500,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
),
),
),
child: Center(
child: Text(
"hi",
style: TextStyle(color: Colors.white, fontSize: 56),
),
),
),
);
Use textAlign: TextAlign.center inside your Text Widget
using alignment: Alignment.center inside your Container Widget could also help
No need to use so many widgets just put Text widget inside Container Widget
and use alignment property of both widgets
that should resolve the issue.
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
textAlign: TextAlign.center
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
)