Learn how layouts and widgets work in Flutter with this awesome practical guide.
Container
Container(
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: LayoutGuide(),
);
}
}
class LayoutGuide extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
),
);
}
}
Row MainAxisAlignment
Note: The below example is with CrossAxisAlignment.center
.spaceEvenly .spaceAround .spaceBetween
CrossAxisAlignment .center .start .end .stretch
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
Container(
color: Colors.blueAccent,
width: 80.0,
height: 80.0,
),
Container(
color: Colors.orangeAccent,
width: 80.0,
height: 80.0,
),
],
)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: LayoutGuide(),
);
}
}
class LayoutGuide extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.cyanAccent,
width: 80.0,
height: 80.0,
),
Container(
color: Colors.blueAccent,
width: 80.0,
height: 80.0,
),
Container(
color: Colors.orangeAccent,
width: 80.0,
height: 80.0,
),
],
),
),
);
}
}
Read the full story
Sign up now to read the full story and get access to all paid posts.
Subscribe