Flutter Tutorial 2：インタラクティブ機能を実装するわよ

前回作ったレイアウト用のチュートリアルを改造してインタラクティブ機能を実装するわよ。

インタラクティブ機能の実装

★アイコン（お気に入り）をタップしたら現在の状態に応じてアイコンと横の数字を変更するようにするわ。

具体的には★の状態が「お気に入り登録」されている状態よ。このまま★アイコンをタップするとお気に入りが解除されてアイコンが☆に変わるようにするわ。横の数字も-1されるわよ。

☆の状態でタップするとお気に入り登録されてアイコンが★になるわ。横の数字は+1よ。

このチュートリアルで学べるのは

• タップに応答
• カスタムウィジェットの作成

になるわ。

完成形の動き

まずは完成形の動きよ。前回のチュートリアルは外国の景勝地を外国語で解説しているからピンとこなくって、勝手に日本国内に変えちゃってるわ。姫路城なのに大した意味はないけれど...キレイよね。

それはともかく、インタラクティブ部分はこのお気に入り★マークよ。

起動した時のデフォルトはこんな感じで「お気に入り」登録状態よ。私も含めて41人がお気に入り登録中ってわけね。

それをタップすると...

★が☆になって「お気に入り」が解除されるわ。連動して数字も-1になるわよ。

カスタムウィジェットの作成

この動き（★／☆の切り替えと数字の連動）をやろうと思うと、カスタム・ウィジェットを使うわ。動きを連動させるために★と数字の2つのウィジェットを子要素に持つ単一のウィジェットが必要になるの。

FavoriteWidgetの作成

カスタム・ウィジェットの名前を FavoriteWidget にするわ。以下の内容を main.dart に追記して。一番最後に追記しても良いし、class MyApp() の前に入れちゃっても良いわ。

class FavoriteWidget extends StatefulWidget{
  const FavoriteWidget({Key? key}) : super(key: key);

  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget>{
  bool _isFavorited = true;
  int _favoriteCount = 41;

  @override
  Widget build(BuildContext context){
    return Row(
      mainAxisSize: MainAxisSize.min,
      children:[
        Container(
          padding: const EdgeInsets.all(0),
          child:IconButton(
            padding: const EdgeInsets.all(0),
            alignment: Alignment.centerRight,
            icon: (_isFavorited
              ? const Icon(Icons.star)
              :const Icon(Icons.star_border)),
            color:Colors.red[500],
            onPressed:_toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child:SizedBox(
            child:Text('$_favoriteCount'),
          ),
        ),
      ],
    );
  }

  void _toggleFavorite(){
    setState((){
      if (_isFavorited){
        _favoriteCount -= 1;
        _isFavorited = false;
      }else{
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }
}

_FavoriteWidgetState の build()メソッドで onPressed に _toggleFavorite を指定しているわ。タップしたらこれが呼び出されるってことよ。

で、_toggleFavorite では★／☆マークの状態によって「お気に入り」登録をオンオフしたり数を足したり引いたりしているの。単純ね。

ウィジェットツリーに追加

最後に作った FavoriteWidget をMyAppのウィジェット・ツリーに追加して既存のアイコンと数字と置き換えるわ。

/*3*/
          const FavoriteWidget(),
          /*
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          const Text('41'),
          */

build()メソッド内でコメントアウトしてある「/* 3 */」ってのを探してアイコンとテキスト表示のところをコメントアウトするか消しちゃって、代わりに FavoriteWidget() を追加するわ。

全部終わったら実行してみて。★アイコンをタップしてちゃんと動けばOKよ。