【Flutter】Column・Rowの並び順を逆向きにする｜VerticalDirection, TextDirection

2022 4/05

2021年4月18日 2022年4月5日

今回は「VerticalDirection」「TextDirection」の基本的な使い方について紹介します。

VerticalDirection, TextDirectionを使えばColumnやRowなどの配列を逆順に並び替えられます！

enumの種類

VerticalDirection

VerticalDirection.down（デフォルト）
VerticalDirection.up

TextDirection

TextDirection.ltr（デフォルト）
TextDirection.rtl

デフォルト

Column、Rowはデフォルトで配列の並び順がそれぞれ「VerticalDirection.down」「TextDirection.ltr」になっています。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: const [
            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,
              ),
            ),
          ],
        ),
      ),
    );
  }

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Row(
          children: const [
            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,
              ),
            ),
          ],
        ),
      ),
    );
  }

並び順を逆向きにする

ColumnではverticalDirectionプロパティに「VerticalDirection.top」、RowではtextDirectionプロパティに「TextDirection.rtl」として並び順を逆にしています。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          verticalDirection: VerticalDirection.up,
          children: const [
            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,
              ),
            ),
          ],
        ),
      ),
    );
  }

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Row(
          textDirection: TextDirection.rtl,
          children: const [
            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,
              ),
            ),
          ],
        ),
      ),
    );
  }

以上です。