Flutterデモアプリをカスタマイズしてみよう⑥

概要

Flutterデモアプリを少しずつ弄っていってFlutterに慣れていくのが目的です

前回の記事はこちら

今回行うこと

• 文字の装飾(RichTextを使ってみる)
• インデント修正コマンド
• UI修正
• お気に入りボタンの実装

文字の装飾

まずはこちらのコードをご覧ください

    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'ボタンを押した回数は  ',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        Text(
          '  回',
        ),
      ],
    ),

これは画像の下のTextです
textを三つに分けて一つの文字列を表しています
またcounterによりボタンを押した回数の数字のフォントが変わっているのも分かります

これを今回やるRichTextを用いて実装していきます
それでは記述していきます

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    RichText( //以下RichTextの記述
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
      text: TextSpan(
        style: TextStyle(color: Colors.black),
        children: <TextSpan>[
          TextSpan(text: 'ボタンを押した回数は '),
          TextSpan(text: '$_counter',
　　　      style: Theme.of(context).textTheme.headline4),
          TextSpan(text: ' 回'),
        ],
      ),
    ),
],
),

解説です

まずTextStyleでRichText内の文字のフォントの色をblackに指定しています
これは指定しないと白色の文字になってしまうからです

TextSpanで各Textの装飾を行えます
今回はcounterのみ指定を行いました

textScaleFactor: MediaQuery.of(context).textScaleFactor
という一文は
ユーザー側の文字の大きさの設定を変更している時に必要な記述みたいです
詳しくはこちら↓
qiita.com

画面的な変化はありませんが
これで３つあったTextを一つにまとめられました！

インデント修正コマンド

ここまでで色々弄りながら記述しているので
かなりインデントが崩れています笑（個人的問題w）
そこでインデントの自動修正コマンドが便利なので紹介します
cmd + alt + l(Lキー)
でインデントを修正してくれます
崩れてきたなと思ったらこのコマンドを実行してみて下さい！

UIを修正

現在は画像の下にボタンを押した回数の文字と
ただのボタンが置いてあるだけなので
その辺のUIも修正していきます

まずは画像に対していいねが押された回数をTextに表示させる想定なので
Textの中身を変えていきます

TextSpan(text: 'ボタンを押した回数は '),

↓

TextSpan(text: 'いいね！された回数は '),

次にボタンを「いいね！ボタン」として分かりやすいように
RaisedButtonにアイコンをつけていいねボタンを表現します

RaisedButton.icon(
  icon: Icon(
    Icons.sentiment_satisfied_alt_outlined,
    color: Colors.white,
  ),
  label: Text('いいね！'), //childからlabelに変更
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  onPressed: _incrementCounter,
),

解説です
RaisedButtonにiconをつけて今回はニコちゃんマークのアイコンをつけました
colorはTextに合わせてwhiteに

childだったtextをlabelに変更しました

以下のようなボタンになりました

お気に入りボタン

次はお気に入りボタンを実装していきます
※今のところ、お気に入りされたデータの保存は出来ません。
あくまで「ボタンを押した時にボタンが変化する」実装のみになりますのでご了承ください。

今回はハートのアイコンに色を付けてお気に入りされたUIを実装していきます
イメージとしてはこんな感じ

まずboolean型というtrue（真）とfalse（偽）の2つの値から構成される
型の定義から行います
Widgetの外にboolean型を定義していきます

  bool favorite;

このfavoriteという値が使えるようになりました

次にFlatButtonにハートのアイコンを付けていきます

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

ここでfavoriteという値を用いて
アイコンが押されていればtrueが代入されるようになります

trueが代入されていれば色が赤いハートを表示し、
falseなら枠線のハートを表示し、色がgreyになる
という処理です。

onPressed: () {
  setState(() {
    if (favorite != true) {
      favorite = true;
    } else {
      favorite = false;
    }
  });
},

ここで上の処理の条件分岐をしています
setStateというのはカウントアップボタンにも実装されています
これにより読み込みの必要が無くハートのアイコンを変化させることが出来ます
参考にさせていただいた記事
qiita.com

これまでの実装で以下のような動作になりました

FlatButtonとRaisedButtonをRowで囲って横並びにしてみましょう

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    FlatButton(
      child: Icon(
        favorite == true ? Icons.favorite : Icons.favorite_border,
        color: favorite == true ? Colors.red : Colors.grey,
      ),
      onPressed: () {
        setState(() {
          if (favorite != true) {
            //ハートが押されたときにfavoriteにtrueを代入している
            favorite = true;
          } else {
            favorite = false;
          }
        });
      },
    ),
    RaisedButton.icon(
      icon: Icon(
        Icons.sentiment_satisfied_alt_outlined,
        color: Colors.white,
      ),
      label: Text('いいね！'),
      color: Colors.blue,
      textColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      onPressed: _incrementCounter,
    ),
  ],
),

これでボタンが横並びになりました！

まとめ

今回は文字の装飾、UIの修正、お気に入りボタンを実装してみました
特にお気に入りボタンの条件分岐など難しい記述が出てきました
私自身まだ理解していませんがDart言語の方も勉強していきたいと思います