flutterでStickyBottomAppBarを実現する

この記事は Flutter #2 Advent Calendar 2018 - Qiita 19日目のエントリです。

宣言通り小ネタにします。

twitterやswarmなどの投稿画面でよくあるキーボードの上にあるviewの実現方法です。

slideship.com

以前某所でLTしたときはiOSについて調べて

github.com

このライブラリを使うのが楽そうだなと思いました。

これをflutterでやるのはどうすればいいんだろうと思い見つけたのがこちらで紹介されている方法です。

www.reddit.com

BottomAppBarをstickyにする感じです。

  Widget _buildStickyBottomNavigationBar() {
    final List<Widget> rowContents = <Widget>[
      IconButton(
        icon: const Icon(Icons.photo_library, color: Colors.blueAccent),
        onPressed: () => _getImage(),
      ),
    ];
    return Transform.translate(
        // そのうち直るらしい
        // https://github.com/flutter/flutter/issues/15947
        // offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
        offset: MediaQuery.of(context).viewInsets.bottom == 0
            ? Offset(0.0, 0.0)
            : Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom + 34),
        child: BottomAppBar(
          child: Row(children: rowContents),
        ));
  }

こんな感じでwidgetを作って

@override
Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: _buildStickyBottomNavigationBar(),
  );
}

ScaffoldのbottomNavigationBarに設定してあげれば動きます。

以上です。

明日の担当はまだ空いてるようです。 明後日は kazuki229 - Qiita さんの OAuth関連の記事を書きます の予定です。