0130_코드팩토리 플러터 프로그래밍 cpt10

상태 관리 및 쿠퍼티노 위젯 함수

상태관리는 setState함수를 사용한다. 상태가 변경되면 UI도 같이 변경할 수 있다.

쿠퍼티노 위젯함수: iOS스타일의 다이얼로그를 실행하는 함수

​

전체코드

main.dart

import 'package:flutter/material.dart';
import 'package:u_and_i/screen/HomeScreen.dart';

void main() {
runApp(
MaterialApp(
theme: ThemeData(
fontFamily: 'sunflower',
textTheme: TextTheme(
displayLarge: TextStyle(
color: Colors.white,
fontSize: 80.0,
fontWeight: FontWeight.w700,
fontFamily: 'parisiennne',
),
displayMedium: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
bodyLarge: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
bodyMedium: TextStyle(
color: Colors.white,
fontSize: 20.0,
)
),
),
home: HomeScreen(),
),
);
}
home_screen.dart

import 'dart:html';

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

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

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

class \_HomeScreenState extends State<HomeScreen> {
DateTime firstDay = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[100],
body: SafeArea(
top: true,
bottom: false,
child: Column(
// 위아래 끝에 위젯 배치
mainAxisAlignment: MainAxisAlignment.spaceBetween,

          // 반대축 최대크기로 늘이기
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _DDay(
              onHeartPressed: onHeartPressed,
              firstDay: firstDay,
            ),
            _CoupleImage(),
          ],
        ),
      ),
    );

}

void onHeartPressed() {
showCupertinoDialog(
context: context,
builder: (BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: 300,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
onDateTimeChanged: (DateTime date) {
setState(() {
firstDay = date;
});
},
),
),
);
},
barrierDismissible: true,
);
}
}

class \_DDay extends StatelessWidget {
final GestureTapCallback onHeartPressed;
final DateTime firstDay;

\_DDay({
required this.onHeartPressed,
required this.firstDay,
});

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
final now = DateTime.now();

    return Column(
      children: [
        const SizedBox(height: 16.0),
        Text('U&I', style: textTheme.displayLarge,),
        const SizedBox(height: 16.0),
        Text('우리 처음 만난 날', style: textTheme.bodyLarge,),
        Text('${firstDay.year}.${firstDay.month}.${firstDay.day}', style: textTheme.bodyMedium,),
        const SizedBox(height: 16.0),
        IconButton(
          iconSize: 60.0,
          onPressed: onHeartPressed,
          icon: Icon(
            Icons.favorite,
            color: Colors.red,
          ),
        ),
        const SizedBox(height: 16.0),
        Text('D+${DateTime(now.year, now.month, now.day).difference(firstDay).inDays + 1}', style: textTheme.displayMedium,),
      ],
    );

}
}

class \_CoupleImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: Center(
child: Image.asset(
'asset/img/middle_image.png',
// 화면의 반만큼 높이 구현
height: MediaQuery.of(context).size.height / 2,
),
),
);
}
}