5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flutterで設定画面を実装してみた

Posted at

はじめに

Flutterで設定画面を実装することになり自前で作ろうかと思っていた矢先、
ググったら良さげなパッケージがあったので、使ってみたら設定画面が楽に実装できました。

本記事で実際にできる画面がこちら。
Android、iOSでUIがよしなに変わってくれるのも嬉しいところ。

Android iOS
Screenshot_1639098059.png   Simulator Screen Shot - iPhone 12 Pro Max - 2021-12-10 at 10.56.10.png 

では、早速実装していきます。

設定画面実装

pubspec.yamlにsettings_uiを追加

pubspec.yaml
dependencies:
  settings_ui: ^1.0.0

利用できるWidgetについては以下の4つで、これらを組み合わせて設定画面を作っていきます。

  • SettingsList
  • SettingsSection
  • SettingsTile
  • CustomSection

まずは、ScaffoldのbodyにSettingsListを配置します。

setting_view.dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings UI')),
      body: SettingsList( 
        sections: [
          // SettingsSectionを並べていく。
        ],
      )
    );
  }

次に、SettingsListのsectionsに、以下3つのwidgetを配置していきます。

  • SettingsSection → 設定の種別ごとに配置、tilesにSettingsTileかCustomSectionを配置
  • SettingsTile → 設定項目
  • CustomSection → 説明文が必要な場合や、スライダーなどを実装したい際に配置
setting_view.dart
        sections: [
          SettingsSection(
            title: 'Common',
            tiles: [
              SettingsTile(
                title: 'Language',
                subtitle: 'English',
                leading: Icon(Icons.language),
                onPressed: (context) {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => LanguagesScreen(),
                  ));
                },
              ),
              CustomTile(
                child: Container(
                  color: Color(0xFFEFEFF4),
                  padding: EdgeInsetsDirectional.only(
                    start: 14,
                    top: 12,
                    bottom: 30,
                    end: 14,
                  ),
                  child: Text(
                    'You can setup the language you want',
                    style: TextStyle(
                      color: Colors.grey.shade700,
                      fontWeight: FontWeight.w400,
                      fontSize: 13.5,
                      letterSpacing: -0.5,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      )

SettingsTileのonPressedで次の画面へ遷移し、
LanguageであればEnglish、Japaneseなどを言語を選択するLanguage選択画面を実装します。

Language選択画面は、同じようにSettingsList > SettingsSection > SettingsTileを順に配置し、
SettingsTileのonPressedで、SharedPreferencesを使って選択された値を保存するだけです。

これで設定画面のUIと機能が実装できました。

採用に関して

弊社では、現在、エンジニアを募集しております。
物流に興味・関心がある方はもちろん、
Flutterやモバイル開発に強みがある方、心よりお待ちしております!

5
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?