I'm new in flutter. right now learning how to positioning or aligning widgets. I have two containers inside my row widget. I want to set my first container(which is red container) at the top left, and also want to set my second container(which is blue container) at the top right. how can I achieve this?
here is code sample:
class MyRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
],
),
),
),
);
}
}
Flutter has a rich documentation on Layouts , Mr.Tomek Polański has also explain Layouts in details.
You have to understand about Row and Column wise MainAxisAlignment , CrossAxisAlignment ,
when you want to position something which has single child, Use FittedBox or ConstrainedBox or SizedBox
as you have multiple children's under the hood of ROW Widget CrossAxisAlignment is your friend use it to achieve your goal.
Here you can see the final Version of the Code.
return Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
width: double.infinity,
),
),
Expanded(
flex: 1,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
),
],
),
),
);
Positioned
widget only use with Stack
widget, so you can solve your problem using below example but with Row
widget its may be not possible
Stack(children: <Widget>[
Positioned(
top: 5,
left: 5,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),),
Positioned(
top: 5,
right: 5,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),),
],
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.