Develop Reference

How to display vertical items in the card view in Flutter

I'm trying to display items in the card vertically, but in the card content I'm facing an issue that is, "Bottom overflowed by 52 pixels".
Here, I'm attaching code, my design's screenshot, and the screenshot of what actually I need.
Please help!
Below is my code.
Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
FlutterMoneyFormatter(amount: items[index].price);
return Container(
child: Card(
elevation: 5.0,
margin: EdgeInsets.all(8.0),
child: Column(
children: [
Container(
child: Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: 100,
height: 100,
fit: BoxFit.fill),
),
Column(
children: [
Container(
child: Text(items[index].title,
style: titleTextStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis),
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: Text(items[index].subtitle,
style: subtitleTextStyle)),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(formatter.output.symbolOnLeft,
style: priceTextStyle),
Text("ADD TO CART", style: addToCardTextStyle)
],
),
)
],
),
],
),
),
);
Code of Grid View
Widget buildGridView() {
return Expanded(
child: GridView.count(
crossAxisCount: 2,
scrollDirection: Axis.vertical,
physics: PageScrollPhysics(),
shrinkWrap: true,
children: List.generate(items.length, (index) {
return buildRowItemsGrid(context, index);
})),
);

You need to set an appropriate childAspectRatio in the GridView like this.
GridView.count(
crossAxisCount: 2,
childAspectRatio: 2/3, //<-- width/height ratio depending on the child's content. Set accordingly.
//...
)
Edit:
The above part will solve the overflow problem. In addition to that, you can make the size of the Image widget adaptive like this so it can take up more space when available.
Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: MediaQuery.of(context).size.width / 2.8,
height: MediaQuery.of(context).size.width / 2.8,
fit: BoxFit.fill,
)
You can also set the Column's mainAxisAlignment to spaceEvenly so its children can take up the space evenly when more space is available vertically.
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//...
)

I can't see the ScreenShot, but from the code I suggest you wrap The Second Column with Expanded and then the first column wrap it with SingleChildScrollView, that way it won't overflowed and you can scroll through if the contain inside were higher

I guess you have a fixed size for your Grid item. So it will overflow if the height of the Grid is not enough.
I have two ideas for you:
Use auto_size_text https://pub.dev/packages/auto_size_text
Expanded(
child: AutoSizeText(
'The text to display',
style: TextStyle(fontSize: 20),
maxLines: 2,
minFontSize: 1,
),
)
Increase the height of your Grid.

Would it work? Have you given it some fixed height in its parents? If given remove that, and then try this.
Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
FlutterMoneyFormatter(amount: items[index].price);
return Container(
child: Card(
elevation: 5.0,
margin: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Image.network(
"https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
width: 100,
height: 100,
fit: BoxFit.fill),
),
Column(
children: [
Container(
child: Text(items[index].title,
style: titleTextStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis),
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: Text(items[index].subtitle,
style: subtitleTextStyle)),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(formatter.output.symbolOnLeft,
style: priceTextStyle),
Text("ADD TO CART", style: addToCardTextStyle)
],
),
)
],
),
],
),
),
);

Try wrapping the overflowing widget with a Flexible widget. The child of the Flexible widget will fill the available space in the main axis.

TextOverflow in Row which is inside a Column in Flutter

I'm trying to develop a Card with some text widget beneath it. Look at the image below.
The problem I'm facing is when the text next to location icon is large, it overflows. I've tried with Flex, but it throws an exception. There's also a star icon at the right bottom of the card.
Here's what I want :
I want the text to be single line ending with .. if it's too long.
star should be placed at the bottom right
The location icon doesn't consider the left padding I gave (Padding widget)
Please help! Thanks in advance.
Here's my code :
Scaffold buildOffersList(OfferModel offerModel) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Image.network(
'https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg',
fit: BoxFit.cover,
width: size.width,
height: size.height,
color: Colors.black.withOpacity(.6),
colorBlendMode: BlendMode.darken
),
),
Column(
children: <Widget>[
Container(
child: PageHeader(pageTitle: 'Popular Offers', numberOfOffers: '20 venues', sortByText: 'Sort By: Location', filterText: 'Filter'),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
children: List.generate(offerModel.payload.offers.length, (index) {
return Center(
child: offerCard3(offerModel.payload.offers[index]),
);
}),
),
),
],
),
],
)
);
}
Widget offerCard3(Offer offer) {
return GestureDetector(
child: Card(
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 8.0,
child: Image.network(
"https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(7.0, 5.0, 4.0, 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getBrandName(offer),
getOfferTitle(offer),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
getLocationIcon(),
getOfferContactAddressView(offer),
],
),
getKmText(),
],
),
//Spacer(),
getStarIcon(),
],
),
],
),
),
],
),
),
);
}
Text getOfferContactAddressView(Offer offer) {
return Text(
offer.offerContactAddress,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black38,
fontSize: 9.0,
),
);
}
Icon getStarIcon() {
return Icon(
Icons.star,
color: Colors.orange,
size: 25,
);
}

There is a flutter package for auto resize text to contain the full text.
auto_size_text 2.1.0 here

FIrst Solution Highly Recommend
First of all, you can use Listtile.
ListTile(title: Text("ListTile"),
subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
trailing: Icon(Icons.home),
leading: Icon(Icons.add_box),
isThreeLine: true,
)
Second Solution
SizedBox(
width: 500,
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
//Overflow: TextOverflow.ellipsis will make you large text end with ....
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
),
),
),

I think you have to use like below code:-
Expanded(
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
children: <Widget>[
getOfferContactAddressView(offer),
],
),
flex: 1,
),

It happens because the Text Widget doesn't know how big the width of the Row.
Please try this code out DartPad to help you find where you went wrong with your code. I still believe, wrapping the Text Widget with Expanded and give overflow property will give what you want right away.
Here's the SS of it:

Fixed Title with scroll elements

I'm new to flutter and I'm trying to make simple one screen, with FIXED TITLE and below it scrolable "child or Column" with few elements like in the screenshot.
There will be two elements initially and I want them in center of screen,
but when third element is added then scrollview need to kick in for smaller screens
, so the title stays fixed but elements scrolable.
here is current code which scrolling all including title.
Thanks in advance:
#override
Widget build(BuildContext context) {
return Container(
color: Color.fromRGBO(246, 246, 246, 1.0),
child: SafeArea(
child: Material(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Center(
child: Padding(
padding: EdgeInsets.only(top: 20.0,bottom: 20.0),
child: Text(
'Lorem Ipsum',
textAlign: TextAlign.center,
style: TextStyle(
color: Color.fromRGBO(78, 53, 43, 1.0),
fontSize: 40.0,
fontWeight: FontWeight.w300),
),
),
),
_item(context, 'ITEM_1', 'Title1', 'ico_01.png'),
_item(context, 'ITEM_2', 'Title2', 'ico_02.png'),
_thirdItem
? _item(
context, 'ITEM_3', 'Title3', 'ico_03.png')
: Container(),
],
),
),
),
)),
);
}

This example should demonstrate how to have a fixed title. Note the Column's mainAxisSize is set to MainAxisSize.max and SingleChildScrollView is wrapped in a Flexible, which results in the SingleChildScrollView occupying the remainings space and it enables scrolling.
class FixedTitleScrollView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text(
'Fixed Title',
style: TextStyle(
color: Color.fromRGBO(78, 53, 43, 1.0),
fontSize: 40.0,
fontWeight: FontWeight.w300),
),
),
Flexible(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
_item(),
_item(),
_item(),
_item(),
_item(),
_item(),
_item(),
_item(),
_item(),
],
),
),
),
],
);
}
Widget _item() {
Color color = Color(Random().nextInt(0xffffffff));
return Container(
color: color,
height: 300,
width: 300,
child: Align(
alignment: Alignment.center,
child: Text(color.toString()),
),
);
}
}
Try modifying this to your needs. Hope it helps :-)

Placing text in the center of a CircularProgressIndicator

I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: value,
),
),
Align(
alignment: FractionalOffset.center,
child: Text("Test")
)
],
),
...
],
);
Adding the Align() widget changes the layout from this:
to this:
I've also tried
Align(
alignment: Alignment.center,
child: Text("Test")
)
and
Center(
child: Text("Test"),
)
instead of the Align() widget, but they all produce the same result

That's because your Stack doesn't have size, so to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.
Column(
children: <Widget>[
SizedBox(
height: 200.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: 1.0,
),
),
),
Center(child: Text("Test")),
],
),
),
],
)

Use Positioned They are meant to be used with Stacks.
As per documentation:
A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
Also, don't forget to wrap your Stack inside a Container or Center so as to put constraints to the box.

Column(
children: <Widget>[
SizedBox(
height: 40,
child: Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
child:
new CircularProgressIndicator(
value: 10,
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 15,
child: Text(
bytesDownload!,
textAlign:
TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)),
],
),
),
],
)

Just Wrap it inside a SizedBox()
https://i.stack.imgur.com/fJfaL.png

Flutter - How to make a column screen scrollable

I'm building a flutter app with a Login Screen. On focus on the text field(s), the screen is overflowed and i cannot scroll. I've tried using a ListView.builder, but that just gives a renderBox error, and the regular ListView doesn't work
The widget structure is like this
-scafold
- body
- container
- column
- form
- column
- textInput
- textInput
- container
- container
- row
- raisedButton
Thank You in advance !!

The ListView solution should work, but at the time of writing, it suffers from the crash listed here. Another way to achieve the same thing without this crash is to use a SingleChildScrollView:
return new Container(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

try this Code: Its Using ListView
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username or Email",
),
),
SizedBox(
height: 15.0,
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Password",
),
),
SizedBox(
height: 15.0,
),
Material(
borderRadius: BorderRadius.circular(30.0),
//elevation: 5.0,
child: MaterialButton(
onPressed: () => {},
minWidth: 150.0,
height: 50.0,
color: Color(0xFF179CDF),
child: Text(
"LOGIN",
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),
),
),
)
],
),
),
),
),
SizedBox(
height: 25.0,
),
Row(
children: <Widget>[
Expanded(child: Text("Don't Have a Account?")),
Text("Sign Up",
style: TextStyle(
color: Colors.blue,
)),
],
),
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RaisedButton(
padding: EdgeInsets.all(15.0),
onPressed: () {},
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
32.0,
),
side: BorderSide(color: Color(0xFF179CDF))),
child: Text(
"SKIP SIGN UP FOR NOW",
style:
TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
),
)),
],
),
),
);
}
}

There are two easy ways of doing it.
Wrap your Column in a SingleChildScrollView
SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)
Use ListView instead of Column.
ListView(
children: [
Text('First'),
//... other children
Text('Last'),
],
)
This approach is simple to use, but you lose features like crossAxisAlignment and other benefits provided by Column, in that case, you can wrap your children widget inside Align and set alignment property.
Now you may have nested children which are further scrollable, in that case, you need to provide a fixed height to your children, you may use SizedBox for that, that's it.
For example:
ListView(
children: [
Text('First'),
SizedBox(
height: 100,
child: ListView(...), // nested ScrollView
),
Text('Last'),
],
)

We can use the Expanded widget. It will add scrolling.
return new Expanded(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

Wrap your column in SingleChildScrollView and then wrap SingleChildScrollView in a Center widget to center the widgets in the column.
Center(
child: SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)