今回は「Row」の基本的な使い方について紹介します。
Rowを使えば複数のWidgetをx軸方向に配列できます!
目次
Rowの基本プロパティ
children:複数のWidgetを配列にして並べる

childrenプロパティにWidget型の配列を使用します。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Row(
children: const <Widget>[
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.red,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.green,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.yellow,
),
),
],
),
),
);
}
mainAxisAlignment

mainAxisAlignmentプロパティでx軸の表示方法を指定します。
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const <Widget>[
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.red,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.green,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.yellow,
),
),
],
),
),
);
}
あわせて読みたい


【Flutter】MainAxisAlignmentの使い方|メイン軸における配列の表示指定
今回は「MainAxisAlignment」の基本的な使い方について紹介します。 MainAxisAlignmentを使えばColumn, Rowなどの配列(children)のメイン軸における表示方法を指定で...
crossAxisAlignment

crossAxisAlignmentプロパティでy軸の表示方法を指定します。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: const <Widget>[
SizedBox(
height: double.infinity,
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.red,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.green,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.yellow,
),
),
],
),
),
);
}
あわせて読みたい


【Flutter】CrossAxisAlignmentの使い方|クロス軸における配列の表示指定
今回は「CrossAxisAlignment」の基本的な使い方について紹介します。 CrossAxisAlignmentを使えばColumn, Rowなどの配列(children)のクロス軸における表示方法を指定...
textDirection

textDirectionプロパティでx軸の開始位置を指定します。
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Row(
textDirection: TextDirection.rtl,
children: const <Widget>[
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.red,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.green,
),
),
SizedBox(
width: 100,
height: 100,
child: Card(
color: Colors.yellow,
),
),
],
),
),
);
}
投稿が見つかりません。
以上です。
おすすめ記事
あわせて読みたい


【Flutter】Columnの使い方|垂直方向に複数のWidgetを並べる
今回は「Column」の基本的な使い方について紹介します。 Columnを使えば複数のWidgetをy軸方向に配列できます! 【Columnの基本プロパティ】 childrenmainAxisAlignment...
あわせて読みたい


【Flutter】SizedBoxの使い方|childのサイズ指定・空きスペース作成
今回は「SizedBox」の基本的な使い方について紹介します。 SizedBoxを使えばchildのサイズを指定したり、空きスペースを作ったりできます! 【SizedBoxの基本プロパティ...