【Flutter】Columnの要素を逆順(下から上)にする

2022年12月24日2023年9月21日

こんにちは、フラメルです。

今回はColumnの要素を逆順(下から上に配置)にする方法を紹介します。

Columnの要素を逆順にする方法

Columnの要素の順番を逆順にするにはverticalDirectionをVerticalDirection.upにします。

デフォルトはVerticalDirection.downで上から順に配置されます。

Column(
  verticalDirection: VerticalDirection.up,
  children: [
    Container(
      width: 150,
      height: 150,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.yellow,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    )
  ],
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Column(
            verticalDirection: VerticalDirection.up,
            children: [
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.blue,
              )
            ],
          ),
        ),
      ),
    );
  }
}

以上です。