How do i fixed containers in Flutter?
I want to make first container fixed in center and second container fixed in right but i couldn't. I add mainAxisAlignment: MainAxisAlignment.spaceBetween in row line but it didn't work. Is there different properties to adjust position of widgets?
My Code:
new Container(
width: 360,
height: 502,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffffffff),
Color(0x00caebfe)
],
stops: [0,1]
)
),
child:Column(
//crossAxisAlignment: CrossAxisAlignment.start,
children:<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text("JULY 2017",
style: TextStyle(
fontFamily: 'Baloo',
color: Color(0xff181743),
fontSize: 20,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
)
)
),
Container(
alignment: Alignment.centerLeft,
//padding: EdgeInsets.only(left:90.0),
child: Column(
children: <Widget>[
new Container(
width: 14,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
],
stops: [0,1]
),
)
),
new Container(
//margin: EdgeInsets.only(top:3.0),
width: 23,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
],
stops: [0,1]
)
)
)
],)
)
]
)
]
)
),
Is there different properties to adjust position of widgets?
Batuhan Özkan3 Answers
Are you trying to make your FirstContainer placed at the very center, and your SecondContainer at the very end?
If so, you might want to use Row, and Expanded
So it would be something like this:
Row(
mainAxisSize: MainAxisSize.max,
children: [
/// Just a placeholder container to occupy 1/3 of the Row
Expanded(child: Container()),
Expanded(child: FirstContainer()),
Expanded(child: SecondContainer()),
]
)
What this does, is add a placeholder container which occupies 1/3 of the Row, and your FirstContainer will be forced to be at the center, and SecondContainer section of the Row.
RickFollowing what you said you wanted to achieve, as in having the text centred and the gradients all the way to the right, I've modified your code by adding an Expanded widget around the first Container in Row and removing the width of your top Container:
Container(
height: 502,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffffffff),
Color(0x00caebfe)
],
stops: [0,1]
)
),
child: Column(
children:<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Center(
child: Text("JULY 2017",
style: TextStyle(
fontFamily: 'Baloo',
color: Color(0xff181743),
fontSize: 20,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
)
),
),
),
Column(
children: <Widget>[
new Container(
width: 14,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
],
stops: [0,1]
),
)
),
new Container(
//margin: EdgeInsets.only(top:3.0),
width: 23,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
],
stops: [0,1]
)
)
)
],)
]
)
]
)
),
João Soares @override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
body: new Container(
width: 360,
height: 502,
decoration: new BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffffffff), Color(0x00caebfe)],
stops: [0, 1])),
child: Stack(
children: <Widget>[
Positioned(
right: 0,
child: Container(
alignment: Alignment.center,
child: Text("JULY 2017",
style: TextStyle(
fontFamily: 'Baloo',
color: Color(0xff181743),
fontSize: 20,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
))),
),
Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
new Container(
width: 14,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
], stops: [
0,
1
]))),
new Container(
//margin: EdgeInsets.only(top:3.0),
width: 23,
height: 5,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(colors: [
Color(0xfffe1e9a),
Color(0xfffea64c)
], stops: [
0,
1
])))
],
))),
])),
),
),
);
}
Check out this method using stack it makes it simple later can later modify thank-you.
sagar acharyaUser contributions licensed under CC BY-SA 3.0