【Flutter入門】AnimatedIconの使い方について解説するよ。

AnimatedIconについて解説

本記事は、マルチプラットフォーム開発のSDK【Flutter】を用いたモバイルアプリ開発入門の為の記事です。

ダーフク

モバイルアプリでは、アニメーションを用いることで視認性の高いアプリを開発することができます。本記事では、Flutterに標準装備されているAnimatedIconsについて簡単に解説します。

利用可能なアイコン

AnimatedIconで利用可能なアイコンは合計14種類あります。

そしてその14種類は双方向の遷移が準備されているため(例えば、追加アイコンからイベントアイコンと、イベントアイコンから追加アイコンへの2つのアニメーションがある)、実質7パターン存在することになります。

  1. 追加     <=>    イベント
  2. 左矢印    <=>    メニュー
  3. バツ     <=>    メニュー
  4. 3点リーダー   <=>    検索
  5. ホーム    <=>    メニュー
  6. リスト    <=>    ビュー
  7. 再生     <=>    停止

AnimatedIconのサンプル

実装方法

まず、アニメーションを使いたいWidgetにSingleTickerProviderStateMixinを実装します。

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {

 

その後、AnimationControllerを定義し、initState内で初期化、dispose内でStateがdisposeされる前にdisposeします。


AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

 

最後にAnimatedIconの実装です。iconプロパティにAnimatedIconを指定し、progressにAnimationControllerを設定します。

AnimatedIcon(
          icon: AnimatedIcons.arrow_menu,
          progress: _controller,
        ),

 

そしてボタン等を用意して、それが押下されるとアニメーションが走り、アイコンが変わります。

floatingActionButton: FloatingActionButton(
        child: Icon(Icons.check),
        onPressed: () async {
          await _controller.forward();
          await Future.delayed(Duration(seconds: 2));
          await _controller.reverse();
        },
      ),

 

これだけでAnimatedIconを用いたアニメーションは実装することができます。

ソースコードの全容

import 'package:flutter/material.dart';

void main() {
  runApp(new UserApp());
}

class UserApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Icons Sample"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            children: <Widget>[
              _buildAnimatedIconsCard(
                AnimatedIcons.add_event,
                AnimatedIcons.event_add,
                label1: "add_event",
                label2: "event_add",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.arrow_menu,
                AnimatedIcons.menu_arrow,
                label1: "arrow_menu",
                label2: "menu_arrow",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.close_menu,
                AnimatedIcons.menu_close,
                label1: "close_menu",
                label2: "menu_close",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.ellipsis_search,
                AnimatedIcons.search_ellipsis,
                label1: "ellipsis_search",
                label2: "search_ellipsis",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.home_menu,
                AnimatedIcons.menu_home,
                label1: "home_menu",
                label2: "menu_home",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.list_view,
                AnimatedIcons.view_list,
                label1: "list_view",
                label2: "view_list",
              ),
              SizedBox(height: 10.0),
              _buildAnimatedIconsCard(
                AnimatedIcons.play_pause,
                AnimatedIcons.pause_play,
                label1: "play_pause",
                label2: "pause_play",
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.check),
        onPressed: () async {
          await _controller.forward();
          await Future.delayed(Duration(seconds: 2));
          await _controller.reverse();
        },
      ),
    );
  }

  Widget _buildAnimatedIconWidget(AnimatedIconData icon,
      {@required String label}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimatedIcon(
          icon: icon,
          progress: _controller,
        ),
        Text(label),
      ],
    );
  }

  Widget _buildAnimatedIconsCard(
    AnimatedIconData icon1,
    AnimatedIconData icon2, {
    @required String label1,
    @required String label2,
  }) {
    return Card(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildAnimatedIconWidget(
            icon1,
            label: label1,
          ),
          SizedBox(width: 40.0),
          _buildAnimatedIconWidget(
            icon2,
            label: label2,
          ),
        ],
      ),
    );
  }
}

まとめ

本記事ではAnimatedIconについて解説をしました。Flutterはこれ以外にも簡単にアニメーションが実装できるWidgetを多数揃えています。

それらについてもまた別の記事で解説していきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です