Flutter...3

황인호·2022년 12월 15일
0

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_2/screen/home_screen.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      // 기본 폰트를 이걸로 쓰겠다는뜻
      // 따로 폰트 지정되어있는 곳은 폰트 안먹음
      fontFamily: 'sunflower',
      textTheme: TextTheme(
        headline1: TextStyle(
          color: Colors.white,
          fontFamily: 'parisienne',
          fontSize: 80,
        ),
        headline2: TextStyle(
          color: Colors.white,
          fontSize: 50,
          fontWeight: FontWeight.w700,
        ),
        bodyText1: TextStyle(
          color: Colors.white,
          fontSize: 30,
        ),
        bodyText2: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    ),
    debugShowCheckedModeBanner: false,
    home: HomeScreen(),
  ));
}

home_screen.dart

// IOS 작업할때 불러오는 패키지
import 'package:flutter/cupertino.dart';
// 안드로이드 작업할떄 불러오는 패키지
import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate = DateTime(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink[100],
      body: SafeArea(
        // 아래부분에 SafeArea 를 적용하지 않겠다
        bottom: false,
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              // 아래의 class 함수를 만들고 여기서 호출
              _TopPart(
                selectedDate: selectedDate,
                onPressed: onHeartPressd,
              ),
              _BottomPart(),
            ],
          ),
        ),
      ),
    );
  }

  void onHeartPressd() {
    final DateTime now = DateTime.now();
    // dialog
    // builder 는 build의 함수이다.
    showCupertinoDialog(
      context: context,
      // 컨테이너 바깥부분을 클릭하면 닫히는 기능
      barrierDismissible: true,
      builder: (BuildContext context) {
        // 정렬하는 위젯
        return Align(
          // 가운데 아래부분을 쓰겠다는뜻
          alignment: Alignment.bottomCenter,
          child: Container(
            // flutter 특징
            // 어디에 정렬해야하는지 알수없느면 최대한으로 잡는다.
            color: Colors.white,
            height: 300,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              initialDateTime: selectedDate,
              // 최대 날짜 정해주기
              maximumDate: DateTime(
                now.year,
                now.month,
                now.day,
              ),
              // 무조건 넣어야함
              // 어떤 일이 일어났을때 바뀐다.
              // on 이 들어가면 무조건 함수이다.
              onDateTimeChanged: (DateTime date) {
                // date 는 달력을 통해서 선택한 날짜이다.
                // 정말로 날짜 선택이되는지 확인하고싶을때는 print(date);
                // 입력하면 바로 확인할 수 있다.
                setState(() {
                  selectedDate = date;
                });
              },
            ),
          ),
        );
      },
    );
  }
}

class _TopPart extends StatelessWidget {
  // State 안에서 관리할 변수는 여기에 입력한다.
  final DateTime selectedDate;
  final VoidCallback onPressed;

  _TopPart({required this.selectedDate, required this.onPressed, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 이렇게 하면 테마를 가져올 수 있다.
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    final size = MediaQuery.of(context).size;
    final now = DateTime.now();

    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'U&I',
            style: textTheme.headline1,
          ),
          // Text 와 날짜를 한곳에다가 넣기
          Column(
            children: [
              Text(
                '우리 처음 만난날',
                style: textTheme.bodyText1,
              ),
              Text(
                '${selectedDate.year}.${selectedDate.month}.${selectedDate.day}',
                style: textTheme.bodyText2,
              ),
            ],
          ),
          IconButton(
            iconSize: 60,
            onPressed: onPressed,
            icon: Icon(
              Icons.favorite,
              color: Colors.red[600],
            ),
          ),
          Text(
            'D + ${DateTime(
                  now.year,
                  now.month,
                  now.day,
                ).difference(selectedDate).inDays + 1}',
            style: textTheme.headline2,
          ),
        ],
      ),
    );
  }
}

// 사진
class _BottomPart extends StatelessWidget {
  const _BottomPart({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Image.asset(
        'asset/img/middle_image.png',
      ),
    );
  }
}
profile
성장중인 백엔드 개발자!!

0개의 댓글