Flutter 플러터 설정 화면 UI 간단 구현 setting ui

패키지 정보

settings_ui | Flutter Package

 

• 패키지 설치

flutter pub add settings_ui

 

• 코드 예시

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

bool vibration = false;

class ExamplePage extends StatefulWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: SettingsList(
        sections: [
          SettingsSection(
            title: Text(
              '공통',
            ),
            tiles: <SettingsTile>[
              SettingsTile.navigation(
                leading: Icon(Icons.language),
                title: Text('언어'),
                value: Text('한국어'),
                onPressed: ((context) {}),
              ),
              SettingsTile.switchTile(
                title: Text('진동'),
                initialValue: vibration,
                onToggle: (value) {
                  setState(() {
                    vibration = !vibration;
                  });
                },
                leading: Icon(Icons.vibration),
              ),
            ],
          ),
          SettingsSection(
            title: Text('계정'),
            tiles: <SettingsTile>[
              SettingsTile.navigation(
                leading: Icon(Icons.logout),
                title: Text('로그아웃'),
                onPressed: ((context) {}),
              ),
            ],
          ),
          SettingsSection(
            title: Text('기타'),
            tiles: <SettingsTile>[
              SettingsTile.navigation(
                leading: Icon(Icons.star),
                title: Text('앱 평가하기'),
                onPressed: ((context) {}),
              ),
            ],
          ),
        ],
      ),
    );
  }
}