Flutterアプリ開発も初めてですが、Qiitaも初投稿です。

早いもので、この業界に入って約３０年。とはいえ、最近は自分一人でアプリを作る事も無かったんですが、社内のイベントがあるとの事で参加を表明。約１０年ぶり？（もっとか？）に新規アプリをこっそり自分一人で作っています。今回使う言語(Flutter)も含め、色々と初めてという事でお見苦しい点が色々あると思いますがお許しください。

という訳で、最近の潮流と言うか、お作法とかさっぱり知らない中でのプログラミングに悪戦苦闘しながら進めていますが、ちょっと動くようになってきたので内容は薄いですがメモに残してみました。

何度も使いそうなスタイルとかはまとめて書いた

当然と言われるとそうなのでしょうが、まずFlutterではWidgetを組み合わせて画面を作成するのですが、その中で使用する文字とかもいちいち色がどうとかサイズがどうとかをツリー構造で書いていくのでネストがえらい事になって来る。私のようなおじいちゃんの老眼では正直見えない！解らん！となるので、昔で言う関数のような書き方で部品として使えるようにしてみました。

ボタン上に表示するテキストで使う時用のスタイル定義


  final btnTextStyle = TextStyle(
      fontSize: 36.0,
      fontWeight: FontWeight.bold,
  );

初めて見る人でも何となくイメージは解ると思いますが、これは部品の名前をbtnTextStyle とし、TextStyleとしてフォントサイズは36.0、fontWeightはboldというコンスタント値にしています。例えば、２個以上のボタンがある時にスタイルを揃えて定義するとかに使えます。

実際にボタンWidgetでスタイルを使ってみる


  Widget _damageButton(damage) {
      return RaisedButton(
          padding: EdgeInsets.only(left: 0.0, top: 30.0,
                                   right: 0.0, bottom: 30.0),
          color: Colors.black,
          shape: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
          ),
          onPressed: () => calculate(damage),   // 押されたボタンに応じたダメージ計算処理
          child:ShaderMask(       // 炎っぽく表示してみる
              blendMode: BlendMode.srcATop,
              shaderCallback: (bounds) {
                  return RadialGradient(
                      center: Alignment.topLeft,
                      radius: 1.0,
                      colors: [Colors.yellow,
                               Colors.deepOrange.shade900],
                      tileMode: TileMode.repeated
                  ).createShader(bounds);
              },
              child: Text(
                  "$damage",
                  style: btnTextStyle,
              ),
          ),
      );
  }

コードが長いですが、今回の記事とはほとんど関係無いので詳細は省きます。試行錯誤中なので不要なコードもあるかも知れません。

一番下の行でstyle: btnTextStyle,を使っている所が先ほどのスタイルを定義したところです。こんな感じでちょっとした事でもネストして書いていくので可読性がすぐに下がって来ますので、こまめに部品化して外に出して行かないといけないのかなと勝手に思っています。

ShaderMaskの部分だけちょっと解説

child:ShaderMaskのあたり、ぶっちゃけ機能には全く関係ないのではありますが、作っていると装飾するのが楽しくなってどんどんコードを書いていくので注意が必要です（笑）
この炎っぽいテキストはサンプルだとblendMode: BlendMode.srcATopが無かったのですが、これ書かないとうまく表示されませんでした。

さきほどのボタンを３つ横に並べるウィジェット


  Widget _buttonArea(damage1, damage2, damage3) {
      return Container(
          margin: const EdgeInsets.fromLTRB(1.0, 1.0, 1.0, 1.0),
          child: Row(
              children: <Widget>[
                  Expanded(child: _damageButton(damage1)),
                  Expanded(child: _damageButton(damage2)),
                  Expanded(child: _damageButton(damage3)),
              ]
          ),
      );
  }

次に、先ほどのボタンを更に部品として使い、ボタンを３つ横に並べたウィジェットを書いてみます。ボタンを部品化したのですっきり書けました。

こんな感じでどんどん組み合わせたウィジェットを書いて、最後に一番親となるウィジェットを書くとアプリが完成します。

最後に

覚える事も多いですが、やっぱりプログラミングは楽しいですね。
今後もできればプログラミングを続けて行きたいな～。

50歳を超えてFlutterアプリ開発に挑戦