Udemyセール開催中! 対象コースが1,220円から

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

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

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

目次

enumの種類

VerticalDirection

  • VerticalDirection.down(デフォルト)
  • VerticalDirection.up

TextDirection

  • TextDirection.ltr(デフォルト)
  • TextDirection.rtl

デフォルト

Columnデフォルト(VerticalDirection.down)
Rowデフォルト(TextDirection.ltr)

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

以上です。

  • URLをコピーしました!
目次
閉じる