settings_ui パッケージとは
settings_ui パッケージは、設定画面を構築するためのウィジェットを
提供してくれるパッケージです。
このパッケージでは、以下のようなウィジェットが用意されています。
-
CustomSettingsSection
カスタムの設定セクションを作成するためのクラスです。
SettingsSectionウィジェットを継承しており、
独自の設定セクションを作成することができます。 -
CustomSettingsTile
カスタムの設定タイルを作成するためのクラスです。
SettingsTileウィジェットを継承しており、
独自の設定タイルを作成することができます。 -
SettingsList
設定画面全体を構築するためのメインウィジェットです。
SettingsSectionを含むリストを表示します。 -
SettingsSection
設定項目をグループ化するためのウィジェットです。
SettingsTileなどの設定項目を含むことができます。 -
SettingsTheme
設定画面のテーマを管理するためのクラスです。
色や書体などのスタイルを設定できます。 -
SettingsThemeData
設定画面のテーマデータを保持するクラスです。
SettingsThemeクラスで使用されます。 -
SettingsTile
設定項目を表すタイルウィジェットです。
スイッチ、ナビゲーションタイルなどの形式をとることができます。
これらのウィジェットを組み合わせることで、設定画面に必要な様々な機能を
実装することができます。以下はこのパッケージで作成できる設定画面です。
使用例
実際に settings_ui パッケージを使ってみましょう。
以下は、シンプルな設定画面を実装した例です。
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で実装すると以下のようになります。
まとめ
settings_ui パッケージを使うことで、ネイティブ感のある設定画面を
簡単に実装することができます。必要な機能に応じてウィジェットを
組み合わせることで、様々な設定画面を作成できます。
Flutter で設定画面を作成する際は、是非このパッケージを活用してみてください。
参考資料
告知
最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを
募集しております。詳しくは採用情報ページをご確認ください。
みなさまからのご応募をお待ちしております。