【Flutter】 Skeleton テンプレート徹底解説

Flutterの Skeleton テンプレート、難しくてよくわからないんだよなぁ

カウンターアプリよりもっと本格的なアプリを実装してみたいわ！

そんなあなたに、本記事ではFlutterのテンプレートアプリである
Skeleton テンプレートについて、徹底解説します。

作成方法から、主要な機能に至るまで詳細に解説していきます。

読めばFlutter力がレベルアップすること間違いなしです！

それでは、お楽しみください！

Skeleton テンプレートとは
1. 概要
2. 作成方法
Skeleton テンプレートの機能
まとめ
編集後記（2022/03/16）

Skeleton テンプレートとは

概要

Skeletonテンプレートとは、Flutter v2.5によって追加されたFlutterのテンプレートです。
リストビューとアイテムの詳細ページ、設定ページが用意されています。

設定ページでテーマを選択することで、アプリ全体をダークモードにすることが可能です。

作成方法

Skeleton テンプレートの利用方法を解説します。

Skeleton テンプレートを利用するにはコマンドラインからの実行が必要です。

Flutterプロジェクトを作成したいディレクトリに移動し、
以下のコマンドを実行します。

flutter create -t skeleton ファイル名

ファイル名を仮にskeleton_sampleとするなら、

flutter create -t skeleton skeleton_sample

となります。

作成は以上で完了です。

Flutter関連部分は以下のようなフォルダ構成でテンプレートが作成されているはずです。

最初はコマンドラインからのアプリ作成は慣れないかもしれませんが、
慣れてしまえばとても簡単に作成できます。

Skeleton テンプレートの機能

Skeletonテンプレートで実装されたアプリが持つ機能を3つ紹介し、
その実装コードについて詳しく解説していきます。

Skeletonテンプレートで実装されたアプリが持つ機能は主に以下の３つです。

画面遷移
多言語化対応
テーマ変更

それぞれ解説していきます。

画面遷移

一つ目の機能は画面遷移です。

『リストページからアイテムをタップすることで詳細ページに移動する』
『リストページから右上の歯車アイコンをタップすることで設定ページに移動する』

などの画面遷移が実装されています。

実装部分のコードについてみていきましょう。

app.dart 65 ~ 80行目

          //1
          onGenerateRoute: (RouteSettings routeSettings) {
            return MaterialPageRoute<void>(
              settings: routeSettings,
              //2
              builder: (BuildContext context) {
                switch (routeSettings.name) {
                  case SettingsView.routeName:
                    return SettingsView(controller: settingsController);
                  case SampleItemDetailsView.routeName:
                    return const SampleItemDetailsView();
                  case SampleItemListView.routeName:
                  default:
                    return const SampleItemListView();
                }
              },
            );
          },

//1
MaterialApp のonGeneratedRoute を設定することで、
Webでアプリを立ち上げた際、ブラウザのアドレスバーによる画面遷移が可能となります。

//2
画面遷移時に与えられるrouteSettingのname変数の値によって遷移先を分岐しています。
このアプリでは画面ごとにrouteNameを定数で持っており、
routeSettingのname変数がViewのrouteNameと同じならそのViewに移動する、
というロジックとなっています。
例えば、routeSettingのname変数が'/sample_item'なら、
routeNameとして'/sample_item'を持っているSampleDetailsViewに移動する、
という画面遷移です。
まとめると、以下になります。

各画面にrouteNameの定数を用意すること
MaterialPageRouteのbuilder内でrouteSetting.nameでswitchの条件分岐を行い、
routeNameと一致したらその画面をreturnすること

routeSettingが目に現れてこないのでわかりずらいですが、
アドレスバーによる画面遷移を実装するときの参考になるかと思います。
ぜひチャレンジしてみてください。

多言語化対応

Skeletonテンプレートのアプリでは多言語対応をすぐにできるよう、準備がされています。

テンプレートのデフォルトでは英語対応しかしていないため、
ここでは日本語を追加してみましょう。

まず、app.dart 44~46行目、supportedLocalesにLocale('ja','')を追加しましょう。

          supportedLocales: const [
            Locale('en', ''), // English, no country code
            Locale('ja',''),
          ],

lib/src/loalizationフォルダにapp_ja.arbファイルを追加し、
以下を書き込みましょう。

{
    "appTitle": "skeleton サンプル"
}

コマンドラインで以下のコマンドを実行しましょう。

flutter gen-l10n

設定は以上となります。簡単ですね。

今回設定した内容がどこに反映されるかというと、アプリのタイトルです。

app.dart 53~54行目

          onGenerateTitle: (BuildContext context) =>
              AppLocalizations.of(context)!.appTitle,

アプリをchromeで開いてみてください。
chromeのタブ部分のアプリタイトルが「skeletonサンプル」と日本語に変わっていれば成功です。

chromeの設定→詳細設定→言語で言語を英語に変えると、「skeleton_sample」と英語になるのが確認できます。

このようにSkeletonテンプレートを使うと簡単に日本語、英語対応ができます。

ゼロからの実装方法については下記記事にて解説しています。

カウンターアプリを多言語対応してみた - Qiita

2022/1/14こちらの記事、さくしんさんの記事と内容モロに被っていました、、、ほぼ同内容ですので、合わせてぜひ読んでみてください。…

テーマ変更

Skeleton テンプレートで一番驚くのが、概要でも説明したテーマ変更だと思います。
ここではテーマ変更のコードについてポイントを解説していきます。

このテーマ変更で重要になってくるのは、SettingsControllerです。
このSettingsControllerがテーマを保持していて、
このテーマに応じてアプリを変更しています。
このアプリでSettingsControllerを一つだけ使うため、
main関数内で生成し、MyApp,SettingsViewに受け渡しています。

main.dart 7~ 20行目

void main() async {
  // Set up the SettingsController, which will glue user settings to multiple
  // Flutter Widgets.
  final settingsController = SettingsController(SettingsService());

  // Load the user's preferred theme while the splash screen is displayed.
  // This prevents a sudden theme change when the app is first displayed.
  await settingsController.loadSettings();

  // Run the app and pass in the SettingsController. The app listens to the
  // SettingsController for changes, then passes it further down to the
  // SettingsView.
  runApp(MyApp(settingsController: settingsController));
}

app.dart 61行目

          themeMode: settingsController.themeMode,

app.dart 70~71行目

                  case SettingsView.routeName:
                    return SettingsView(controller: settingsController);

AnimatedBuilderはSettingControllerの変化をチェックしています。
変更を検知すると、子をリビルドします。

app.dart 25~28行目

    return AnimatedBuilder(
      animation: settingsController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(

SettingViewにてテーマの変更をすると、
settingController.updateThemeModeメソッドが走ります。
SettingControllerはChangeNotifierを継承しているため、
このメソッドの中でnotifyListnersを行うことで、
このインスタンスに変化があったことを、周知することができます。

settings_controller.dart 34~44行目

  Future<void> updateThemeMode(ThemeMode? newThemeMode) async {
    if (newThemeMode == null) return;

    // Do not perform any work if new and old ThemeMode are identical
    if (newThemeMode == _themeMode) return;

    // Otherwise, store the new ThemeMode in memory
    _themeMode = newThemeMode;

    // Important! Inform listeners a change has occurred.
    notifyListeners();

これによりAnimatedBuilderが変更を検知し、リビルドしてテーマの変更を反映する
というのが、テーマ変更の流れです。

まとめると、以下の図のようになります。