[Flutter] パッケージでモダンな設定画面を作成する

# settings_ui パッケージとは

`settings_ui` パッケージは、設定画面を構築するためのウィジェットを
提供してくれるパッケージです。

https://pub.dev/packages/settings_ui

このパッケージでは、以下のようなウィジェットが用意されています。

- **CustomSettingsSection**
カスタムの設定セクションを作成するためのクラスです。
`SettingsSection` ウィジェットを継承しており、
独自の設定セクションを作成することができます。

- **CustomSettingsTile**
カスタムの設定タイルを作成するためのクラスです。
`SettingsTile` ウィジェットを継承しており、
独自の設定タイルを作成することができます。

- **SettingsList**
設定画面全体を構築するためのメインウィジェットです。
`SettingsSection` を含むリストを表示します。

- **SettingsSection**
設定項目をグループ化するためのウィジェットです。
`SettingsTile` などの設定項目を含むことができます。

- **SettingsTheme**
設定画面のテーマを管理するためのクラスです。
色や書体などのスタイルを設定できます。

- **SettingsThemeData**
設定画面のテーマデータを保持するクラスです。
`SettingsTheme` クラスで使用されます。

- **SettingsTile**
設定項目を表すタイルウィジェットです。
スイッチ、ナビゲーションタイルなどの形式をとることができます。

これらのウィジェットを組み合わせることで、設定画面に必要な様々な機能を
実装することができます。以下はこのパッケージで作成できる設定画面です。

![スクリーンショット 0006-04-22 0.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/d49cd2e4-b139-58ba-d352-bb732b4208b1.png)

# 使用例

実際に `settings_ui` パッケージを使ってみましょう。
以下は、シンプルな設定画面を実装した例です。

```dart
import 'package:flutter/material.dart';
import 'package:settings_ui/settings_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Settings'),
        ),
        body: SettingsList(
          sections: [
            SettingsSection(
              title: const Text('Common'),
              tiles: <SettingsTile>[
                SettingsTile.navigation(
                  leading: const Icon(Icons.language),
                  title: const Text('Language'),
                  value: const Text('English'),
                  onPressed: (context) {
                   // 画面遷移処理
                  },
                ),
                SettingsTile.switchTile(
                  onToggle: (value) {
                   // トグル切り替え処理
                  },
                  initialValue: true,
                  leading: const Icon(Icons.format_paint),
                  title: const Text('Enable custom theme'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```

上記の例では、 `body` に `SettingsList` ウィジェットを配置しています。
`SettingsList` は設定画面を構築するためのメインウィジェットです。

`SettingsList` には `SettingsSection`を渡しています。
`SettingsSection` は設定項目をグループ化するためのウィジェットです。
ここでは"Common"という見出しを付けています。

`SettingsSection` には、 `SettingsTile` ウィジェットを配列として渡しています。
`SettingsTile` は設定項目を表すタイルウィジェットです。

最初の `SettingsTile` は `SettingsTile.navigation` を使用して作成されています。
これは、詳細設定画面に遷移するためのタイルです。
ここでは"Language"という項目で、値は"English"と表示されています。

2つ目の `SettingsTile` は `SettingsTile.switchTile` を使用して作成されています。
これは、オン/オフを切り替えるスイッチを持つタイルです。
ここでは"Enable custom theme"という項目で、初期値は `true` に設定されています。

`onToggle` はスイッチの値が変更された際に呼び出されるコールバック関数ですが、
ここでは空の関数を渡しています。

今回の例をFlutterで実装すると以下のようになります。

![スクリーンショット 0006-04-22 1.16.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/a109e670-93f5-5ef2-1a68-e388aa8a4d93.png)



# まとめ
`settings_ui` パッケージを使うことで、ネイティブ感のある設定画面を
簡単に実装することができます。必要な機能に応じてウィジェットを
組み合わせることで、様々な設定画面を作成できます。
Flutter で設定画面を作成する際は、是非このパッケージを活用してみてください。

# 参考資料

https://pub.dev/packages/settings_ui/example

https://zenn.dev/slowhand/articles/9a20a349d66e5f

https://qiita.com/yamauchihrt/items/c85b5b29fae758f4383c

# 告知
最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを
募集しております。詳しくは採用情報ページをご確認ください。

https://eda-inc.jp/recruit/

みなさまからのご応募をお待ちしております。