Flutter MainAxisAlignmentについて調べてみた

Flutter MainAxisAlignmentとは

Flutter初学者がMainAxisAlignmentを調べてみた

本稿、あるいは本シリーズは初学者が理解を深めるためのプログラミングノートを公開したものです。

MainAxisAlignmentとは何か。Flutterのカウンターデモコードでも記述されているが、その意味を軽く理解しておきたい。

まず、MainAxisAlignmentとは公式ドキュメント曰く、子を主軸としたフレックスレイアウトであるという。フレックスレイアウトという概念まで突っ込むと日が暮れそうだが、CSSでもフレックスボックスというものがある。あれも、結局水平か垂直か方向を決めたり、間隔を指定することでさまざまな並び方が可能だ。

そういったレイアウト方法であると捉えて読み進めてみた。

「Column」、「Row」、「Flex」といったウィジェットに対して使えるようだ。また、これらは垂直方向、水平方向を表している。

childプロパティに指定されたColumnウィジェットを対して、mainAxisAlignmentを指定し、 MainAxisAlignment.centerとすることで、主軸の中央にできるだけ近い場所に以降の子ウィジェットを配置できるという具合だ。

MainAxisAlignmentには他にも、endやstartをつけることで端に寄せることができる。また、spaceAroundとすることで最初と最後の子ウィジェットの間で等間隔に配置することができる。この辺りはそれこそCSSのフレックスボックスと同じ概念だろう。

まとめ

MainAxisAlignmentは水平方向や垂直方向を指定し、適切に宣言することで子ウィジェットの配置を整理できる。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}