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
Related
As documentation says
Containers with no children try to be as big as possible unless the
incoming constraints are unbounded, in which case they try to be as
small as possible
Well when I make incoming constraints unbounded for inner Container i suppose that it should be as small as possible but it expands for entire screen.
body: Container(
color: Colors.red,
constraints: const BoxConstraints(
maxHeight: double.infinity,
maxWidth: double.infinity,
),
child: Container(
color: Colors.green,
),
),
Why?
If you read the documentation a bit further, you'll see that constraint arguments on the Container itself will override this behavior:
Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.
Try wrapping the inner childless Container in an UnconstrainedBox, and you'll see it will shrink to zero width and height.
body:
Container(
color: Colors.red,
width: double.infinity,
height:double.infinity,
child: UnconstrainedBox(
child: Container(
color: Colors.green,
),
),
)
Although red container has infinite size, You put it in a scaffold's body which has specific size. so your red container get specific size then your grin container with no child get size as much as its parents.
The red container actually will has size as small as posibble depends its child.
the green container has no child, then as the documentation said it will try to be as big as possible unless the incoming constraints are unbounded,
if you change the child , like Text widget, or Column, or other widget, it will not get the maximum size.
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 am struggling with making the column scrollable:
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
child: Column(
children: [
Expanded(flex: 2, child...),
Expanded(flex: 5, child...)
]
)
)
I tried wrapping all the widget inside a single child scroll view, I tried a list view and I tried combing layout builder but nothing works
When you use expanded you should have a limited space (height in column and width in row), in your case your height will fit the space in screen.
If you change the column to the scrollview even change it directly to the ListView or swap it with the SingleChildScrollView, you will have unlimited space and you can't use expanded widget, because it wants to fill all possible space, and it is unlimited in scrollview
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.
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?