ColumnとRowは、FlutterのレイアウトWidgetの一種で、子Widgetを縦または横に並べるために使用されます。Columnは縦に、Rowは横に並べます。また、ColumnとRowは、FlexというWidgetを使用して作成されています。Flexは、親Widgetに対して、子Widgetがどの程度のスペースを占めるかを指定するために使用されます。
Column
基本的な使い方
以下は、Columnを使用して、3つのText Widgetを縦に配置する例です。
import 'package:flutter/material.dart';
String _name = _controller.text;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
home: Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Center(
child: Column(
children: [
Text('1st item'),
Text('2nd item'),
Text('3rd item'),
],
)),
));
}
}
上記の例では、Column Widgetに、3つのText Widgetを子Widgetとして渡しています。これにより、3つのText Widgetが縦に並べられます。(以降のサンプルコードはColumn Widget部分を抜粋したものを記載します。)
また、Column Widgetには、mainAxisAlignmentやcrossAxisAlignmentなどのプロパティがあります。これらのプロパティを使用して、子Widgetの配置方法を制御できます。
mainAxisAlignmentプロパティを利用する
例えば、以下のようにmainAxisAlignmentプロパティを使用して、子Widgetを中央揃えに配置することができます。
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('1st item'),
Text('2nd item'),
Text('3rd item'),
],
)上記の例では、mainAxisAlignmentプロパティにMainAxisAlignment.centerを指定しています。これにより、子Widgetが中央に配置されます。
crossAxisAlignmentプロパティを利用する
crossAxisAlignmentを利用すると子widgetを先頭位置を合わせたり、末尾の文字位置に合わせて並べることができます。
上記、mainAxisAlignmentプロパティに加え、crossAxisAlignmentを組み合わせると以下のようになります。
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('1st item sampletext'),
Text('2nd item 1234'),
Text('3rd item'),
],
)
上記サンプルコードを実行すると、縦に並んだ３個のテキストの先頭位置を合わせることができます。
Row
基本的な使い方
以下は、Rowを使用して、3つのText Widgetを横に配置する例です。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
home: Scaffold(
appBar: AppBar(
title: Text('Row'),
),
body: Center(
child: Row(
children: [
Text('1st item'),
Text('2nd item'),
Text('3rd item'),
],
)),
));
}
}上記の例では、Row Widgetに、3つのText Widgetを子Widgetとして渡しています。これにより、3つのText Widgetが横に並べられます。(以降のサンプルコードはRow Widget部分の抜粋のみを記載します)
また、Columnと同様に、RowにもmainAxisAlignmentやcrossAxisAlignmentなどのプロパティがあります。
mainAxisAlignmentプロパティを利用する
例えば、以下のようにmainAxisAlignmentプロパティを使用して、子Widgetを中央揃えに配置することができます。
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('1st item'),
Text('2nd item'),
Text('3rd item'),
],
)
crossAxisAlignmentプロパティを利用する
mainAxisAlignmentプロパティに加え、crossAxisAlignmentプロパティを利用すると以下のように表示することができる。
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('1st item'),
Text('2nd item'),
Text('3rd item'),
],
)
まとめ
FlutterのColumnとRowは、Widgetを縦または横に配置するための便利なWidgetです。Flexを使用して作成されているため、子Widgetがどの程度のスペースを占めるかを指定することができます。また、mainAxisAlignmentやcrossAxisAlignmentなどのプロパティを使用して、子Widgetの配置方法を制御することができます。
以上が、FlutterのColumnとRowの基本的な使い方についての説明でした。これらのWidgetを使うことで、レイアウトの構築が簡単になります。また、Flutterには他にも多くのレイアウトWidgetがありますので、ぜひ公式ドキュメントなどを参考にして、効率的なレイアウトの構築を目指しましょう。