Some Flex values create white space between Expanded widgets, as I understand it is the remainder of the calculations.
For example:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.green,
),
),
Expanded(
flex: 6,
child: Container(
color: Colors.green,
),
),
],
),
);
I'm looking for an elegant way to make these widgets take up all the available space.
The whole problem is that the flex values change during animation and this white line blinks.
Thanks!
it seems it is coming from border of Container,
Github Issue is still open.
here is the widget
Scaffold(
backgroundColor: Colors.green,
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.green,
),
),
child: Text("Section A"),
),
),
Expanded(
flex: 6,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.green,
),
),
child: Text("Section B"),
),
),
],
),
);
Try to add SizedBox() in between your expanded Widget like below:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.green,
),
),
SizedBox(
height: 25,)
Expanded(
flex: 6,
child: Container(
color: Colors.green,
),
),
],
),
);
Related
I'm making Container box with Flexible funtion but it doesn't work flexible rate (3:7).
Could you explain why it doesn't work?
Codes are below.
body: Container(
child: Row(
children: [
Flexible(child: Container(
color: Colors.lightGreenAccent,
child: Text("Hi, Lynn",
style: TextStyle(fontSize: 30),
),
), flex: 3,),
Flexible(child: Container(
color: Colors.blue,
child: const MyStatefulWidget()
), flex: 7,)
],
),
)
When you use Flexible it still makes children smaller than the flex when there is enough space. I believe you want to use Expanded. Try replacing it with that
You can use Expanded widget instead of Flexible
Container(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.lightGreenAccent,
child: Text("Hi, Lynn", style: TextStyle(fontSize: 30),),
),
flex: 3,
),
Expanded(
child: Container(
color: Colors.blue,
child: Text("Hi, Lynn",style: TextStyle(fontSize: 30),)
),
flex: 7,
)
],
),
)
What I want to achieve
I tried to create a sticky TabBar using StickyHeader plugin inside DraggableScrollSheet.
I try to achieve scrolling like this.
The Problem
But everytime I scrolled, there is "Incorrect use of ParentDataWidget." error.
I have tried to move the TabBar (wrapped by Container) and TabBarView (wrapped by Expanded) outside the StickyHeader and wrapped it with Column, but it doesn't works.
This is my minimal code
return Scaffold(
body: Stack(
children: [
Container(
height: double.infinity,
width: width,
decoration: BoxDecoration(
color: redMain,
),
),
DraggableScrollableSheet(
initialChildSize: 0.82,
minChildSize: 0.82,
builder: (BuildContext context, myScrollController) {
return Column(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
color: Colors.white,
),
child: ListView(
controller:
myScrollController, // assign controller here
children: [
Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Padding(padding: EdgeInsets.only(top: 34)),
Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 8),
child: Text('Featured', style: Title1),
),
Container(
color: Colors.yellow,
height: 100,
),
],
),
StickyHeader(
header: Container(
margin:
EdgeInsets.only(top: 22, bottom: 22),
child: TabBar(
controller: _tabController,
labelColor: Colors.red,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(
child: Text(
"All",
),
),
Tab(
child: Text(
"News",
),
),
],
),
),
content: Container(
height: 2000,
child: Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(
width: double.infinity,
color: Colors.green,
height: height,
),
Container(
width: double.infinity,
color: Colors.blue,
height: height,
),
],
),
),
),
),
],
),
],
)),
),
],
);
},
),
],
),
);
I wrap Expanded with Container and give it "dummy" fixed height because if I only use Expanded, error occured. But actually what I want is infinite scrolling without fixed height.
content: Container(
height: 2000,
child: Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Column(
The question
How to get rid of "Incorrect use of ParentDataWidget."? And how to make TabBarView infinity scroll without fixed height?
use Positioned widget inside Stack widget
I have a flutter app that I want to add "stories" to, but I am unable to do so cause I can't place 3 buttons over an image.
That's my desired look...
And this is what I can do so far...
And this is my code:-
child: GestureDetector(
child: Center(
child: Stack(
alignment: Alignment.bottomRight,
children: [
Image.network(
widget.url,
),
Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
)
],
),
),
onTap: () => controller.next(),
),
How can I achieve this effect?
Am I doing something with the Stack widget?
Using Positioned inside Stack can solve your problem, Below code may work for you, You can position the Container where you want it to be.
Widget build(BuildContext context) {
var ScreenHeight = MediaQuery.of(context).size.height;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Expenses App"),
backgroundColor: Colors.pink[900],
actions: [
IconButton(
icon: Icon(Icons.add),
// onPressed: () => startAddNewTransaction(context),
),
],
),
body: GestureDetector(
child: Center(
child: Stack(
// alignment: Alignment.bottomRight,
children: [
Image.network(
'https://picsum.photos/250?image=9',
),
Positioned(
top: ScreenHeight * 0.17,
child: Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
)
],
),
),
// onTap: () => controller.next(),
),
),
);
}
The default mainAxisSize of Column is max, If you set MainAxisSize.min for all Column you will get Stack's alignment.
child: Column(
mainAxisSize: MainAxisSize.min,
As for the alignment of your desire UI, I prefer using Align widget to wrap the parent Column.
Align(
alignment: Alignment(-1, .5), //play with it
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
More about Align.
GestureDetector(
child: Center(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://st2.depositphotos.com/3759967/5593/i/600/depositphotos_55936567-stock-photo-swirling-frosty-multi-colored-fractal.jpg",
),
),
),
),
Positioned(
bottom: MediaQuery.of(context).size.height * 0.1,
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
],
),
),
),
You can do like this, place image as background of a container, and your column in a positioned widget.
example
Inside a Card there is one column,which contain 2 Flexible widgets (with flex property 3,1) each one contain a Container widget
here is the code:
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
this code give me the below screen:
Now i want to place image to cover all the red area,
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
child: Image.network(
'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
}
but when add image inside Container this is what happen
i tried to change fit: BoxFit.cover, but nothing happen
how to make image cover Container(with red area) without change the container size?
Adding Row and other column
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
],
),
);
}
Use the decoration property of the Container to give it an Image instead:
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
RESULT:
EDIT: "Why is my Image not showing when I use it in a Row" ?:
You need to give your Card widget a Width by wrapping in a SizedBox or a Container.
Added a demo using your code as an example:
class Help extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
],
),
),
);
}
}
NOTE: It would be advisable to give the Card a width based on the Device screen.
RESULT:
I try to make custom box with different height that looks like this
is there any guide to make box like that picture?
Try it yourself on dartpad
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(32),
child: Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
border: Border.all(
color: Colors.lightBlue,
),
),
child: Row(
children: [
Flexible(
child: Container(
color: Colors.blue
),
),
SizedBox(width: 16),
Flexible(
child: Column(
children: [
Flexible(
child: Container(
color: Colors.blue
),
),
SizedBox(height: 16),
Flexible(
child: Container(
color: Colors.blue
),
),
],
),
),
],
),
),
),
),