반응형
2024년 11월 기준, Nomad Coders님의 강의와 flutter 버전 차이에 의해서 조금 코드가 다르다는 점을 유념하자.
main.dart
import 'package:flutter/material.dart';
import 'package:toonflix/screens/home_screen.dart';
void main() {
runApp(const App());
}
// 위젯 그 자체
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: const Color(0xffE7626C),
textTheme: const TextTheme(
headlineLarge: TextStyle(
color: Color(0xff232B55),
),
),
cardColor: const Color(0xffF4EDDB),
),
home: const HomeScreen(),
);
}
}
이제 background의 theme 색상을 가져올 때에 scaffoldBackgroundColor를 이용하면 된다.
text의 경우에는 headlineLarge를 사용하자.
이제 screens라는 폴더를 만들고... home_screen.dart 파일을 만들자.
이때, Flexible이라는 친구가 새로 사용된다.
Flexible
- UI에 기반해서 더 유연하게 만들 수 있게 해준다.
- 하나의 위젯이 얼마나 공간을 차지할지 '비율'을 정할 수 있게 한다.
- 'flex'를 이용한다.(기본값 1)
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: Theme.of(context).scaffoldBackgroundColor,
body: Column(
children: [
// Flexible
// 하드 코딩되는 값을 만들게 해줌(?)
// 높이 200, 너비 100픽셀 -> UI에 기반해서 더 유연하게 만들 수 있게 해줌.
// 하나의 박스가 얼마나 공간을 차지할 지 '비율'을 정할 수 있다.
Flexible(
// flex의 기본값은 1임
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
'25:00',
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 89,
fontWeight: FontWeight.w600,
),
),
),
),
Flexible(
flex: 3,
child: Center(
child: IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: () {},
icon: const Icon(Icons.play_circle_outline),
),
),
),
Flexible(
flex: 1,
child: Row(
children: [
Expanded(
child: Container(
decoration:
BoxDecoration(color: Theme.of(context).cardColor),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Pomodors',
style: TextStyle(
fontSize: 20,
color: Theme.of(context)
.textTheme
.headlineLarge!
.color,
),
),
Text(
'0',
style: TextStyle(
fontSize: 58,
color: Theme.of(context)
.textTheme
.headlineLarge!
.color,
),
),
],
),
),
),
],
),
),
],
),
);
}
}
Theme.of(context)를 이용해서 테마 정보를 불러온다는 것을 유의하자.
그리고, null safety가 작동하는 경우, '!'를 이용한다는 사실도 잊지 말자.
그리고... 역시 dart의 편의기능은 미쳤다. 다 해준다 그냥...
반응형
'앱 만들기 프로젝트 > Flutter' 카테고리의 다른 글
| Flutter - 5.2 Pause Play (0) | 2024.11.19 |
|---|---|
| Flutter - 5.1 Timer (0) | 2024.11.18 |
| Flutter - 4.4 Widget Lifecycle (1) | 2024.10.27 |
| Flutter - 4.3 BuildContext (0) | 2024.10.27 |
| Flutter - 4.1 setState (0) | 2024.10.27 |