[Flutter]AppBarを複数行にするには?

Flutter

どうも、ちょげ(@chogetarou)です。

AppBarを複数行(multiline)にする方法を紹介します。

スポンサーリンク

方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(Icons.calendar_today),
                  Text('Title'),
                  Icon(Icons.settings)
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(Icons.android),
                  Text('Subtitle'),
                  Icon(Icons.ios_share)
                ],
              )
            ],
          ),
        ),
        body: Center());
  }

AppBarを複数行にするには、引数「title」に「Column」を使います。

AppBar(
    title: Column()
)

「Column」の子ウェジェットとして、「Row」を使えば、左右のアイコンも複数行にすることが出来ます。

引数「title」の型は「Widget?」です。

なので「title」には、ウェジェットであれば何でも使うことが出来ます。(一部はレイアウトが崩れる)

コメント

タイトルとURLをコピーしました