【flutter】簡単！ナビゲーションバー用アニメーションのやり方を解説！【curved navigation bar】

他のアプリとの差別化を図るのであれば、アニメーション付きのナビゲーションバーを実装してみてはいかがでしょうか。

今回の記事ではぬるぬる動く新しいナビゲーションバー用アニメーション「curved navigation bar(カーブドナビゲーションバー)」をご紹介します。

この記事は以下のような方を対象者としています。

flutterを学習し始めたばかりの方
flutterでオシャレなナビゲーションバーを作りたい方
flutterでイケてるモバイルアプリを作りたい方

flutterのcurved navigation barとは!?
#

まずは、こちらのgif画像をご覧ください。

こちらが今回の記事で実装するcurved navigation bar(カーブドナビゲーションバー)の挙動になります。

オシャレなUIを持つアプリを作りたい場合などはcurved navigation barを入れるとアプリの魅力が増すと思います。

今回の記事では下記githubのコードを参考にさせていただきました。

curved_navigation_bar
https://github.com/rafalbednarczuk/curved_navigation_bar

curved navigation barを実装してみよう
#

それでは実際に自分の手元でコードを書いてビルドしてみましょう。

ご参考までに私の開発環境情報を記載します。

開発環境

OS : MacOS Big Sur
Chip : Apple M1
Memory : 8GB

その1 : curved-nagivation-bar用のプロジェクトファイルを作成
#

まずはflutterのプロジェクトを自分のローカル上に作成しましょう。

まずはターミナルを開き下記コマンドを実行してください。

flutter create ~/Desktop/curved-navigation-bar

上記コマンドを実行すると、デスクトップ上にcurved-navigation-barというflutterプロジェクトフォルダが作成されます。

その2 : アニメーションライブラリのインストール
#

その次にcurved navigation barのライブラリをインストールしていきましょう。

flutterでプロジェクトにライブラリを追加するにはpubspec.yamlファイルを編集する必要があります

pubspec.yamlとはパッケージ管理ファイルです。

pubspec.yamlはプロジェクトフォルダ直下に存在します。

1
2
3
4
  flutter:
    sdk: flutter
　// 下記コードを追加（バージョンは常時最新バージョンを指定でOK）//
  curved_navigation_bar: 1.0.3

上記ファイル保存後にターミナル上で下記コマンドを実行します。

flutter pub get

これで自分のプロジェクトにcurved navigation barのライブラリのインストールができました。

その3 : curved navigation bar用ののコードを書く
#

これでflutterアプリ内で波形アニメーションを描画する準備ができました。

デフォルトで生成されるmain.dartにcurved navigation bar用のコードを書いて行きます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
  
  import 'package:flutter/material.dart';
<!-- 下記でインストールしたライブラリを利用 -->
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.blueAccent,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          //Handle button tap
        },
      ),
      body: Container(color: Colors.blueAccent),
    );
  }
}