CupertinoDatePicker

이 코드 조각은 Scaffold 위젯의 bottomNavigationBar 속성에 BottomAppBar을 배치하고 있습니다. BottomAppBar 안에는 CupertinoDatePicker가 들어가 있어요.

1. BottomAppBar: 이 위젯은 주로 화면 하단에 위치하는 앱 바입니다. 이 예제에서는 하단에 날짜를 선택할 수 있는 CupertinoDatePicker를 배치하고 있습니다.

2. SizedBox(height: 300,): 높이가 300인 박스를 만들어 CupertinoDatePicker의 크기를 제한합니다.

3. CupertinoDatePicker: iOS 스타일의 날짜 선택 위젯입니다. 여기서는 다음과 같은 속성들을 사용하고 있습니다.

   • maximumDate: initialDate: 최대로 선택할 수 있는 날짜를 지정합니다. initialDate로 지정되어 있으므로 현재 날짜가 최대입니다.
   • initialDateTime: initialDate: 처음 보여줄 날짜를 지정합니다. 여기서도 initialDate를 사용하고 있으니 현재 날짜가 초기값이 됩니다.
   • mode: CupertinoDatePickerMode.date: 날짜만 선택할 수 있도록 모드를 지정합니다. 시간은 선택할 수 없습니다.
   • onDateTimeChanged: _setTextFieldDate: 사용자가 날짜를 선택할 때 호출될 함수를 지정합니다. 날짜가 변경되면 _setTextFieldDate 함수가 호출됩니다.

이렇게 하면, 사용자가 CupertinoDatePicker를 사용하여 날짜를 선택하면, 선택한 날짜가 _setTextFieldDate 함수를 통해 텍스트 필드에 업데이트됩니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/widgets/form_button.dart';
import 'package:tiktok_clone/features/onboarding/interests_screen.dart';

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

  @override
  State<BirthdayScreen> createState() => _BirthdayScreenState();
}

class _BirthdayScreenState extends State<BirthdayScreen> {
  final TextEditingController _birthdayController = TextEditingController();

  DateTime initialDate = DateTime.now();
  DateTime minimumDate = DateTime.now().subtract(Duration(days: 365 * 14)); // 14세 이상만 선택 가능

  @override
  void initState() {
    super.initState();
    _setTextFieldDate(initialDate);
  }

  @override
  void dispose() {
    _birthdayController.dispose();
    super.dispose();
  }

  void _onNextTap() {
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(
        builder: (context) => const InterestsScreen(),
      ),
      (route) => false,
    );
  }

  void _setTextFieldDate(DateTime date) {
    final textDate = date.toString().split(" ").first;
    _birthdayController.value = TextEditingValue(text: textDate);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Sign up",
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: Sizes.size36,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Gaps.v40,
            const Text(
              "When's your birthday?",
              style: TextStyle(
                fontSize: Sizes.size24,
                fontWeight: FontWeight.w700,
              ),
            ),
            Gaps.v8,
            const Text(
              "Your birthday won't be shown publicly.",
              style: TextStyle(
                fontSize: Sizes.size16,
                color: Colors.black54,
              ),
            ),
            Gaps.v16,
            TextField(
              enabled: false,
              controller: _birthdayController,
              decoration: InputDecoration(
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
              ),
              cursorColor: Theme.of(context).primaryColor,
            ),
            Gaps.v28,
            GestureDetector(
              onTap: _onNextTap,
              child: const FormButton(disabled: false),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: SizedBox(
          height: 300,
          child: CupertinoDatePicker(
            maximumDate: maximumDate, // 현재 시각 기준 14세 이상만 선택 가능
            initialDateTime: maximumDate, // // 현재 시각 기준 14세 이상만 선택 가능
            mode: CupertinoDatePickerMode.date,
            onDateTimeChanged: _setTextFieldDate,
          ),
        ),
      ),
    );
  }
}