[Flutter][Cupertino Widget] DatePicker (기본설명포함)

•  

목차

• 플러터 디자인 시스템
  • Material Design System(구글, 안드로이드)
  • Cupertino Design System(애플, iOS)
• showCupertinoDialog()
  • 안녕하신가
• DatePicker를 활용한 사용방법

 

 

---

 

 

1. 플러터 디자인 시스템

플러터에서는 두 가지 디자인 시스템을 지원합니다. 두 디자인 시스템 모두 패키지이며 import 로 추가해야 사용할 수 있습니다.

 

구글 스타일의 디자인: Material Design System

import 'package:flutter/material.dart';

 

애플 스타일의 디자인: Cupertino Design System

import 'package:flutter/cupertino.dart';

 

 

 

---

 

 

 

2. showCupertinoDialog() 함수

Cupertino Dialog를 실행하는 함수입니다. Dialog는 대화, 상호작용의 뜻을 갖고 있으며 사용자와 대화하고 상호작용하는 의미를 갖습니다. 그래서 아래와 같은 UI 툴들 모두를 Dialog Box 라고 표현합니다.

 

 

특징

1. cupertino package 를 불러와야 사용할 수 있습니다.
2. iOS 스타일의 위젯, 동작방식, 애니메이션 등을 활용할 때 사용합니다.
3. 모든 showDialog() 형태의 함수들은 BuildContext를 반드시 입력해야 합니다.
4. 플러터에서 다이얼로그 위젯 외에 흐림처리가 된 부분을 barrier 라고 표현합니다. 이 부분을 클릭했을때 해당 dialog를 dismiss 할지를 선택할 수 있습니다.

 

 

 

 

---

 

 

 

 

DatePicker를 활용한 사용방법

 

 

 

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: CupertinoScreen(),
      ),
    );
  }
}

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

  @override
  State<CupertinoScreen> createState() => _CupertinoScreenState();
}

class _CupertinoScreenState extends State<CupertinoScreen> {
  DateTime selectedDate = DateTime.now();

  void onApplePressed() {
    showCupertinoDialog(
      // 플러터에서 다이얼로그 위젯 외에 흐림 처리가 된 부분을 barrier 라고 정의합니다.
      barrierDismissible: true,
      context: context,
      builder: (BuildContext context) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                // 40.0 까지는 아래가 자연스럽다.
                borderRadius: BorderRadius.circular(40.0)),
            height: 300.0,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (DateTime dateTime) {
                // setState() 에서는 함수를 비동기 처리하면 안됩니다.
                setState(() {
                  selectedDate = dateTime;
                });
              },
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: onApplePressed,
              icon: const Icon(
                Icons.apple,
              ),
              iconSize: 100.0,
            ),
            Text(
              selectedDate.toString(),
              style: const TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}