I want to make a list view with image background. this is my builder code
ListView.builder(
itemCount: this.locations.length,
itemBuilder: (context, index) {
return Container(
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(this.locations[index].url),
fit: BoxFit.cover)),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text(this.locations[index].name,
style: Styles.listItemStyle)
],
));
},
)
It looks to me like the issue comes from the names, the text is bigger than the screen and therefore Flutter is trying to render something that will not be seen. There are some solutions you can consider:
Use the auto_size_text package, it will automatically shrink the text font size to fit its constraints.
Use the LayoutBuilder widget to get the text's parent constraints and force the text to fit within its available size with a SizeBox, then you can set overflow: TextOverflow.ellipsis in your Text constructor to show three dots if the text does not fit the screen.
Use a horizontal SingleChildScrollView to make the text scrollable.
Why do you need a row when your container only contains one Widget? Try removing the Row widget. Then the text inside Container should break right?
Related
I want to make a responsive UI in my app. In my home page, I have ScrollView->Column->childrens structure.
When I want to use horizontal Listview.builder in my column, it throws me error because height is unbounded. I fix it with wrapping my listview builder with container and I give this container a height value. But I dont want to give this height hardcoded,
I want to make my container height to its own child's height. I searched it and found a solution like ScrollView->Row->list.generate instead of ListView.Builder. But is it okay to make it like this? Does it cause performance problems or is it a bad practice?
My list isn't big. It has max 20 elements
For example this throwing error:
#override Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 5,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
width: 200,
height: 200,
);
},
)
],
)),
); }
But this does not throw an error
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(
5,
(index) => Container(
width: 200,
height: 200,
color: Colors.red,
)),
),
),
],
));
}
To clarify for everyone:
ListViews generate their children "lazily" - meaning they won't be drawn until they have been shown on screen. This means, of course, that they do not know the height of their items.
For example, if the ListViews children have heights similar to this list:
ooooOooo
But only this part was shown on the screen:
oooo | Oooo
And the ListView set it's height to fit "o" then it wouldn't be able to fit "O" when it eventually came on screen.
On the other hand, Rows do draw all of their children on spawn, meaning that, while they do know the size for all their widgets, they can become very slow quickly.
I would not suggest using images inside rows with 2-digit+ children, as they can be laggy not only on their initial draw, but also while the user does other things in the page containing said row - things such as scrolling up/down the page.
While testing I found that a row with just 30 children of the same stack (a small AssetImage on top of an IconImage) would lag the entire page when just scrolling up/down - not even scrolling along the row itself.
My recommended solution for you Ahmet, even though you don't want to hard-code your ListView's height, is to settle and set your ListView's height using:
MediaQuery.of(context).size.height * (percentage of screen's height you'd like for the ListView to take).
I'm having trouble with managing vertical overflow in my Flutter application.
Essentially, I have a main column with a container child that holds another column with 3 containers each containing a gridview:
stateful widget
Scaffold
body: Center
Column
Container
Column
Container
Gridview
Container
Gridview
Container
Gridview
What I've Tried:
Method 1:
to try and solve the vertical overflow, I have tried wrapping the containers in expanded, but the problem with that is it smushes everything together and I want all the content of the gridviews to be displayed at full height, with the ability to scroll down through the main column.
Method 2:
so next i tried wrapping the main column in a singlechildscrollview and removing the expanded wrappers from the containers, but that is giving me the "vertical viewport was given unbounded height" error.
What I Want:
ultimately, i want the containers to size automatically, to fit the content, and to be able to scroll down to view all of the content ion the main column.
i'm aware of the sizedbox solution, but again, i want the containers to resize automatically to fit the content inside.
what are my best options for achieving this?
UPDATE
these two official Flutter video explains this situation and the solution very well
https://youtu.be/ORiTTaVY6mM
https://youtu.be/LUqDNnv_dh0
it looks like what i want is to use sliverlists and slivergrids inside of a customscrollview instead of gridviews and listviews inside of a column
customscrollview
slivergrid
slivergrid
slivergrid
NOT
column
gridview
gridview
gridview
Try below code hope its help to you. try to wrap your GridView inside Expanded Widget
Center(
child: Column(
children: [
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
Expanded(
child: Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: GridView(
shrinkWrap: true,
),
),
),
],
),
),
Or try flutter_staggered_grid_view Package hope its help to you.
I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture.
Is there any way to move/resize the child widgets of stack while entering data from keypad.
Source code:
return Scaffold(
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/playingboard2.jpg'),
fit: BoxFit.cover)),
child: null,
),
_buildSelfPlayer(), // Returns the widget with form input and other widgets
_buildBank(), // top center, shows two pictures of bank
],
),
);
I don't see another fix for this, while also making use of Stack widget.
So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.
For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.
hello world hope you're well
looking to have a container with a fixed size witch have in it a Text() mean long text more than the size of the container
Thank you for your help
in flutter
Found the solution thanks to Stonik
Try to add scrollDirection (horizontal)
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
height: 200,
child: Text(
"Long text here which is longer than the container height"))),
Default is vertical
or if you want to have with your height then you have to change the order (SingleChildScrollView inside Container)
Container(
height: 200,
child: SingleChildScrollView(
child: Text(
"Long text here which is longer than the container height"))),
I am new to flutter and I must say I am impressed comming from a c# background I was able to do a listview in under five mins that were horizontal and contained a few containers.
However, I would like my container to be dynamically showing a List contents what I have so far is a widget building my colours out
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160.0, color: Colors.blue,),
Container(width: 160.0, color: Colors.green,),
Container(width: 160.0, color: Colors.cyan,),
Container(width: 160.0, color: Colors.black,
child:Text("Test"),
child: Image.network(
'https://flutter.io/images/catalog-widget-placeholder.png',
height: 100,
width: 150
)
)
But as you see I am trying to create another text element I want image then a bit of text and another text much the same way as Netflix would work but it's for a weather app.
Can someone explain how the child elements works can ou not have more than one child in a container cause when i tried this i got the following error. And what I should do to have a second child element of text and base the listview of a Dynamic POCO List
The [child] contained by the container.
If null, and if the [constraints] are unbounded or also null, the container will expand to fill all available space in its parent, unless the parent provides unbounded constraints, in which case the container will attempt to be as small as possible.
You should use Multi-child layout widget, these accept children instead of child. A good example for you might be Row, Column or Stack.
Don't be scared of nesting your Widgets, you'll be doing it a lot!
ListView
Container
Row
Text
Image
Icon
Container
Row
Text
Image
Icon
When you find yourself repeating your widget tree like this, create a custom widget that outputs the subtree. The above might become:
ListView
MyColoredListItem
MyColoredListItem
You can find a full list of Multi-child layout widgets on the flutter docs here:
https://flutter.dev/docs/development/ui/widgets/layout#Multi-child%20layout%20widgets
For more information about creating your own widgets:
https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html