I have a Row widget, which has many containers with different heights depending on their content. I want to have an equal height of them all. How can I achieve this without hardcoding their values?
This is something I have.
But I want the first card to take the height of the row automatically. So that both cards would be of the same height. How can I achieve this?
This is the code for Card Container:
Widget build(BuildContext context) {
final statusMap = statusOptionView();
return Container(
width: 200,
margin: EdgeInsets.only(right: 20.0),
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0, right: 20.0, top: 20.0, bottom: 50.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Color(0xFFF97F8B),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.access_time,
color: Colors.white,
),
SizedBox(width: 4.0),
Text(
event.startTime,
style: TextStyle(
color: Colors.white,
),
)
],
),
SizedBox(
height: 20.0,
),
Text(
event.title,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20.0,
color: Colors.white,
),
maxLines: 2,
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Expanded(
child: Text(
event.venue,
style: TextStyle(
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
),
],
),
),
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) => EventDetailsScreen(event: event, status: status))),
child: Container(
padding: EdgeInsets.symmetric(vertical: 8.0),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(30.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
statusMap['icon'],
color: Colors.white,
size: 16.0,
),
SizedBox(
width: 10.0,
),
Text(
statusMap['value'],
style: TextStyle(
color: Colors.white,
),
),
],
),
),
),
)
],
),
);
While it is wrapped inside a Row widget, just like this:
Row(
children: <Widget>[...events.map((event) => EventCard(event: event)).toList()],
)
Use IntrinsicHeight as parent of Row that contains Card
You can use CrossAxisAlignment.stretch to make all children of a Row/Column use the same height/width.
/// Require the children to fill the cross axis.
///
/// This causes the constraints passed to the children to be tight in the
/// cross axis.
stretch,
Check out https://codepen.io/kuhnroyal/pen/wvGormg
In your case, row is a child of column and column gives full available height to its children so row as a child of the column, take full available height so to tell column that only give required height to its children try to give MainAxisSize.min property to Column. I am not sure it works or not but you can try.
Row(
mainAxisAlignment : MainAxisAlignment.spaceEvenly,
.....)
or try wrapping every widget with expanded.
Hoping that it works
Related
I am using a Card widget populated with a Row. At the end of the row I use a GFIconButton widget which is the bin and it currently moves depending on the length of the menu item's name. I want the bin to stay at the far right position no matter what the length of the menu item is.
I am already using Alignment.centerRight
Card(
margin: const EdgeInsets.fromLTRB(5, 10, 5, 10), //EdgeInsets.all(10),
color: Colors.white,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRect(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.8,
child: Image(
image: AssetImage(itemImg),
height: 100,
width: 70,
fit: BoxFit.cover,
),
)),
const SizedBox(width: 30),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 5),
Text(
"R$price",
style: const TextStyle(color: Colors.black, fontSize: 17),
),
const SizedBox(height: 5),
Text(
variety,
style: const TextStyle(color: Colors.black, fontSize: 17),
),
],
),
// Container(child: ),
const SizedBox(width: 30),
Text("x" + quantity.toString(),
style: const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.end),
const SizedBox(width: 20),
GFIconButton(
alignment: Alignment.centerRight,
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
]),
),
Here's the simplest solution:
Card(
child: Row(
children: [
Text('image'),
Text("texts cdppdwpwdpwdpolumn"),
Text('quantity'),
Expanded(child: SizedBox()), //this is crucial- this keeps icon always at the end
Icon(Icons.delete)
],
),
),
You can try to put Spacer between your quantity text widget and icon widget to align your icon widget to far right. For further information you need to include your code to your post.
Either add a relative space between icon and the text or, wrap the icon on the right and everything on the left inside another row and use mainAxisAlignment as spaceBetween
Change your last widgets in row to this:
Expanded(
child: Text("x" + quantity.toString(),
style:
const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.start),
),
const SizedBox(width: 20),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: GFIconButton(
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
),
mainAxisAlignment: MainAxisAlignment.SpaceBetween
and check if icon width and set it around 30
I have a widget layout like this:
And here's the code of it:
Column(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.lightbulb_outline),
SizedBox(
width: 4,
),
Text(
'Something something something',
style: kTextRegularW500,
),
],
),
Padding(
padding: const EdgeInsets.only(top: 13.0),
child: Container(
padding: EdgeInsets.symmetric(
vertical: 17,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
),
child: Center(
child: Text(
'Next',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
],
)
Question:
How to make the "button" widget (Padding, the second widget in the Column) the same width as the Row(the first widget of the Column) above it?
What I have tried:
I simply added a fixed width to the Container that render as the button, and here's the result:
Here's the code:(I only append the Container(button) part of it)
Container(
width: 300,
padding: EdgeInsets.symmetric(
vertical: 17,
)
Even adding a fixed width to Container achieve what I want, but it's just fixed for this particular case... if the text above the button become longer, I will be back to where I was facing at the first place...
So, the only solution I can come up with is to find a way to make the Container the same width as the Row above it, or obtaining the size from a sibling widget then apply it, but I don't know how even after hours searching...
Or if you have any other way to make the button(Container) the same size as the Row, you are welcomed to share.
wrap your column with IntrinsicWidth
IntrinsicWidth(
child: Column(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.lightbulb_outline),
SizedBox(
width: 4,
),
Text(
'Something something something something',
// style: kTextRegularW500,
),
],
),
Padding(
padding: const EdgeInsets.only(top: 13.0),
child: Container(
padding: EdgeInsets.symmetric(
vertical: 17,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
),
child: Center(
child: Text(
'Next',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
],
),
)
output:
I am using a white container with height
height: MediaQuery.of(context).size.height
And I am adding several red containers in it. When the number of these inside containers is less, the scrolling works perfectly like this
But as I increase the number of containers inside the big container, scrolling kind of overflows the container, like this
One solution I found out was that if I increase the height of white container, i.e:-
height: MediaQuery.of(context).size.height*7
But it makes the app look ugly and would eventually fail when the number of red containers is further increased. How can I fix this issue?
Code for the Program:-
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Test(),
));
}
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(height: 60.0,),
Container(
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(height: 20.0,),
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
],
)
],
),
),
],
),
),
],
),
),
),
),
);
}
}
Okay so after some suggestions from comments I myself found the solution.
Instead of using listview inside the white container, I removed it and wrapped the white container with SingleChildScrollView and also wrapped it with Flexible
Now the container automatically adjusts according to the amount of containers in it.
Fixed code:-
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
SingleChildScrollView(
child: Flexible(
child: Container(
margin: EdgeInsets.only(
top: 180.0,
),
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//app work
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
],
)
//add button
],
),
),
],
),
),
),
),
),
],
),
),
),
),
),
);
}
}
To achieve your desired layout try playing with padding value of this container
Container(padding: EdgeInsets.only(top: 35.0, ),
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
in my case i used padding: EdgeInsets.only(top: 35.0, ),
result
First, you need to get the correct screen height by reducing the extra top padding and appBar size (if that page contains appBar)
To do that simply add
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"Hello"
),
backgroundColor: const Color(0xFF005898),
)),
Then add this to height
double screenHeight = MediaQuery.of(context).size.height -
50 -
MediaQuery.of(context).padding.top; // Top Screen Height - appbarHeight - Top Padding(That top status bar on every phone)
Then Everything is as same but, Before SingleChildScrollView add a sizedBox then provide screenHeight and width as per requirement then in the child add scrollView and the rest of the code
Hi i am following an online tutorial building an app but am getting overflow pixels at the bottom of my card. I am unable to find the difference between my code from the video and the source code is not provided by the author. From my understanding i am having a
Column(children:[ClipRRect,Row]) <- in general but i cannot see the Row it is behind the ClipRRect, shouldn't it be below?
final String imagePath, cityName, monthYear, discount;
final int oldPrice, newPrice;
CityCard(this.imagePath, this.cityName, this.monthYear, this.discount,
this.oldPrice, this.newPrice);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
child: Stack(
children: <Widget>[
Container(
height: 210,
width: 160,
child: Image.asset(
imagePath,
fit: BoxFit.cover,
),
),
Positioned(
left: 0.0,
bottom: 0.0,
height: 60,
width: 160,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.black,
Colors.black.withOpacity(0.1)
]),
),
),
),
Positioned(
left: 10,
bottom: 10,
right: 10,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
cityName,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
Text(
monthYear,
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.white,
fontSize: 14),
)
],
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 6.0, vertical: 2.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: Text(
"$discount%",
style: TextStyle(fontSize: 14, color: Colors.black),
),
),
],
),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(width: 5.0),
Text(
'${formatCurrency.format(newPrice)}',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5.0),
Text(
"(${formatCurrency.format(oldPrice)})",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.normal,
fontSize: 13),
),
],
),
],
),
);
}
}```
I am suppose to have a row that shows the new price and the old price below each card. I am able to reveal them if i reduce the height of the Card container but i have no idea why it is overlapping since i am having a Column(children:(ClipRRect,Row)) <- can't see the Row
Try to add your Column inside a SingleChildScrollView
Probably this didn't happen to your instructor because of the size of his device.
For the bottom overflow pixels, place the Column in SingleChildScrollView for instance:
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SingleChildScrollView(
child: Column(
**your code**)));}
I'm trying to build a ListView, where the tiles look like this:
However, I'm facing some issues here.
So the item layout is
#override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _onTap,
child: new Card(
elevation: 1.0,
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15.0),
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 15.0),
width: 100.0,
height: 130.0,
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 5.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
"https://image.tmdb.org/t/p/w500" +
widget.movie.posterPath
)
)
),
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Expanded(
flex: 0,
child: new Container(
margin: const EdgeInsets.only(
top: 12.0, bottom: 10.0),
child: new Text(widget.movie.title,
style: new TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
new Expanded(
flex: 0,
child: new Text(
widget.movie.voteAverage.toString(),
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.grey[600]
),
),
),
],
),
new Container(
child: new Text(widget.movie.overview,
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Row(
children: <Widget>[
new Text("Released"),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.releaseDate)
),
],
),
),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Row(
children: <Widget>[
new Text("Rating"),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.voteAverage.toString())
),
],
),
),
],
)
],
),
),
),
);
}
The layout hierarchy, as you can see in the image above, is
Row -> Image, Column -> (Row -> (Title, Rating)), Description, Text,
Text
First Issue
The first issue is that I'm unable to align the Rating to the right within the Title, Rating row. So I want the title to be left aligned, and rating to be right aligned. For this, I tried to give a flex rating to both widgets, but as soon as I do that, both disappear. The only way I can think of is to give the Title a width, but that's a very hacky way and will break on most devices.
Second Issue
I want the Description to fit within the bounds of the Card. However, unless I define a specific width to the Container for Description, I'm unable to constrain it within the bounds of the screen. I tried encasing it within an Expanded, Flex and Flexible with various flex values, but no luck. I tried to use the softWrap property of Text widget, but again no luck. As soon as I wrap the Text in any of those widgets, it disappears. In the above code I've wrapped the Text in a Container, and set a width to it. This works, but again, it's very hacky, and will look different on different device, plus will break on a few.
Any help on these issues would be great.
After a lot of trial and error, I finally managed to get what I wanted.
My layout is like this:
#override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _onTap,
child: new Card(
elevation: 1.0,
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 14.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 15.0),
width: 100.0,
height: 150.0,
child: new Image.network(
"https://image.tmdb.org/t/p/w500" +
widget.movie.posterPath),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: const EdgeInsets.only(
top: 12.0, bottom: 10.0),
child: new Text(widget.movie.title,
style: new TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
new Container(
margin: const EdgeInsets.only(right: 10.0),
child: new Text(
widget.movie.voteAverage.toString(),
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.grey[600]
),
),
),
],
),
new Container(
margin: const EdgeInsets.only(right: 10.0),
child: new Text(widget.movie.overview,
style: new TextStyle(
fontSize: 16.0,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
new Container(
margin: const EdgeInsets.only(top: 10.0),
child: new Row(
children: <Widget>[
new Text("RELEASED",
style: new TextStyle(
color: Colors.grey[500],
fontSize: 11.0,
),
),
new Container(
margin: const EdgeInsets.only(left: 5.0),
child: new Text(widget.movie.releaseDate)
),
],
),
),
],
),
),
],
),
),
);
}
What I had to do was make the second child of my top level row an Expanded widget. So as you can see in the code, I put my column (after the image) within an Expanded.
The problem that was happening before was that Row has infinite bounds, so making my text expanded within a row's column was not making any difference to it.
However, when I put the entire column into an expanded, it was bound by the screen width. That is what needs to be done.
The final output, with the above code, looks like this.
Here is the solution of your both the problem.
1) You just have to assign mainAxisAlighment.spaceBetween.
And you will good to go.
Below is the sample code which is solving your both the problems.
new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(
top: 12.0, bottom: 10.0, left: 10.0),
child: new Text(
"Avengers: Infinity war",
style: new TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
new Container(
margin: const EdgeInsets.all(10.0),
child: new Text(
"8.6",
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.grey[600]),
),
)
],
),
new Container(
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
child: new Text(
"Iron Man, Thor, the Hulk and the rest of the Avengers unite to battle their most powerful enemy yet -- the evil Thanos. On a mission to collect all six Infinity Stones, Thanos plans to use the artifacts to inflict his twisted will on reality.",
softWrap: true,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
)
],
)