Flutter expanded height in nested Row and ListView - flutter

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()}"),
),
],
),

Related

CircleAvatar in trailing in ListTile not centered

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,
....
),
),
],
);

Remove white shadow from BackdropFilter

The problem I have is that BackdropFilter is applying the blur but on the top border of the child there is a white shadow (screenshot with black background).
The only way to remove it is to set sigmaY=0 but the blur is not homogeneous.
How can I fix it?
This is the code so far:
return Container(
color: Theme.of(context).accentColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 5,),
SizedBox(
height: headerHeight,
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: Image.network("https://coolbackgrounds.io/images/backgrounds/black/pure-black-background-f82588d3.jpg").image,//homeData.imageFromString.image,
fit: BoxFit.cover,
),
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 15.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(),
),
CircleAvatar(
radius: 50,
backgroundColor: Colors.blueGrey,
backgroundImage: homeData.imageFromString.image,
),
SizedBox(
height: 10,
),
Text(
homeData.name,
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
Expanded(
child: Row(),
),
],
),
),
),
),
),

Flutter increase ListTile height

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.'),
),

Getting a white line between the rows in flutter

Nowadays i have two Rows with a blue Container, but between this Containers i'm facing a white line (i don't know if the flutter put padding or margin between the rows).
I try this way:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue[800],
elevation: 0.0,
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
),
body: Column(children: <Widget>[
Row(children: [
Container(
color: Colors.lightBlue[800],
height: 170,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
new Container(
width: 120.0,
height: 120.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://i.imgur.com/BoN9kdC.png")))),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Text("RENATO",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Colors.white)))
],
),
]),
),
]),
Row(children: <Widget>[
Container(
color: Colors.lightBlue[800],
height: 100,
width: MediaQuery.of(context).size.width
)
],)
]),
drawer: Drawer(
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: ListView(
children: <Widget>[
ListTile(
title: Text('Item1'),
)
],
),
),
),
),
);
This is the result:
How i can fix this?
Try remove the border from Container, or set the color of the border to

Flutter: How to align widget to the topRight of column?

I'm trying to align my more options button to the top right corner in in my column, according to the this SO answer.
How to align single widgets in Flutter?
Here's my code.
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
Align(alignment: Alignment.topRight,
child: IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),)),
],
),
),
);
And if I change the order of align and text, this happens.
I want to display my button on the top right corner while keeping Text widget on the center top, but align widget seems to take whole line(row).
Is there a way to do correctly achieve that, or do I need to wrap them both in a row?
I've used Stack and Positioned widget to achieve that effect.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
),
Positioned(
top: 0,
right: 0,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
),
],
);
}
You need to wrap with Row if you want to make them in the same Column
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Text(
'Day 1',
style: TextStyle(
color: Colors.white,
),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
],
),
],
),
),
);