【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),
    );
  }
}

こちらのソースコードをコピペし起動すると上記添付したgif画像と同じ挙動のアプリが表示されます。

さいごに

ここまでお読みいただきありがとうございました。
私のブログ記事を読んでいる方の中には海外転職・海外移住への興味がある方もいらっしゃるかと思います。

僕はもともと営業職から転職してITエンジニアになり、現在ベトナムで働き始めて7年目になります。

私自身ベトナムで働き始めて7年目になりますが、海外就職を実現するために大事なのは 英語力と開発現場で働いた経験だと感じました。

もし今後海外移住・海外就職を本気で実現させたい方はぜひこれらのサービスを活用してみてください。

また、独学でのベトナム語習得を目指しており現在Youtubeにもベトナム語で動画を更新しております。

日本語字幕もつけて楽しく見れるよう頑張っておりますので、そちらもぜひご興味あればご覧いただけますと幸いです。

ゼロから始めるITエンジニア | テックゲート転職

未経験からITエンジニアを目指すなら「テックゲート転職」がおすすめです。

IT業界に特化したキャリアアドバイザーが、プログラミング未経験者でも安心してスタートできるよう親身にサポートしてくれます。

履歴書・ポートフォリオ作成から面接対策、企業選びまで徹底サポートしてくれるので、キャリアチェンジに不安がある方も安心です。

僕自身も異業種からITエンジニアに転職した経験があるので、第一歩を踏み出すサポートの重要性は痛感しています。

👉「IT業界で働いてみたい」と思ったその瞬間がチャンスです！
▶【公式サイトはこちら】

ゼロから始める英語学習 | スタディサプリENGLISH

ベトナムでITエンジニアとして働く私にとって、英語でのスムーズなやり取りは欠かせません。

スタディサプリENGLISH（新日常英会話コース）は、実践的な会話表現をドラマ仕立てで学べる神アプリ。

1回3分で完結するレッスンだから、忙しい日常でも継続しやすく、自然な表現力が身につきます。英語での雑談や会議がもっとラクになります！

👉今すぐ無料体験して、自信を持って話せる自分に近づきましょう！
▶【公式サイトはこちら】

ゼロから始めるベトナム語学習 | ベトナム語動詞クイズ

ベトナム語動詞検定アプリは、日常会話に必須のベトナム語動詞を効率よく習得できる無料学習ツールです。

四択クイズ形式で出題されるため、ゲーム感覚で語彙力を強化でき、スキマ時間の学習にも最適です。

出題はランダム化されており、繰り返し学習することで自然に記憶が定着します。

初級者から中級者まで対応しており、語彙レベルごとに分かれたカテゴリも充実。

音声読み上げ機能が搭載されているため、発音の練習にも活用可能です。

これからベトナム語を本格的に学びたい方、語学試験対策や留学前の準備をしたい方におすすめのアプリです。

今すぐ「ベトナム語動詞検定」で、語学力アップを目指しましょう！

ゼロから始めるベトナム語学習 | ベトナム語漢越語クイズ

「ベトナム語漢越語発音クイズ」は効率的に語彙力と発音を強化できる無料学習ツールです。

四択クイズ形式で、視覚と聴覚の両方からアプローチし、記憶に残りやすい設計になっています。

日本語の漢字の意味をヒントに、ベトナム語の正しい読み方を選ぶトレーニングができるため、日本人学習者に特化した内容になっています。

音声付きで、ネイティブ発音を繰り返し聞けるのも大きな魅力。発音の基礎を固めたい初心者から、中級者の語彙強化まで幅広く対応しています。

漢越語の理解を深めたい方は、今すぐ「ベトナム語漢越語発音クイズ」で楽しく学習を始めましょう！

【Flutter】リリースビルドで画面がグレー（灰色）になる現象の解決方法をわかりやすく解説

【アプリ開発】個人開発で広告収益を上げるための6つのポイントを解説

【Flutter】リワード広告をアプリ内に表示するやり方をわかりやすく解説【Admob】

flutterのcurved navigation barとは!?#

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

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

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

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