Flutterのトップ10のクイックヒント・トリック・テクニック

Flutter開発をより効率的にするための便利なテクニックを紹介します！

1. Hot Reload を最大限に活用する

ctrl + s（Macなら cmd + s）で即座に変更を反映！レイアウト調整やUIの微調整が素早く行えます。

2. const を活用してパフォーマンス向上

再描画を減らすために、可能な限り const を使いましょう。特に Text や Container などのウィジェットで有効です。

const Text(‘こんにちは Flutter!’);

3. Expanded と Flexible でレスポンシブデザイン

Row や Column 内でウィジェットのスペースを調整するのに便利！

Row(
  children: [
    Expanded(child: Container(color: Colors.blue)),
    Expanded(child: Container(color: Colors.red)),
  ],
)

4. MediaQuery でデバイスサイズを取得

デバイスごとの画面サイズに適応するレイアウトを作成できます。

double width = MediaQuery.of(context).size.width;

5. FutureBuilder を使って非同期データを処理

API通信やデータベースの取得時に役立ちます。

FutureBuilder<String>(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('エラー: ${snapshot.error}');
    } else {
      return Text(snapshot.data ?? 'データなし');
    }
  },
)

6. カスタムフォントを簡単に設定

pubspec.yaml にフォントを追加し、プロジェクト内で適用できます。

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: fonts/MyFont-Regular.ttf

Text('カスタムフォント', style: TextStyle(fontFamily: 'MyFont'));

7. go_router でスムーズな画面遷移

Navigator よりも go_router を使うと管理が楽になります。

GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => HomeScreen()),
    GoRoute(path: '/detail', builder: (context, state) => DetailScreen()),
  ],
)

8. ValueNotifire で簡単な状態管理

小規模な状態管理ならValueNotifierを使うと便利！

final counter = ValueNotifier<int>(0);

ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) {
    return Text('カウント: $value');
  },
);

9. Intl パッケージで日付や数値のフォーマット

ローカライズや通貨の表示に便利！

import 'package:intl/intl.dart';

String formattedDate = DateFormat('yyyy/MM/dd').format(DateTime.now());

10. アニメーションを簡単に追加 (AnimatedContainer)

アニメーションを簡単に適用できます。

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: Colors.blue,
  width: isExpanded ? 200 : 100,
  height: 100,
);

---

これらのテクニックを活用して、Flutter開発をもっとスムーズにしましょう！💙