Rowウィジェット、ColumnウィジェットのcrossAxisAlignmentプロパティを設定することで、cress axis方向に子ウィジェットをどのように配置するかを決定します。crossAxisAlignmentプロパティは5つの値をとります。
CrossAxisAlignment.start
cress axis方向のスタートに子ウィジェットを配置します。(Rowの場合上端、Columnの場合左端)
CrossAxisAlignment.end
cross axis方向の終わりに子ウィジェットを配置します。(Rowの場合下端、Columnの場合右端)
CrossAxisAlignment.center
cress axis方向の中央(センター)に子ウィジェットを配置します。
CrossAxisAlignment.stretch
cress axis方向に子ウィジェットを引き伸ばします。(Rowの場合上端から下端まで引き伸ばす、Columnの場合左端から右端まで引き伸ばす。)
CrossAxisAlignment.baseline
キャラクターベースラインに子ウィジェットを配置します。(Textクラスのみ、textBaselineプロパティをTextBaseline.alphabeticに設定している必要がある。)
sample1-1(CrossAxisAlignment.start)
//sample1-1 //main.dart import 'package:flutter/material.dart'; void main(){ runApp(MyApp(),); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( home:Scaffold( appBar:AppBar(), body:MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, //←ここを変更 children: [ GreenBox(), BiggerGreenBox(), GreenBox(), ], ); } } class GreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } } class BiggerGreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 300, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } }
sample1-1(CrossAxisAlignment.start)(result)
sample1-2(CrossAxisAlignment.end
)
//sample1-2 //main.dart import 'package:flutter/material.dart'; void main(){ runApp(MyApp(),); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( home:Scaffold( appBar:AppBar(), body:MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.end, children: [ GreenBox(), BiggerGreenBox(), GreenBox(), ], ); } } class GreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } } class BiggerGreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 300, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } }
sample1-2(CrossAxisAlignment.end
)(result)
sample1-3(CrossAxisAlignment.center)
//sample1-3 //main.dart import 'package:flutter/material.dart'; void main(){ runApp(MyApp(),); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( home:Scaffold( appBar:AppBar(), body:MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, //←ここを変更 children: [ GreenBox(), BiggerGreenBox(), GreenBox(), ], ); } } class GreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } } class BiggerGreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 300, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } }
sample1-3(CrossAxisAlignment.center)(result)
sample1-4(CrossAxisAlignment.stretch)
//sample1-4 //main.dart import 'package:flutter/material.dart'; void main(){ runApp(MyApp(),); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( home:Scaffold( appBar:AppBar(), body:MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, //←ここを変更 children: [ GreenBox(), BiggerGreenBox(), GreenBox(), ], ); } } class GreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } } class BiggerGreenBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 50, height: 300, decoration: BoxDecoration( color: Colors.green, border: Border.all(), ), ); } }
sample1-4(CrossAxisAlignment.stretch)(result)
参考
https://flutter.dev/docs/codelabs/layout-basics
https://flutter.dev/docs/codelabs/layout-basics#crossaxisalignment-property