만난지 며칠
Font 적용하기
home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[100],
body: SafeArea(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
_TopPart(),
_BottomPart(),
],
),
),
),
);
}
}
class _TopPart extends StatelessWidget {
const _TopPart({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'U&I',
style: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
),
Column(
children: [
Text(
'Days After',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 30.0,
),
),
Text(
'2023-06-23',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 20.0),
),
],
),
IconButton(
iconSize: 60.0,
onPressed: () {},
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
),
Text(
'D + 1',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 25.0,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
class _BottomPart extends StatelessWidget {
const _BottomPart({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Image.asset(
'asset/img/middle_image.png',
),
);
}
}
DatePicker
home_screen.dart
IconButton(
iconSize: 60.0,
onPressed: () {
//dialog
showCupertinoDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
color: Colors.white,
height: 300.0,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
onDateTimeChanged: (DateTime date){
print(date);
},
),
),
);
},
);
},
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
),
날짜 다루기
home_screen.dart
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> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[100],
body: SafeArea(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
_TopPart(),
_BottomPart(),
],
),
),
),
);
}
}
class _TopPart extends StatefulWidget {
const _TopPart({super.key});
@override
State<_TopPart> createState() => _TopPartState();
}
class _TopPartState extends State<_TopPart> {
DateTime selectedDate = DateTime(
DateTime.now().year,
DateTime.now().month,
DateTime.now().day,
);
@override
Widget build(BuildContext context) {
final now = DateTime.now();
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'U&I',
style: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
),
Column(
children: [
Text(
'Days After',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 30.0,
),
),
Text(
'${selectedDate.year}.${selectedDate.month}.${selectedDate.day}',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 20.0),
),
],
),
IconButton(
iconSize: 60.0,
onPressed: () {
//dialog
showCupertinoDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
color: Colors.white,
height: 300.0,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: selectedDate,
maximumDate: DateTime(
now.year,
now.month,
now.day,
),
onDateTimeChanged: (DateTime date){
setState(() {
selectedDate = date;
});
},
),
),
);
},
);
},
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
),
Text(
'D + ${
DateTime(
now.year,
now.month,
now.day,
).difference(selectedDate).inDays + 1
}',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 25.0,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
class _BottomPart extends StatelessWidget {
const _BottomPart({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Image.asset(
'asset/img/middle_image.png',
),
);
}
}
상태 관리
home_screen.dart
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(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
_TopPart(
selectedDate: selectedDate,
onPressed: onHeartPressed,
),
_BottomPart(),
],
),
),
),
);
}
void onHeartPressed(){
final DateTime now = DateTime.now();
//dialog
showCupertinoDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
color: Colors.white,
height: 300.0,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: selectedDate,
maximumDate: DateTime(
now.year,
now.month,
now.day,
),
onDateTimeChanged: (DateTime date){
setState(() {
selectedDate = date;
});
},
),
),
);
},
);
}
}
class _TopPart extends StatelessWidget {
final DateTime selectedDate;
final VoidCallback onPressed;
_TopPart({required this.selectedDate, required this.onPressed, Key? key}) : super(key:key);
@override
Widget build(BuildContext context) {
final now = DateTime.now();
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'U&I',
style: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
),
Column(
children: [
Text(
'Days After',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 30.0,
),
),
Text(
'${selectedDate.year}.${selectedDate.month}.${selectedDate.day}',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 20.0),
),
],
),
IconButton(
iconSize: 60.0,
onPressed: onPressed,
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
),
Text(
'D + ${
DateTime(
now.year,
now.month,
now.day,
).difference(selectedDate).inDays + 1
}',
style: TextStyle(
color: Colors.white,
fontFamily: 'sunflower',
fontSize: 25.0,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
class _BottomPart extends StatelessWidget {
const _BottomPart({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Image.asset(
'asset/img/middle_image.png',
),
);
}
}
테마 적용하기
main.dart
import 'package:flutter/material.dart';
import 'package:uni/screen/home_screen.dart';
void main() {
runApp(MaterialApp(
theme: ThemeData(
fontFamily: 'sunflower',
textTheme: TextTheme(
headline1: TextStyle(
color: Colors.white,
fontFamily: 'parisienne',
fontSize: 80.0,
),
headline2: TextStyle(
color: Colors.white, fontSize: 25.0, fontWeight: FontWeight.w700),
bodyText1: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
bodyText2: TextStyle(color: Colors.white, fontSize: 20.0),
)),
home: HomeScreen(),
));
}
home_screen.dart
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(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
_TopPart(
selectedDate: selectedDate,
onPressed: onHeartPressed,
),
_BottomPart(),
],
),
),
),
);
}
void onHeartPressed() {
final DateTime now = DateTime.now();
//dialog
showCupertinoDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
color: Colors.white,
height: 300.0,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: selectedDate,
maximumDate: DateTime(
now.year,
now.month,
now.day,
),
onDateTimeChanged: (DateTime date) {
setState(() {
selectedDate = date;
});
},
),
),
);
},
);
}
}
class _TopPart extends StatelessWidget {
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 now = DateTime.now();
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'U&I',
style: textTheme.headline1,
),
Column(
children: [
Text(
'Days After',
style: textTheme.bodyText1,
),
Text(
'${selectedDate.year}.${selectedDate.month}.${selectedDate.day}',
style: textTheme.bodyText2,
),
],
),
IconButton(
iconSize: 60.0,
onPressed: onPressed,
icon: Icon(
Icons.favorite,
color: Colors.pink,
),
),
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',
),
);
}
}
Last updated
