【Flutter】Rowの使い方｜水平方向に複数のWidgetを並べる

今回は「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,
              ),
            ),
          ],
        ),
      ),
    );
  }

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,
              ),
            ),
          ],
        ),
      ),
    );
  }

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,
              ),
            ),
          ],
        ),
      ),
    );
  }

以上です。

おすすめ記事