Flutterのお気に入り機能(見た目だけ)

はじめに

FlatButtonでお気に入り機能を実装します。
初期は、枠線だけのハートが表示されていて、押すと赤くなり、もう一度押すと枠線だけのハートに戻るという機能です。
今回は外見だけの説明で中身の実装は後々書きます。

コード全体

main.dart

bool favorite;
FlatButton(
   child: Icon(
      favorite == true ? Icons.favorite : Icons.favorite_border,
      color: favorite == true ? Colors.red : Colors.black38,
     ),
   onPressed: () {
      setState(() {
         if (favorite != true) {
       //ハートが押されたときにfavoriteにtrueを代入している
           favorite = true;
         } else {
           favorite = false;
         }
       });
     },
   ),

コードの詳細説明

main.dart

//ハートを押したかどうかを判定するためにある
bool favorite;

FlatButton(
   child: Icon(
      favorite == true ? Icons.favorite : Icons.favorite_border,
      color: favorite == true ? Colors.red : Colors.black38,
     ),

ここでは、赤いハートか枠線だけのハートのどちらを表示するかを決め、表示しています。ハートが押されていればfavoriteにtrueが代入されています。

【favorite == true ? Icons.favorite : Icons.favorite_border】

ここでは、favoriteにtrueが代入されていれば赤いハートを表示し、そうでなければ枠線のハートを表示するという処理です。

【color: favorite == true ? Colors.red : Colors.black38】

ここでは色の設定。

main.dart

onPressed: () {
      setState(() {
         if (favorite != true) {
       //ハートが押されたときにfavoriteにtrueを代入している
           favorite = true;
         } else {
           favorite = false;
         }
       });
     },
   ),

ここでは、ハートボタンが押されたときにfavoriteにtrueかfalseを代入する処理と変更があったことを伝える処理が行われています。

【setState】

setStateで変更があったことを伝えています。これがないとハートボタンを押しても再度読込しないと押されたことが反映されません。

その下のif文では、赤いハートであればfavoriteにfalseを代入。枠線のハートであればfavoriteにtrueを代入しています。

このtrueとfalseの変更で今どちらのボタンを表示すべきか判断できるようにしています。