Flutter

FlutterのBottomNavigationで角丸にする方法

2019/12/21

概要

趣味でアプリ開発をしている際に, BottomNavigationを角丸にしたいと思ったのですが,
調べてもそれっぽい記事がありませんでした...

ClipRRectを利用したら, うまくいきましたので僕の実装方法を紹介したいと思います.

flutter01

僕の実装方法

まずはBottomNavigationBarを実装していきます.

色々な実装方法があるみたいなのですが, 僕は上の画像のようなUIを実装したかったため,
BottomAppBarを利用しました.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:  BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: (){},),
            IconButton(icon: Icon(Icons.home), onPressed: (){},),
          ],
        ),
      ),
    );
  }
}

これでBottomNavigationが表示されたと思います.

次にClipRRectを利用して, BottomNavigationの角を丸くしたいと思います.
BottomAppBarをClipRRectで囲むだけです！

return Scaffold(
  bottomNavigationBar: ClipRRect(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
    child: BottomAppBar(
      /// 上記で記載したため, 省略
    )
  ),
);

これで角丸のBottomNavigationが実装できました.
とても簡単だったのですが, 簡単すぎて誰も記事にしていなかったので,
1, 2時間くらい消費してしまいました...

Flutterで角丸にする = BoxDecorationやshapeプロパティを使う

みたいなイメージがあったので, 上記で解決しようとばかりしていました...

番外編

BottomNavigationで角丸にすることはできましたが, 上の画像のUIみたいではありません.
BottomNavigationの真ん中に浮いたようなボタンを追加していきたいと思います.

実装方法はいろんなサイトで記載されている一般的な方法でやります.

return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  bottomNavigationBar: ClipRRect(
    /// 省略
    child: BottomAppBar(
      shape: CircularNotchedRectangle(),
      /// 省略
    )
  ),
);

floatingActionButtonを実装し, Locationを設定することでBottomNavigationBarに
ボタンを配置することできます.

shape: CircularNotchedRectangle()
で, 穴が開いた感じになります.

Flutter

Twitterフォロー待ってます！