【Flutter】メソッド内メソッドを使いこなそう初心者脱出編 1/8

【Flutter】メソッド内メソッドを使いこなそう　初心者脱出編 1/8

Dart

2022.08.20 2022.08.15

概要

どうも、@daiki1003です！

Flutter楽しんでますか？
僕は相変わらず楽しんでます笑

さて、皆様は自分が書くFlutterのコードに満足していますか？
満足している方はこのブログは読まなくても大丈夫だと思います笑
むしろ僕に教えてください！

満足していない方に向けて、本記事を含む以降8つの記事で初心者を脱するために重要と思っている要素を解説していきたいと思います！
段々とレベルも上がって行ってるんじゃないかなと思います。

このシリーズを全部マスターする頃にはFlutter中級者にはなっているかも？

それでは行ってみましょー！

メソッド内メソッドとは？

Dartでは、メソッド内にメソッドを定義することが出来ます。

void hoge() {
  void fuga() {

  }

  fuga(); // hoge内で定義したメソッドを呼び出す事が出来る
}

というコードが書けるということです。

どんなうまみがあるの？

Dartでは、Lexical Scopeと言って、今いるスコープより”外側”の変数にはすべてアクセスできます。

void hoge() {
  const a = 10;
  void fuga() {
    print(a); // コンパイル通る
  }

  fuga(); // 10が出力される
}

どうやって活用するの？

9割以上はbuildメソッド内で活用しています。
いや、10割かな笑

実際の活用方法

以下のコードを見てみましょう。

(注意： ref.watchが分からなくてもとりあえずなんらかの方法でmusicIdとvolumeを取得してるんだなーくらいの認識でOKです)

何らかの音楽を再生するサンプルコードなのですが、_playMusicの引数が
多くちょっとごちゃっとした印象を受けます。
またこの_playMusicからメソッドを呼びたい場合引数のバケツリレーになる可能性もありますね。

build内にplayMusicメソッドを定義してみよう

buildメソッドにplayMusicメソッドを定義してみます。

BuildContextやWidgetRefなど様々な要素がLexical Scopeでアクセス可能です。
playMusicメソッドの引数がなくなり、かなり見通し良くなりましたね！

コールバックがたくさんのウィジェット

ButtonやGestureDetector、ListTileなどユーザアクションのコールバックを持つウィジェットは多いですよね。
そんなウィジェットを複数個含んだウィジェットを構築する際に、すべてインラインで処理を記述してしまうとスタイリングのコードとアクションのコードが入り混ざってしまい
可読性の低下を招いてしまいます。

そんな時に、buildメソッド内にメソッドを定義してみてください。

かなり読みやすそうなコードではないでしょうか？