How do i fixed containers in Flutter? - flutter

Question

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?

Answer 1

Following 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]
)
)
)
],)
]
)
]
)
),

Answer 2

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.

Answer 3

#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.