코딩강의/Flutter 로 웹툰 앱 만들기(플러터-노마드코더)
POMODORO APP 만들기 - User Interface
김마드
2023. 7. 26. 18:21
1. Flexible 개념
main.dart에서 HomeScreen을 가지고 오고
import 'package:flutter/material.dart';
import 'package:toonflix/screens/home_scree.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(
backgroundColor: const Color(0xFFE7626C),
),
textTheme: const TextTheme(
displayLarge: TextStyle(
color: Color(0xFF232B55),
),
),
cardColor: const Color(0xFFF4EDDB),
),
home: const HomeScreen(),
);
}
}
HomeScreen 파일을 보면 react의 flex와 유사하게 flex로 화면 비율을 맞추어 줄 수 있다.
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(
body: Column(
children: [
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.red,
),
)),
Flexible(
flex: 2,
child: Container(
decoration: const BoxDecoration(
color: Colors.blue,
),
)),
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.orange,
),
)),
],
));
}
}
결과 화면
이제 본격적으로 만들어 보자. 아래 특이 사항을 보자.
1) context를 통해 main.dart에서 정의한 theme 컬러를 가져 올 수 있다.
2) Expanded 위젯은 해당 되는 것을 전체적으로 늘려준다.
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).colorScheme.background,
body: Column(
children: [
Flexible(
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(
"Pomodoros",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.textTheme
.displayLarge
?.color,
),
),
Text(
"0",
style: TextStyle(
fontSize: 58,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.textTheme
.displayLarge
?.color,
),
),
],
),
),
),
],
)),
],
));
}
}
결과 화면
