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?
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.
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]
)
)
)
],)
]
)
]
)
),
@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.
User contributions licensed under CC BY-SA 3.0