Zenn
💮

mainAxisAlignment: MainAxisAlignment

2023/07/14に公開
Flutter
widget
tech

パーツを配置するパターンをまとめてみた

Widgetを思った場所に配置したいが、layoutについてわかっていないのかうまくいかなかった😱
自分のメモ用に技術記事を書くことにした。

⭐️横向きか縦のWidgetを左に配置する

RowかColumnを画面左に寄せるには、mainAxisAlignment: MainAxisAlignment.startを使用する。startにすると、星のiconが、左側寄せになります。

横向き

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WidgetExample(),
    );
  }
}

class WidgetExample extends StatelessWidget {
  const WidgetExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('Widget Example'),
      ),
      body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    );
  }
}

縦向き

Rowから、Columnに変更

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

⭐️星を中央寄せにする

星のiconを中央寄せにしたいときは、mainAxisAlignment: MainAxisAlignment.centerを使います。

縦向きのパターン

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

横向きのパターン

body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

⭐️星を右寄せにする

星のiconを右寄せにするには、mainAxisAlignment: MainAxisAlignment.endを使います。

横向きのパターン

body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

縦向きのパターン

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),

⭐️星を両端に寄せる

星のiconを両端に寄せたいときは、mainAxisAlignment: MainAxisAlignment.spaceBetweenを使います。

横向き

body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

縦向き

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

⭐️星の要素間のスペースを均等にする

星のiconの要素間のスペースを均等にするには、mainAxisAlignment: MainAxisAlignment.spaceEvenlyを使います。

縦向き

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

横向き

body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

⭐️星を中央寄せにする

星を中央寄せにする方法で、mainAxisAlignment: MainAxisAlignment.spaceAroundがあります。centerと違うのは、要素の間にスペースが入るところですね。

横向きで比較

body: Container(
        color: Colors.yellow,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

mainAxisAlignment: MainAxisAlignment.spaceAroundは、幅がある。

mainAxisAlignment: MainAxisAlignment.centerは、星が全て中央寄せになる。

縦向きで配置

body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),

最後に

Widgetのレイアウトについて学習するなら、昔から変わることのない方法でやっているので、こちらのサイトが参考になると教わりました。レイアウトでお悩みの人いたらこちらのサイトを見てみてください。
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Discussion