Unable to set dynamic height for a Column involving ListView.builder() flutter - flutter

I have the following code where I'm trying to make a column inside which is a container containing title, and another container containing a list of items, that is scrollable horizontally. But I get the following runtime error - "
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand."
Widget horizontalSlider(MediaQueryData mediaQuery){
final List<String> entries = <String>['A', 'B', 'C','D','E'];
return Container(
padding: EdgeInsets.all(0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left:16),
child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
),
Container(
child: ListView.builder(
padding: EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index){
return Column(
children: <Widget>[
Container(
height: mediaQuery.size.height/3,
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/$index.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(18),
boxShadow: [BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 4,
blurRadius: 4,
),],
),
width: mediaQuery.size.width/1.5,
),
Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
],
);
},
scrollDirection: Axis.horizontal,
),
)],
),
);
}
What I expect from this is a heading (i.e. the first container inside the first column), an image of height equal to one-third of screen height and a Text widget at the end. But why do I get the error I cannot understand.

Finally I found the answer from this thread https://github.com/flutter/flutter/issues/18341. I have to replace the second Container with Expanded and it works well. Updated Code
Widget horizontalSlider(MediaQueryData mediaQuery){
final List<String> entries = <String>['A', 'B', 'C','D','E'];
return Container(
padding: EdgeInsets.all(0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left:16),
child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index){
return Column(
children: <Widget>[
Container(
height: mediaQuery.size.height/3.5,
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/$index.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(18),
boxShadow: [BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 4,
blurRadius: 4,
),],
),
width: mediaQuery.size.width/1.5,
),
Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
],
);
},
scrollDirection: Axis.horizontal,
),
)],
),
);
}

Related

Efficient way to make container take remaining width in a Row widget in Flutter

I am new to Flutter and was practicing its UI where I came across a situation where I had a list where each list element have an image on the left and some text on right.
Below is my approach to that
child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 20),
children: [
const SizedBox(height: 5),
Row(
children: [
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: const DecorationImage(
image: NetworkImage('http://images.unsplash.com/photo-1555010133-d883506aedee?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'),
fit: BoxFit.cover
)
),
),
const SizedBox(width: 10),
Container(
color: Colors.green,
height: 80,
width: 280,
)
],
),
],
),
Here I am specifying width individually for both containers which is not an efficient way to do this since phone sizes may vary.
Below is the result for above block of code
Screenshot of the app screen
I tried specifying crossAxisAlignment: CrossAxisAlignment.stretch to the Row() but it throws an error as below
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
How can I achieve this? Please assist
Thank you
Wrap the widget with an Expanded inside the row:
Row(
children: [
...otherChildren,
Expanded(
child: Container(
color: Colors.green,
height: 80,
),
),
],
),
Use ListView.builder with ListTile widgets. It has a leading widget (normally an icon or an avatar) to the left, text in the middle and trailing widget (normally an icon), each of which is optional.
ListView.builder(
itemCount: ...,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: const CircleAvatar(
radius: 20.0,
foregroundImage: NetworkImage(...),
),
title: Text(...),
subtitle: Text(...),
trailing: ...,
onTap: () => ...,
);
},
)

Text align in a box decoration

I have this box decoration used for showing the reviews but I don't know what I should use to align the text properly. This is how it looks right now:
I want the username ("La fottaria to have some space left) I used Align( Alignment(8,3)) but it doesn't change the position.
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return Container(
width: 200,
margin: EdgeInsets.only(
top: 8, bottom: 8, right: 12),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 2,
spreadRadius: 1)
], borderRadius: BorderRadius.circular(4)),
child: Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data.documents[index]
.data["avatarUrl"]),
),
Align(
alignment: Alignment(8, 3),
child: Text(snapshot
.data
.documents[index]
.data["name"]),
)
],
),
_buildRatingStars(snapshot.data
.documents[index].data["rating"]),
Text(snapshot
.data.documents[index].data["text"])
],
),
);
}
);
Inside the Row widget, you can use a SizedBox with width property.
It will give some space.
Row(
children: [
CircleAvatar(
backgroundImage:
NetworkImage(snapshot.data.documents[index].data["avatarUrl"]),
),
//insert here
SizedBox(
width: 20.0,
),
Align(
alignment: Alignment(8, 3),
child: Text(snapshot.data.documents[index].data["name"]),
)
],
)
You can remove the Align widget if you want.
Instead of align widget, I suggest you to use Container widget like this:
Container(
margin: const EdgeInsets.only(left: 15),
child: Text(snapshot
.data
.documents[index]
.data["name"]),
)
Use Align
Example:
DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
child: Align(
alignment: Alignment.center, // align type
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 15),
child: Text(
title,
style: TextStyle(fontSize: 17, color: Colors.blue),
),
),
),
)
You can use some inbuilt property of rows i.e Main Axis Alignment and Cross Axis Alignment to align its children.For eg:
Row(
mainAxisAligment:MainAxisAlignment.spaceEvenly,
crossAxisAligment:CrossAxisAligment.center,
children: [
CircleAvatar(
backgroundImage:
NetworkImage(snapshot.data.documents[index].data["avatarUrl"]),
),
SizedBox(
width: 20.0,
),
Text(snapshot.data.documents[index].data["name"]),
],
)
You can wrap the text widget inside padding widget also to align according to your needs.

Why is Gridview.count not filling out the space with my dynamic content

I am trying to create a gridview starting from the second column. The first card is just a static card with a button in it. So the second card starting should be dynamic.
All the cards have the same width and height. So basically they all should look like the first card (Add a new dog)
But it's not filling out the space as I expected it would.
Here is part of my code from the body section:
body: Stack(fit: StackFit.expand, children: [
//bg image
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(Images.bgYellow), fit: BoxFit.cover)),
),
//content
SafeArea(
bottom: false,
left: true,
right: true,
top: false,
child: Padding(
padding: EdgeInsets.all(3 * SizeConfig.safeBlockHorizontal),
child: GridView.count(
crossAxisCount: 2,
children: [
//add card
Container(
margin: EdgeInsets.symmetric(
vertical: 1 * SizeConfig.blockSizeVertical,
horizontal: 2 * SizeConfig.blockSizeHorizontal),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 8,
offset: Offset(
0, 2), // changes position of shadow
),
],
),
child: FlatButton(
onPressed: null,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
const IconData(0xe901,
fontFamily: 'icDog'),
color: muddyBrown,
size: 20 * SizeConfig.safeBlockHorizontal,
),
SizedBox(height: 5),
Text(
"ADD A NEW DOG",
style: TextStyle(
color: muddyBrown,
fontWeight: FontWeight.bold,
fontSize: 4 *
SizeConfig.safeBlockHorizontal),
)
],
)),
),
//dynamic content
StateBuilder<PetState>(
observe: () => _petStateRM,
builder: (context, model) {
return Column(
children: [
...model.state.pets.map((pet) =>
GestureDetector(
onTap: () {
Navigator.pushNamed(
context, petDetailRoute);
},
child: Container(
margin: EdgeInsets.symmetric(
vertical: 1 *
SizeConfig
.blockSizeVertical,
horizontal: 2 *
SizeConfig
.blockSizeHorizontal),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey
.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 8,
offset: Offset(0,
2), // changes position of shadow
),
],
),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
//dynamic data => Photo + Name
children: [
Container(
width: 100.0,
height: 100.0,
decoration: new BoxDecoration(
color:
const Color(0xff7c94b6),
image: new DecorationImage(
image: new NetworkImage(
"${pet.photo}"),
fit: BoxFit.cover,
),
borderRadius:
new BorderRadius.all(
new Radius.circular(
50.0)),
border: new Border.all(
color: muddyBrown,
width: 4.0,
),
),
),
SizedBox(height: 5),
Text(
"${pet.name}",
style: TextStyle(
fontSize: 4 *
SizeConfig
.safeBlockHorizontal,
color: muddyBrown,
fontWeight:
FontWeight.bold),
)
],
),
),
))
],
);
}),
],
)
)),
]));
What about simply adding the 'static' card to the 'dynamic' ones and then build one GridView with all of them together?
Widget newDogButton = Card(...);
//dynamic content
StateBuilder<PetState>(
observe: () => _petStateRM,
builder: (context, model) {
return Column(
children: [
newDogButton,
...model.state.pets.map((pet) => // ...
That should take care of most of your layout issues automatically.
Because StateBuilder return a widget. How about moving the Whole GridView inside it?
...
child: Padding(
padding: EdgeInsets.all(3 * SizeConfig.safeBlockHorizontal),
child: StateBuilder<PetState>(
observe: () => _petStateRM,
builder: (context, model) {
return GridView.count(
crossAxisCount: 2,
children: [
// The button "ADD A NEW DOG" here,
Container(...),
//dynamic content here
...model.state.pets.map((pet) =>
...
).toList(),
},
),
),
Every grid item in GridView will have same height and width, if you want different dynamic height or width for different items, use flutter_staggered_grid_view, in your case:
StaggeredGridView.countBuilder(
crossAxisCount: 2,
itemCount: 2,
itemBuilder: (BuildContext context, int index) => new Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
)),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(1, index.isEven ? 2 : 1),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
The situation:
To me, this problem is not coming from your Dynamic content but from the height allowed to it to display it's content. Inside the GridView.count constructor, the default childAspectRatio value is 1.0, meaning that the default max height of each child of the GridView is deviceWidth / crossAxisCount (2 in your case).
The problem:
In order for each child to display correctly, it's height must not exceed this ratio (causing your overflowed error).
My opinion:
To solve this problem, I will either replace the dynamic content StateBuilder<PetState> with a static Widget which height will not exceed the ratio OR wrap the dynamic content StateBuilder<PetState> in a SingleChildScrollView to ensure that the overflowed error will not happen and the wrapper can produce the scroll effect to see the entire dynamic content.

Flutter: Cropped Shadows on ListView

I just wanted to create a horizontal ListView in Flutter with some BoxShadows to recreate a 'neomorphism' effect.
I then realized that the shadows on the ListView Items are cropped at the edges. I already tried to adjust all kind of different paddings and margins but the problem persisted.
The weird thing is: Cards that were the Image Assets couldn't be loaded render the Shadow perfectly fine.
class _DrinkListState extends State<DrinkList> {
#override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
padding: EdgeInsets.all(30),
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: this.widget.availableDrinks.length,
itemBuilder: (BuildContext context, int index) => Container(
child: Center(
child: LimitedBox(
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: Center(
child: Container(
child: Image.asset("assets/" +
this
.widget
.availableDrinks[index]
.imageName),
),
),
),
),
Expanded(
flex: 1,
child:
Text(this.widget.availableDrinks[index].label))
],
),
)),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: neodec,
padding: EdgeInsets.all(20),
width: 200,
)),
height: 300);
}
}
My BoxDecoration:
BoxDecoration neodec = BoxDecoration(
color: Color.fromRGBO(246, 246, 246, 1),
boxShadow: [
BoxShadow(color: Colors.black12, offset: Offset(10, 10), blurRadius: 10),
BoxShadow(color: Colors.white, offset: Offset(-10, -10), blurRadius: 10)
],
borderRadius: BorderRadius.all(Radius.circular(20)));
I finally managed to work around the issue by using a Card instead of Center widget in my WidgetBuilder/Container.

Fit the whole Screen with two dynamic Widgets

Within a Column I have two Widgets: TableCalendar and a Container that contains a ListView.builder. Both have dynamic sizes.
I want my Container to fill the remaining size of the screen that is left from the calendar.
I thought that I could regulate this wrapping both Widgets with the Expanded Widget, but that only leads to an error.
The following assertion was thrown during performLayout(): RenderFlex
children have non-zero flex but incoming height constraints are
unbounded.
Here is my code:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TableCalendar(
events: _events, //fixme: here is the problem
initialCalendarFormat: CalendarFormat.twoWeeks,
calendarController: _controller,
calendarStyle: CalendarStyle(),
headerStyle: HeaderStyle(
centerHeaderTitle: true,
formatButtonDecoration: BoxDecoration(
color: Colors.pinkAccent.shade100,
borderRadius: BorderRadius.circular(20.0),
),
formatButtonShowsNext: false,
),
startingDayOfWeek: StartingDayOfWeek.monday,
onDaySelected: (date, events) {
setState(() {
_listOfShiftsPerGivenDay = events;
});
},
builders: CalendarBuilders(
selectedDayBuilder: (context, date, events) => Container(
alignment: Alignment.center,
margin: EdgeInsets.all(4.0),
color: Colors.pink,
// decoration: BoxDecoration(),
child: Text(
date.day.toString(),
),
),
todayDayBuilder: (context, date, events) => Container(
alignment: Alignment.center,
margin: EdgeInsets.all(4.0),
color: Colors.teal.shade100,
child: Text(
date.day.toString(),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0),
),
),
markersBuilder: (context, date, events, holidays) {
final children = <Widget>[];
if (events.isNotEmpty) {
children.add(
Positioned(
right: 1,
bottom: 1,
child: _buildEventsMarker(date, events),
),
);
}
return children;
}),
),
Container(
//fixme: the hight needs to be variable
height: 200.0,
child: ListView.builder(
itemCount: _listOfShiftsPerGivenDay.length,
itemBuilder: (context, index) => Container(
width: MediaQuery.of(context).size.width,
padding:
EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: _events[_controller.selectedDay][index],
// ),
),
),
)
],
),
What is the parent of the main Column at the beginning? Is it another Column?
If that is the case, then try wrapping the Column at the beginning with Expanded, that will force a height constraint to its children, then you can use Expanded on Container.
child: Expanded(
child: Column(
children: <Widget>[
TableCalendar();
Expanded(
child: Container()
)
])
I have written an article on Medium on why this might happen, if you want to know more.
What if you wrap your ListView() in an Expanded?
child: Column(
children: <Widget>[
TableCalendar();
Expanded(
child: ListView.builder()
)
])