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',
),
);
}
}