1. 작업 환경
- 설치 시도 버전 정보 (당시 최신 버전)
Flutter 3.7.12 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4d9e56e694 (4 weeks ago) • 2023-04-17 21:47:46 -0400
Engine • revision 1a65d409c7
Tools • Dart 2.19.6 • DevTools 2.20.1+ 본 글은 lib/main.dart 파일 수정을 전제로 합니다.
2. 목표 화면
- 프로젝트명 : toonflix
3. 코드 예제
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xFF181818),
body: Column(
children: [
SizedBox(
height: 60,
),
Row(
children: [
SizedBox(
width: 30,
),
Icon(Icons.person, color: Colors.white, size: 40),
SizedBox(width: 290),
Icon(Icons.add, color: Colors.white, size: 40),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.start, // 왼쪽 정렬
children: [
Container(
margin: EdgeInsets.only(left: 16),
padding: EdgeInsets.only(top: 20),
child: Container(
child: Text(
"MONDAY 16",
style: TextStyle(color: Colors.white),
),
),
),
],
),
Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Text(
"TODAY",
style: TextStyle(
color: Colors.white,
fontSize: 42,
fontWeight: FontWeight.w600,
),
),
),
Container(
margin: EdgeInsets.all(10),
child: Text(
"17",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 42,
fontWeight: FontWeight.w600,
),
),
),
Container(
margin: EdgeInsets.all(10),
child: Text(
"18",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 42,
fontWeight: FontWeight.w600,
),
),
),
Container(
margin: EdgeInsets.all(10),
child: Text(
"19",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 42,
fontWeight: FontWeight.w600,
),
),
),
Container(
margin: EdgeInsets.all(10),
child: Text(
"2",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 42,
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(
height: 20,
),
Container(
margin: EdgeInsets.all(6),
decoration: BoxDecoration(
color: Colors.yellow, borderRadius: BorderRadius.circular(45)),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 15,
horizontal: 20,
),
child: Row(
children: [
Column(
children: [
Text(
"11",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"30",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
Text("|"),
Text(
"12",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"20",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
],
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 12),
Text(
"DESIGN",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
Text(
"MEETING",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 20,
),
Row(
children: [
Text("ALEX",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("HELENA",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("NANA",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
],
),
SizedBox(height: 5),
],
),
],
)),
),
Container(
margin: EdgeInsets.all(6),
decoration: BoxDecoration(
color: Colors.purple, borderRadius: BorderRadius.circular(45)),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 15,
horizontal: 20,
),
child: Row(
children: [
Column(
children: [
Text(
"12",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"35",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
Text("|"),
Text(
"14",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"10",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
],
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 12),
Text(
"DAILY",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
Text(
"PROJECT",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 20,
),
Row(
children: [
Text("ME",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(1),
)),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("RICHARD",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("CIRY",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("+4",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
],
),
SizedBox(height: 5),
],
)
],
)),
),
Container(
margin: EdgeInsets.all(6),
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(45)),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 15,
horizontal: 20,
),
child: Row(
children: [
Column(
children: [
Text(
"15",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"00",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
Text("|"),
Text(
"16",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.w400,
),
),
Text(
"30",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
],
),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 12),
Text(
"WEEKLY",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
Text(
"PLANNING",
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 20,
),
Row(
children: [
Text("DEN",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("NANA",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
Container(
margin: EdgeInsets.only(left: 34),
child: Text("MARK",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.35),
)),
),
],
),
SizedBox(height: 5),
],
),
],
)),
),
],
),
));
}
}
'Development > Flutter (Dart)' 카테고리의 다른 글
| [노마드코더][Flutter챌린지] 1일차 - 1번째 퀴즈 (0) | 2023.06.01 |
|---|---|
| [노마드코더][Flutter챌린지] 2일차 - 2번째 퀴즈 (0) | 2023.05.30 |
| [Flutter3.7][Dart2.19] Flutter 설치 방법 in macOS (0) | 2023.05.16 |
| [Flutter3.7][Dart2.19] Flutter 간단한 프로젝트코드 작성해보기 (0) | 2023.05.06 |
| [Flutter3.7][Dart2.19] Flutter 프로젝트 생성 및 기본 샘플 실행 방법 (0) | 2023.05.06 |