깡샘의 플러터&다트 프로그래밍 12-4

알림 창 - AlertDialog

다이얼로그를 띄우려면 AlertDialog 사용

• showDialog( ) 호출 -> builder 속성에 지정한 함수에서 AlertDialog 객체 반환

  • showDialog() - barrierDismissible 은 다이얼로그 바깥을 터치했을 때 닫히는 여부 결정(true는 닫히고 false는 안 닫힌다)

• AlertDialog는 title과 content, actions 속성 설정

  • title: 상단에 출력할 문자열
  • content: 본문
  • actions: 하단에 나열할 버튼
    • 버튼을 눌러 다이얼로그가 닫히게 하기 -> Navigator.of(context).pop()

---

보텀 시트 - BottomSheet

보텀 시트는 화면 아래쪽에서 올라오는 다이얼로그

• showBottomSheet( ) 나 showModalBottomSheet( ) 사용
  • showBottomSheet( ) 은 보텀 시트가 떠도 원래 화면에서 작업 가능
  • showModalBottomSheet( ) 은 보텀 시트가 뜨면 원래 화면 작업 불가능
• ListTile 을 사용하여 보텀 시트 구성
  • ListTile 을 클릭하면 Navigator.of(context).pop() 을 호출해 보텀 시트를 닫는다.
    • ListTitle은 항목을 구성하는 위젯이다.
    • title: 가운데 오는 위젯
    • leading: 왼쪽에 오는 위젯
    • subtitle: title 아래 오는 위젯
    • trailing: title 뒤에 오는 위젯으로 오른쪽에 위치

---

날짜, 시간 선택 창 - DatePickerDialog, TimePickerDialog

사용자에게 날짜와 시간을 입력받는 위젯

• DatePickerDialog는 showDatePicker( ) 함수 사용

  • showDatePicker( ) 함수의 initialDate 매개변수에 달력의 초기 날짜 설정 가능, firstDate와 lastDate는 날짜 범위 지정
  • DatePickerDialog는 사용자가 원하는 날짜를 출력하고자 intl 라는 패키지 사용
    • pubspec.yaml 파일에 intl 패키지 등록 후

      dependencies:
          intl: ^0.17.0

• TimePickerDialog는 showTimePicker( ) 함수 사용

  • showTimePicker( ) 함수의 initialTime 매개변수에 초기 출력될 시간 지정

---

다이얼로그 활용하기

import 'package:flutter/material.dart';

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

class ch12_4 extends StatelessWidget {
  const ch12_4({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Practice'),
        ),
        body: const TestScreen(),
      ),
    );
  }
}

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

  @override
  TextState createState() => TextState();
}

class TextState extends State<TestScreen> {
  DateTime datevalue = DateTime.now();
  TimeOfDay timeValue = TimeOfDay.now();

  void showMyDialog() {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('Dialog Title'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: '이 부분에 입력해주세요',
                  ),
                ),
                Row(
                  children: [
                    Checkbox(
                      value: true,
                      onChanged: (value) {},
                    ),
                    const Text(
                      '수신동의',
                    ),
                  ],
                ),
              ],
            ),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text(
                  'OK',
                ),
              ),
            ],
          );
        });
  }

  void BottomSheet() {
    showBottomSheet(
        backgroundColor: Colors.yellow,
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                    leading: const Icon(Icons.add),
                    title: const Text(
                      'ADD',
                    ),
                    onTap: () {
                      Navigator.of(context).pop();
                    }),
                ListTile(
                    leading: const Icon(Icons.remove),
                    title: const Text('REMOVE'),
                    onTap: () {
                      Navigator.of(context).pop();
                    }),
              ],
            ),
          );
        });
  }

  void MoDalBottomSheet() {
    showModalBottomSheet(
        backgroundColor: Colors.yellow,
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                    leading: const Icon(Icons.add),
                    title: const Text(
                      'ADD',
                    ),
                    onTap: () {
                      Navigator.of(context).pop();
                    }),
                ListTile(
                    leading: const Icon(Icons.remove),
                    title: const Text('REMOVE'),
                    onTap: () {
                      Navigator.of(context).pop();
                    }),
              ],
            ),
          );
        });
  }

  Future DatePicker() async {
    DateTime? picked = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2000),
        lastDate: DateTime(2030),
        builder: (BuildContext context, Widget? child) {
          return child != null
              ? Theme(data: ThemeData.dark(), child: child)
              : const SizedBox();
        });
    if (picked != null) {
      setState(() => datevalue = picked);
    }
  }

  Future TimePicker() async {
    TimeOfDay? selectedTime =
        await showTimePicker(context: context, initialTime: TimeOfDay.now());
    if (selectedTime != null) {
      setState(() => timeValue = selectedTime);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: showMyDialog,
            child: const Text(
              'dialog',
            ),
          ),
          ElevatedButton(
            onPressed: BottomSheet,
            child: const Text(
              'bottomsheet',
            ),
          ),
          ElevatedButton(
            onPressed: MoDalBottomSheet,
            child: const Text(
              'modalbottomsheet',
            ),
          ),
          ElevatedButton(
            onPressed: DatePicker,
            child: const Text(
              'DatePicker',
            ),
          ),
          ElevatedButton(
            onPressed: TimePicker,
            child: const Text(
              'TimePicker',
            ),
          ),
        ],
      ),
    );
  }
}