More than 3 years have passed since last update.

Flutterでの効率的なスタイリング方法 -スタイルを関数として定義する-

Posted at 2021-05-31

Flutterでスタイリングをするときは通常，毎回スタイリング内容を書かなければならない．

例えばこんな感じ

main.dart

Text(
  'Hey! How are you?',
  style: TextStyle(
    fontSize: 20,
    color: Colors.indigoAccent,
  ),
),

こんな感じでTextStyleを使って毎回どんなスタイリングにするのか宣言しないといけない．
でもこれって，同じスタイリング内容を何度も使うときはめんどくさいですよね．

そんなときはスタイリング内容を関数として定義して，何度も使えるようにしましょう．
具体的な定義方法は，

styles.dart

class Styles {
  static const h1 = TextStyle(
    fontSize: 16,
    color: Colors.indigoAccent,
  );
}

複数のファイルで使用できるようにするために，スタイリング内容を定義するためだけのファイル（例：styles.dartなど）を用意しておくとGoodです.そうすれば，ファイルをimportするだけで全ての定義したスタイルを使用することができます．

ではこの定義したスタイルをどうやって使うのかについて解説します．
具体例を見せるとこうです．

main.dart

Text(
  'Hey! How are you?',
  style: Styles.h1,
),

ずいぶんコード量が減りましたよね．
これが使えると，かなりコーデイングが楽になるので便利ですよ！