SwitchListTile

import 'package:flutter/material.dart';

class SettingsScreen extends StatefulWidget {
  const SettingsScreen({super.key});

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  bool _notifications = false;

  void _onNotificationsChanged(bool? newValue) {
    if (newValue == null) return;
    setState(() {
      _notifications = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: ListView(
        children: [
          SwitchListTile.adaptive(
            value: _notifications,
            onChanged: _onNotificationsChanged,
            title: const Text("Enable notifications"),
            subtitle: const Text("Enable notifications"),
          ),
          CheckboxListTile(
            activeColor: Colors.black,
            value: _notifications,
            onChanged: _onNotificationsChanged,
            title: const Text("Enable notifications"),
          ),
          ListTile(
            onTap: () async {
              final date = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(1980),
                lastDate: DateTime(2030),
              );
              print(date);
              final time = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
              print(time);
              final booking = await showDateRangePicker(
                context: context,
                firstDate: DateTime(1980),
                lastDate: DateTime(2030),
                builder: (context, child) {
                  return Theme(
                    data: ThemeData(
                        appBarTheme: const AppBarTheme(
                            foregroundColor: Colors.white,
                            backgroundColor: Colors.black)),
                    child: child!,
                  );
                },
              );
              print(booking);
            },
            title: const Text("What is your birthday?"),
          ),
          const AboutListTile(),
        ],
      ),
    );
  }
}

이 코드는 사용자의 설정 화면을 나타내는 SettingsScreen이라는 StatefulWidget을 정의합니다. 해당 화면에는 다양한 위젯들이 포함되어 있습니다:

1. SwitchListTile.adaptive: 사용자에게 노티피케이션 활성화/비활성화를 위한 스위치 토글을 제공하는 위젯입니다. "adaptive"는 플랫폼에 따라 (iOS/Android) 해당 플랫폼에 맞는 스위치 스타일로 표시하라는 의미입니다. _notifications 변수는 현재 스위치의 상태 (켜짐/꺼짐)를 저장합니다.

2. CheckboxListTile: 노티피케이션 활성화/비활성화를 위한 체크박스를 제공하는 위젯입니다. 체크박스의 값도 _notifications 변수를 사용하여 관리됩니다.

3. ListTile: 사용자의 생일을 입력받기 위한 항목입니다. 이 항목을 탭하면 연속적으로 3가지 위젯이 표시됩니다:

   • showDatePicker: 날짜 선택 위젯
   • showTimePicker: 시간 선택 위젯
   • showDateRangePicker: 날짜 범위 선택 위젯. 테마가 커스터마이징 되어 있습니다. 여기서는 앱 바의 전경색을 흰색으로, 배경색을 검은색으로 설정하였습니다.

4. AboutListTile: Flutter의 기본 위젯으로, 앱 정보를 보여주는 대화상자를 표시합니다.

이 위젯들은 ListView의 자식들로써 세로로 나열되어 있습니다.

또한, _onNotificationsChanged 함수는 스위치와 체크박스의 값이 변경될 때 호출되며, 해당 값을 _notifications 변수에 업데이트합니다. setState를 사용하여 상태를 업데이트하므로, 변경될 때마다 위젯이 다시 빌드됩니다.

이 화면을 실행하면, "Settings"라는 제목의 앱 바와 함께 여러 설정 항목들이 나열된 화면을 볼 수 있습니다.

SwitchListTile은 Flutter에서 제공하는 위젯으로, 스위치(switch)와 리스트 타일(list tile)을 결합한 형태입니다. 이 위젯은 설정 화면에서 옵션을 켜고 끄는 기능을 사용자에게 제공할 때 흔히 사용됩니다. SwitchListTile은 타이틀(title), 부제목(subtitle), 아이콘(leading), 스위치(on/off) 등을 포함할 수 있으며, 사용자가 위젯을 탭하면 스위치의 상태가 토글(toggle)됩니다.

주요 속성:

• value: 스위치의 현재 상태를 나타내며, true 또는 false 값을 가집니다.
• onChanged: 스위치의 상태가 변경될 때 호출되는 콜백 함수입니다. 이 함수는 스위치의 새로운 상태를 인자로 받습니다.
• title: 리스트 타일의 주요 텍스트를 설정합니다.
• subtitle: 리스트 타일의 부가적인 텍스트를 설정합니다.
• secondary: 리스트 타일의 앞쪽에 표시되는 위젯(예: 아이콘)입니다.
• activeColor: 스위치가 켜져 있을 때 스위치의 색상을 설정합니다.
• inactiveThumbColor: 스위치가 꺼져 있을 때의 색상을 설정합니다.
• inactiveTrackColor: 스위치가 꺼져 있을 때의 트랙 색상을 설정합니다.

예시 코드:

class MySettingsScreen extends StatefulWidget {
  @override
  _MySettingsScreenState createState() => _MySettingsScreenState();
}

class _MySettingsScreenState extends State<MySettingsScreen> {
  bool _isNotificationsEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: ListView(
        children: [
          SwitchListTile(
            title: Text("Enable Notifications"),
            subtitle: Text("Receive notifications for new messages."),
            value: _isNotificationsEnabled,
            onChanged: (bool newValue) {
              setState(() {
                _isNotificationsEnabled = newValue;
              });
            },
            secondary: Icon(Icons.notifications_active),
          ),
          // 추가 설정 옵션들...
        ],
      ),
    );
  }
}

이 예시에서는 사용자가 알림을 활성화하거나 비활성화할 수 있는 SwitchListTile을 설정 화면에 추가합니다. value 속성은 알림이 현재 활성화되어 있는지 여부를 나타내며, 사용자가 스위치를 토글할 때마다 onChanged 콜백이 호출되어 상태가 업데이트됩니다.

SwitchListTile을 사용함으로써, 스위치와 관련된 텍스트 및 옵셔널한 아이콘을 포함한 인터랙티브한 리스트 아이템을 쉽게 구성할 수 있으며, 사용자에게 직관적인 UI를 제공할 수 있습니다.