body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 100.00,
height: 100.00,
color: Colors.red,
),
])),
));
Currently, the height is 100.00, but I need to stretch it to infinity.
I tried to change the height to double.infinity:
Container(
width: 100.00,
height: double.infinity,
color: Colors.red,
But then I receive the following error:
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
To achieve this, you can either:
1) Use a widget called Expanded widget.
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
])),
));
2) Give the Container a height and width of the device screen using the MediaQuery class
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// give it a width equals to the device screen
width: MediaQuery.of(context).size.width,
// give it a height equals to the device screen
height: MediaQuery.of(context).size.height,
color: Colors.red,
),
])),
));
Wrap your Container with an Expanded-Widget and remove the height completely.
Expanded(
child: Container(
width: 100.00,
color: Colors.red,
),
),
The Expanded-Widget fills the available space of the child of a Row or a Column along the main-axis.
The right way to assign height to is the calculating height of
App Bar
Top Bar Space(Exist on the above App Bar)
Remaining screen
Logic:
1. Get the MediaQuer
final mediaQuery = MediaQuery.of(context);
2. Declare the AppBar Widget and same App Bar instance should be used in Scaffold App Bar
final PreferredSizeWidget appBar = AppBar(
title: Text('Home'),
);
3. Use calculated height
Container(
width: mediaQuery.size.width,
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top),
color: Colors.red,
),
Related
I have a flutter widget tree as the following:
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 750),
),
DefaultTabController(
length: 5,
child: Column(
children: [
SizedBox(
height: 40,
width: double.infinity,
child: TabBar(
),
Container(
height: 750
child: TabBarView(children: [
BusinessProfileOverviewPage(),
BusinessProfileGalleryPage(),
BusinessProfilePageReviews(),
BusinessProfileOffersPage(),
BusinessProfilesProductsPage(),
]),
),
],
),
),
]))
I want to get rid off the tabbarview container height, so it becomes felxible based on the contents of the child pages.
when I remove the fixed height I get error of unbounded heights.
I tried also box constrains, but childs always tak the max height.
how can I adjust that?
thanks
I'm using a Stack to Positioned one widget on top of an Image.asset widget, but the problem I have is that my whole Stack widget is not scrollable to see the whole content. I wrapped the Stack widget with a SingleChildScrollView but the problem still persists. If I wrap the Stack widget with a Containter and give the height: MediaQuery.of(context).size.height, it's scrollable but I can't still see the whole content of the page. Where is my mistake, that's what I'm wondering? With what widget should I wrap Stack or is there a better way for my problem? In short, I'm stacking a Column on top of an Image and I need the whole Stack widget to be scrollable so I can see the whole content of the Stack widget. Here is the code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: [
Image.asset(
'lib/modules/common/images/logo.png',
width: double.infinity,
height: 196.0,
),
Positioned(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
top: 136.0,
child: Column(
children: [
Container(), // some content inside the container
Container(), // // some content inside the container
],
),
),
],
),
),
),
);
}
Thanks in advance for the help!
if you mean to have a image on back and scrollable content at fron check this answer, if not let me know and share a prototype/image that you want.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 3,
child: Stack(
fit: StackFit.loose,
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
'assets/image.jpg',
width: double.infinity,
height: 196.0,
),
),
Positioned(
top: 136.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
2,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.amberAccent
: Colors.cyanAccent,
), // some content inside the container
// some content inside the container
),
),
),
),
],
),
),
),
),
);
}
In my app I have a bottomBar which is placed at the bottom right above the SafeArea:
The problem is that I would like to have a white Container at the bottom (red arrow in image) so that for bigger iPhones (where the bottom of the screen IS NOT EQUAL to the safeArea) the empty place in the image if filled white.
For phones where the bottom screen is equal to the safeArea the fillContainerHeight should simply be nil/zero.
This is my setup:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
// mainAxisSize: MainAxisSize.max,
children: [
SafeArea(
child: Row(
children: [
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
Container(
height: 49,
child: Image.asset('assets/images/bottomBar.png')),
Expanded(
child: Container(
height: 49,
color: Colors.white,
)),
],
),
),
Container(color: Colors.white) // -> fill container
],
)
Right now the container is not being shown. What is the best way to solve my problem here? I couldn't find anything on this. Let me know if you need any more info!
You could try to use the stack widget like this (the second child (align widget) is positioned above your SafeArea widget):
return Stack(
children: [
SafeArea(
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: MediaQuery.of(context).padding.bottom;,
),
)
],
);
Another option would be to wrap your SafeArea in a Container and give it a white background while setting the top property to false (= meaning the SafeArea will not be applied to the top):
return Container(
color: Colors.white,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(),
body: // Your other widgets here
),
),
);
I am adding a Container inside Column. I have given Container fixed width 60% of device width and height is 30% of device height. For height it is reflecting good but width covering whole parent.
I am not sure what I am doing wrong.
Here is my code:
Scaffold(
body: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height*.30,
child: Container(
width: MediaQuery.of(context).size.width*.20,
height: 40,
child: Text('test'),
color: Colors.blueAccent,
),
),
Expanded(
child: ListView(
children: chatList.map((chatModel) {
return ChatTileWidget(chatModel: chatModel,);
}).toList(),
),
)
],
),
);
Constraints in Flutter works different than usual. If you want to give height and width to the child, it will usually follows its parents constraints.
To read more about Constraints in Flutter: Understanding Constraints.
To get what you want, you need to use Align and set the alignment property to your preferred position. Here is an example for you. I have wrapped your inner Container with an Align widget and set the alignment to topLeft so it doesn't take it's parent height and width:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.3,
child: Align(
alignment: Alignment.topLeft,
child: Container(
height: 40.0,
color: Colors.blueAccent,
width: MediaQuery.of(context).size.width * 0.2,
child: Text('test')
)
)
)
]
)
RESULT
To know more about Align, please see this: Align Class.
I am facing problems with Rows in flutter, I want to put my asset at the botton of the container, How can I do that using Row? I tried mainAxisAlignment: MainAxisAlignment.end, and cross.end but is not working...
Widget build(BuildContext context) {
double wi = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
width: wi,
height: 200,
),
Container(
width: wi,
height: 200,
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
SvgPicture.asset('assets/escapa.svg', semanticsLabel: 'Flask', color: Colors.black, width: 100,height: 100,)
]
),
)
],
),
),
);
you can download the asset/image.svg here
http://filesharing24.com/d/DVh
Container has property alignment use that,
you can either use it like this
alignment: Alignment(0.0, 0.0), // this means center, range is from -1 to +1
you would need to set it as Alignment(-1.0, 1.0)
or use it like this
alignment: Alignment.bottomRight,
u don't need to play with row or column axis, container property should be enough.
play around with either one of the methods to get exact position