flutterでStickyBottomAppBarを実現する
この記事は Flutter #2 Advent Calendar 2018 - Qiita 19日目のエントリです。
宣言通り小ネタにします。
twitterやswarmなどの投稿画面でよくあるキーボードの上にあるviewの実現方法です。
以前某所でLTしたときはiOSについて調べて
このライブラリを使うのが楽そうだなと思いました。
これをflutterでやるのはどうすればいいんだろうと思い見つけたのがこちらで紹介されている方法です。
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関連の記事を書きます
の予定です。