I need to fix a minimum width to my Column Widgets. Inside each of them, I have Text Widgets which can be very short or very long. I need to fix a minimum width to them in order to have an acceptable size of Column even if the text is short. The other Column need obviously to adapt himself.
Row(children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child: RichText(
text: TextSpan(
text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
],
),
],
)
There's probably a dozen ways to do what you want. And likely none of them straightforward or easy to understand. (The subject of constraints & sizes is quite complicated. See this constraints page for more examples & explanations.)
Here's one potential solution.
This will set a minimum width for the blue column (based on stepWidth), but will expand/grow if the text (child) inside wants to.
The yellow column will resize to accommodate the blue column.
class ExpandedRowPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Row Page'),
),
body: SafeArea(
child: Center(
child: Row(
children: [
IntrinsicWidth(
stepWidth: 100,
// BLUE Column
child: Container(
color: Colors.lightBlueAccent,
child: Column(
children: [
//Text('Short'),
Text('shrt')
],
)
),
),
// YELLOW Column
Flexible(
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
],
)
),
)
],
)
),
),
);
}
}
You could do the above without a Flexible yellow column, but a very long text child would cause an Overflow warning without a Flexible or Expanded wrapping widget.
A Row widget by itself has an infinite width constraint. So if a child wants to be bigger than screen width, it can, and will cause an overflow. (Try removing Flexible above and rebuild to see.)
Flexible and Expanded, used only inside Row & Column (or Flex, their superclass), checks screen width and other widgets inside a Row, and provides its children with a defined constraint size instead of infinite. Children (inside Flexible/Expanded) can now look up to parent for a constraint and size themselves accordingly.
A Text widget for example, will wrap its text when it's too wide for constraints given by Flexible/Expanded.
use FittedBox();
suppose Example:
Row(
children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child:
FittedBox(
child: RichText(
text: TextSpan(
text:
"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
),
],
),
],
);
Flutter Newbie here.
Please refer to this example from Flutter docs Example
I have added just 4 lines to that code. You will find those lines which has comment "Lines Added by me".
But there is no change in the output.
Widget build(BuildContext context) {
return DefaultTextStyle(
style: Theme.of(context).textTheme.bodyText2,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
print(viewportConstraints.minWidth); // Lines Added By me
print(viewportConstraints.maxWidth); // Lines Added By me
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
maxWidth : viewportConstraints.minWidth/2, // Lines Added By me
minWidth : viewportConstraints.minWidth/2, // Lines Added By me
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
// A fixed-height child.
color: const Color(0xffeeee00), // Yellow
height: 120.0,
alignment: Alignment.center,
child: const Text('Fixed Height Content'),
),
Container(
// Another fixed-height child.
color: const Color(0xff008000), // Green
height: 120.0,
alignment: Alignment.center,
child: const Text('Fixed Height Content'),
),
],
),
),
);
},
),
);
}
So I am just playing with that example. And i wanted to see that if i can control the width of containers by providing maxWidth to constrainedBox. But its not working and i want to know reason/concept behind that?
Now in section layout behaviour of container says that "If the widget has an alignment, and the parent provides bounded constraints, then the Container tries to expand to fit the parent, and then positions the child within itself as per the alignment."
Can someone explain me where i am wrong in my understanding ?
From the above ScreenShot it seems that proper(width/2) constraints are not passed to column.
I'm trying to make a list of cards that are displayed in a SingleChildScrollView.
However I can't figure out how to make the cards fit their contents.
I've attached a picture of my issue, and how I want the cards to look like.
I've tried putting them in an expanded which doesn't seem to make a difference.
I've also tried setting a manual height on the card container which for some reason only displays two cards and doesn't let me scroll.
I'm presuming that I need to set a minimum height on the cards, but I can't seem to figure out at what level should I add it.
Widget displayVideo(item) {
return Flexible(
child: Container(
child: Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage:
NetworkImage(item.fromChannel.channelThumbnail),
),
title: Text(item.fromChannel.channelTitle),
subtitle: Text(item.publishAt),
),
Container(
child: new AspectRatio(
aspectRatio: 16 / 10,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.center,
image: new NetworkImage(item.thumbnailUrl),
)),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.title,
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
),
),
),
);
}
Widget displayVideos(items) {
List<Widget> lines = [];
print(items);
items.videos.forEach((element) => lines.add(displayVideo(element)));
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(children: lines)));
}
#override
Widget build(BuildContext context) {
final ExplorePlaylistArguments args =
ModalRoute.of(context).settings.arguments;
playlist = fetchPlaylist(args.playlistId);
return Scaffold(
appBar: AppBar(
title: Text(args.playlistName),
),
body: Container(
child: FutureBuilder<Playlist>(
future: playlist,
builder: (context, snapshot) {
if (snapshot.hasData) {
return displayVideos(snapshot.data);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return Center(child: CircularProgressIndicator());
}),
));
}
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 303 pixels on the bottom.
The relevant error-causing widget was:
Column file:///C:/Users/Jonathan/AndroidStudioProjects/klp_app/lib/screens/explore_playlist.dart:29:18
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#42b06 relayoutBoundary=up19 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=384.7, 0.0<=h<=67.9)
... size: Size(384.7, 67.9)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 303 pixels on the bottom.
How the cards look like:
How I want each individual card to look like:
Solution:
Widget displayVideo(item) {
return Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage:
NetworkImage(item.fromChannel.channelThumbnail),
),
title: Text(item.fromChannel.channelTitle),
subtitle: Text(item.publishAt),
),
new AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(item.thumbnailUrl, fit:BoxFit.fitWidth),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.title,
style: TextStyle(color: Colors.black, fontSize: 16),
),
)
],
),
);
}
Widget displayVideos(items) {
List<Widget> lines = [];
items.forEach((element) => lines.add(displayVideo(element)));
return SingleChildScrollView(
child: Column(children: lines));
}
Tip: You can also use ListView.builder() instead of SingleChildScrollView and Column
You have to remove Container from displayVideos method.
return SingleChildScrollView(child: Column(children: lines)); // container remove
And remove Flexible from displayVideo method.
I am trying to add a Stack within a ListView in a SafeArea. However, there is a runtime exception as seen below:
BoxConstraints forces an infinite height.
I/flutter (18717): These invalid constraints were provided to RenderConstrainedBox's layout() function by the following
I/flutter (18717): function, which probably computed the invalid constraints in question:
I/flutter (18717): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:259:13)
I/flutter (18717): The offending constraints were:
I/flutter (18717): BoxConstraints(w=411.4, h=Infinity)
My code:
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return new Scaffold(
body: SafeArea(
top: true,
child: ListView( shrinkWrap: true,
children: <Widget>[_buildFrostedRow(context)])));
}
Stack _buildFrostedRow(BuildContext context) {
return Stack(
children: <Widget>[
new ConstrainedBox(
constraints: const BoxConstraints.expand(), child: _showCardRow()),
new Center(
child: new ClipRect(
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockVertical * 20,
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5)),
child: new Center(
child: new Text('Frosted',
style: Theme.of(context).textTheme.display3),
),
),
),
),
),
],
);
}
What am I missing here?
You need to limit height to Stack (put it into Container and set height or something like that). Because if you didn't, the ListView cannot calculate layout.
return new Scaffold(
body: SafeArea(
top: true,
child: ListView( shrinkWrap: true,
children: <Widget>[Container(height:200, // can change
child: _buildFrostedRow(context))])));
Just wrap your Stack with Constrained box or Fixed Heigh Container.
Because, Listview and Stack has infinite height
In Android match_parent and wrap_content are used to resize the widgets automatically relative to their parent to the content the widget contains.
In Flutter it seems by default all widgets are set to wrap_content, how would I change it such that I can fill its width and height to that of its parent?
You can do with little Trick:
Suppose you have requirement of :
( Width,Height )
Wrap_content ,Wrap_content :
//use this as child
Wrap(
children: <Widget>[*your_child*])
Match_parent,Match_parent:
//use this as child
Container(
height: double.infinity,
width: double.infinity,child:*your_child*)
Match_parent,Wrap_content :
//use this as child
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[*your_child*],
);
Wrap_content ,Match_parent:
//use this as child
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[your_child],
);
In order to get behavior for match_parent and wrap_content we need to
use mainAxisSize property in Row/Column widget, the mainAxisSize
property takes MainAxisSize enum having two values which is
MainAxisSize.min which behaves as wrap_content and MainAxisSize.max
which behaves as match_parent.
Link of the original Article
The short answer is that the parent doesn't have a size until the child has a size.
The way layout works in Flutter is that each widget provides constraints to each of its children, like "you can be up to this wide, you must be this tall, you have to be at least this wide", or whatever (specifically, they get a minimum width, a maximum width, a minimum height, and a maximum height). Each child takes those constraints, does something, and picks a size (width and height) that matches those constraints. Then, once each child has done its thing, the widget can can pick its own size.
Some widgets try to be as big as the parent allows. Some widgets try to be as small as the parent allows. Some widgets try to match a certain "natural" size (e.g. text, images).
Some widgets tell their children they can be any size they want. Some give their children the same constraints that they got from their parent.
There are actually some options available:
You can use SizedBox.expand to make your widget match parents dimensions, or SizedBox(width: double.infinity) to match only the width or SizedBox(heigth: double.infinity) to match only the heigth.
If you want a wrap_content behavior it depends on the parent widget you are using, for example if you put a button on a column it will behave like wrap_content and to use it like match_parent you can wrap the button with a Expanded widget or a sizedbox.
With a ListView the button gets a match_parent behavior and to get a wrap_content behavior you can wrap it with a Flex widget like Row.
Using an Expanded widget makes a child of a Row, Column, or Flex
expand to fill the available space in the main axis (e.g., horizontally for
a Row or vertically for a Column).
https://docs.flutter.io/flutter/widgets/Expanded-class.html
Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.
https://docs.flutter.io/flutter/widgets/Flexible-class.html
Use the widget Wrap.
For Column like behavior try:
return Wrap(
direction: Axis.vertical,
spacing: 10,
children: <Widget>[...],);
For Row like behavior try:
return Wrap(
direction: Axis.horizontal,
spacing: 10,
children: <Widget>[...],);
For more information: Wrap (Flutter Widget)
I used this solution, you have to define the height and width of your screen using MediaQuery:
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width
)
To make a child fill its parent, simply wrap it into a FittedBox
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
A simple workaround:
If a container has only one top level child, then you can specify alignment property for the child and give it any available value. it'll fill all the space in the container.
Container(color:Colors.white,height:200.0,width:200.0,
child:Container(
color: Colors.yellow,
alignment:Alignment.[any_available_option] // make the yellow child match the parent size
)
)
Another way:
Container(color:Colors.white,height:200.0,width:200.0,
child:Container(
color: Colors.yellow,
constraints: BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
)
)
Stack(
children: [
Container(color:Colors.red, height:200.0, width:200.0),
Positioned.fill(
child: Container(color: Colors. yellow),
)
]
),
Use FractionallySizedBox widget.
FractionallySizedBox(
widthFactor: 1.0, // width w.r.t to parent
heightFactor: 1.0, // height w.r.t to parent
child: *Your Child Here*
}
This widget is also very useful when you want to size your child at a fraction of its parent's size.
Example:
If you want the child to occupy 50% width of its parent, provide widthFactor as 0.5
Match Parent
To match or fill the parent (height & width) we can use additional constraints on Container:
Container(
constraints: BoxConstraints.expand(), // ← this guy
child: Text('Center > Container > Text')
)
In Flutter, constraints are the space you can fill (or must fill, if "tight" constraints).
Constraints are given... no actually, imposed by parents.
By default, Container will wrap its content (child:) & size itself to its child, unless overriden (or not allowed by tight constraints).
Using the constraints: argument, we can give Container additional constraints to override default Container constraint behavior (such as wrapping content).
Using Container(constraints: BoxConstraints.something) doesn't overwrite incoming/parent constraints; It just allows us to override default behavior, where allowed, such as wrapping content.
Code Sample - BoxConstraints
Here's a copy/paste code example showing effects of various constraints we can apply to a Container that has "loose" incoming/parental constraints (provided by Center).
import 'package:flutter/material.dart';
class MatchParentPage extends StatefulWidget {
#override
_MatchParentPageState createState() => _MatchParentPageState();
}
class _MatchParentPageState extends State<MatchParentPage> {
BoxConstraints constraints;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Match Parent'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded( // shares space constraint evenly with other Expanded
child: Center( // ← fills tight parent constraint & loosens ↓ child constraint ↓
child: Container( // got loose constraint from Center...
constraints: constraints, // can apply many additional constraints
color: Colors.lightBlueAccent.withOpacity(.3),
child: Text('Center > Container > Text')),
),
),
Expanded(
child: Container(
color: Colors.orangeAccent,
child: Wrap(
children: [
_button('default', null),
_button('*expand()', BoxConstraints.expand()),
_button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),
_button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),
_button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),
_button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),
_button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),
_button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),
_button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),
_button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),
])
),
)
],
),
);
}
Widget _button(String label, BoxConstraints _constraints) {
bool _active = _constraints == constraints;
return Padding(
padding: const EdgeInsets.only(top:8, left: 8),
child: RaisedButton(
color: _active ? Colors.cyanAccent : null,
child: Text(label),
onPressed: () {
setState(() => constraints = _constraints);
},
),
);
}
}
Use this line of codes inside the Column.
For wrap_content : mainAxisSize: MainAxisSize.min
For match_parent : mainAxisSize: MainAxisSize.max
MATCH_PARENT
FractionallySizedBox(
widthFactor: 1.0, // width w.r.t to parent
heightFactor: 1.0, // height w.r.t to parent
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
height: double.infinity,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
constraints: BoxConstraints.expand(),
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
WRAP_CONTENT
Wrap(children: [
Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
])
OR
Container(
constraints: BoxConstraints.tightFor(),
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
Match_parent,Wrap_content :
Row(
children: [
Expanded(
child: Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
),
])
Wrap_content,Match_parent :
Column(
children: [
Expanded(
child: Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
),
])
For match parent option you can wrap your widget by a container and give it a width like this
width: double.infinity
this approach will make the widget fill max space available for it on the screen.