๐Ÿ’ป ๊ฐœ๋ฐœ/Flutter 9

[Flutter] ModalBottomSheet๊ฐ€ ํ‚ค๋ณด๋“œ์— ์˜ํ•ด ๊ฐ€๋ ค์ง€๋Š” ํ˜„์ƒ

๋ธ”๋กœ๊ทธ ๋‚ด์˜ ๊ฒŒ์‹œ๋ฌผ์€ PC ๋ฒ„์ „์— ์ตœ์ ํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ModalBttomSheet๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋ฐœ์ƒํ–ˆ๋˜ ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ ์–ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ModalBottomSheet์— TextField๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‚ค๋ณด๋“œ๋กœ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›์œผ๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ModalBottomSheet๊ฐ€ ํŒ์—…๋œ ํ‚ค๋ณด๋“œ์˜ ๋†’์ด๋งŒํผ ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š์•„์„œ ModalBottomSheet๊ฐ€ ํ‚ค๋ณด๋“œ์— ๊ฐ€๋ ค์ง€๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์ƒํ™ฉ์ž…๋‹ˆ๋‹ค. ํ‚ค๋ณด๋“œ๊ฐ€ ํŒ์—…๋˜๋ฉด์„œ ModalBottomSheet๋ฅผ ๊ฐ€๋ ค ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ํ…์ŠคํŠธ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ModalBottomSheet๊ฐ€ ํ‚ค๋ณด๋“œ์— ์˜ํ•ด ๊ฐ€๋ ค์ง€๋Š” ํ˜„์ƒ ์šฐ์„  ModalBottomSheet์˜ ์†์„ฑ์— ๋Œ€ํ•ด ๋ถ„์„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ์ค‘ isScrollContro..

[Flutter / Dart] What is Equatable?

๋ธ”๋กœ๊ทธ ๋‚ด์˜ ๊ฒŒ์‹œ๋ฌผ์€ PC ๋ฒ„์ „์— ์ตœ์ ํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ Equatable์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. BLoC์— ๋Œ€ํ•œ ๊ธ€์„ ์“ฐ๊ธฐ ์ „์— BLoC์—์„œ ์‚ฌ์šฉํ•˜๋Š” Equatable์— ๋Œ€ํ•œ ์ •๋ฆฌ๊ฐ€ ์šฐ์„ ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋ณธ๋ก ์œผ๋กœ ๋“ค์–ด๊ฐ€๋ณด์ฃ ! ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋จผ์ € ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. class Person { final int pid; final String name; final int age; Person(this.pid, this.name, this.age); } void main() { Person p1 = new Person(20221234, "kodo", 25); Person p2 = new Person(20221234, "kodo", 25); (p1 == p2) ? print("same") : ..

[Flutter] BLoC ํŒจํ„ด์œผ๋กœ ์ž๋™ ๋กœ๊ทธ์ธ, Splash Screen ๊ตฌํ˜„ํ•˜๊ธฐ - 1

๋ธ”๋กœ๊ทธ ๋‚ด์˜ ๊ฒŒ์‹œ๋ฌผ์€ PC ๋ฒ„์ „์— ์ตœ์ ํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ํ”Œ๋Ÿฌํ„ฐ์—์„œ ์ž๋™ ๋กœ๊ทธ์ธ์™€ Splash Screen์„ ๊ตฌํ˜„ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ž๋™ ๋กœ๊ทธ์ธ์€ ์•ฑ ๊ฐœ๋ฐœ์„ ์ ‘ํ•ด๋ดค๋‹ค๋ฉด ํ•œ ๋ฒˆ์ฏค์€ ๊ตฌํ˜„ํ•ด๋ดค์„ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. SharedPreference๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ์˜ค๋Š˜์€ ์กฐ๊ธˆ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์ ‘๊ทผํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ BLoC๋ฅผ ํ†ตํ•ด์„œ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ์š”, BLoC๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋™ ๋กœ๊ทธ์ธ๊ณผ Splash Screen์„ ํ•˜๋‚˜์˜ ๋กœ์ง์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•œ๋ฒˆ ์‹œ์ž‘ํ•ด๋ณด์ฃ . ๋ฐ”๋กœ BLoC๋กœ ๊ตฌํ˜„ํ•˜์ง€ ์•Š๊ณ  ๊ธฐ์กด์˜ ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  BLoC๋กœ ๋ฆฌํŽ™ํ† ๋งํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์™€ ์ด ๋ฌธ์ œ๋ฅผ ์–ด๋–ค ์‹์œผ๋กœ ํ•ด๊ฒฐํ•˜๋Š”์ง€๊ฐ€ ์ค‘์š”ํ•˜๋‹ˆ๊นŒ์š”. ์ž๋™ ๋กœ๊ทธ์ธ ์•ž์„œ ๋ง์”€๋“œ๋ฆฐ ๊ฒƒ์ฒ˜๋Ÿผ SharedPrefer..

[Flutter / Dart] What is Singleton?

๋ธ”๋กœ๊ทธ ๋‚ด์˜ ๊ฒŒ์‹œ๋ฌผ์€ PC ๋ฒ„์ „์— ์ตœ์ ํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ •๋ง ์˜ค๋žœ๋งŒ์— ๊ธ€ ์“ฐ๋Š” ๊ฑฐ ๊ฐ™๋„ค์š”. ๋ฏธ๊ตญ์—์„œ ๋Œ์•„์™€์„œ ์ผ๊ธฐ ์“ด ๊ฒŒ ๋งˆ์ง€๋ง‰์ธ๋ฐ ์ฃผ๊ธฐ์ ์œผ๋กœ ์“ฐ๋ ค๊ณ  ํ–ˆ์—ˆ๋Š”๋ฐ 1ํ•™๊ธฐ์— ํ”„๋กœ์ ํŠธ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„์„œ ๋ฐ”๋นด์Šต๋‹ˆ๋‹ค. ๊ธ€ ์“ฐ๊ณ  ์žˆ๋Š” ์ง€๊ธˆ์€ ์—”์”จ์†Œํ”„ํŠธ์—์„œ 7์ฃผ์งœ๋ฆฌ ์ฑ„์šฉ์—ฐ๊ณ„ํ˜• ์ธํ„ด์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ธํ„ด์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ”Œ๋Ÿฌํ„ฐ๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์•Œ๊ฒŒ๋œ ๊ฒƒ๋“ค, ์ •๋ฆฌํ•˜๋ฉด ์ข‹์€ ๊ฒƒ๋“ค์„ ์ ์–ด๋‘๊ณ  ์‹ถ์–ด์„œ ์˜ค๋Š˜๋ถ€ํ„ฐ ์ฃผ๊ธฐ์ ์œผ๋กœ ํฌ์ŠคํŒ…์„ ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. (1ํ•™๊ธฐ ํšŒ๊ณ ๋ก์„ ์ž‘์„ฑํ•˜๊ณ  ์žˆ๋Š”๋ฐ ์•„์ง ์ž‘์„ฑ์ด ์•ˆ๋ผ์„œ ๋น„๊ณต๊ฐœ๋กœ ํ•ด๋†จ์Šต๋‹ˆ๋‹ค...) ์‹ฑ๊ธ€ํ†ค ์‹ฑ๊ธ€ํ†ค, ์ „๊ณต์ž๋ผ๋ฉด ๋‹ค๋“ค ๋งŽ์ด ๋“ค์–ด๋ดค์„ ๋‹จ์–ด์ผ ๊ฒ๋‹ˆ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ์‹ฑ๊ธ€, ํ•˜๋‚˜์˜ ์ธ์Šคํ„ด์Šค๋งŒ ์กด์žฌํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ธ์Šคํ„ด์Šค๋ฅผ ํ•˜๋‚˜๋งŒ ๊ฐ€์ง€๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ์š”? ๋จธ๋ฆฌ ์†์— ๋– ..

[Flutter] SingleChildScrollView, ListView, ListView.bulider

์ง€๋‚œ ์‹œ๊ฐ„์— Column์— ๋Œ€ํ•ด ์ •๋ฆฌํ–ˆ์—ˆ๋‹ค. ์˜ค๋Š˜ ์ •๋ฆฌํ•  ๋‚ด์šฉ์€ Column์œผ๋กœ ์œ„์ ฏ๋“ค์„ ๋ณด์—ฌ์ค„ ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์ฃผ๋Š” ๋˜ ๋‹ค๋ฅธ ์œ„์ ฏ์ด๋‹ค. import 'package:flutter/material.dart'; void main() { return runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Column ์˜ˆ์ œ"), ), body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, ve..

4. Column, Row, Expanded

์ง€๋‚œ ์‹œ๊ฐ„ Container์— ์ด์–ด ์˜ค๋Š˜์€ Column, Row, Expanded์— ์•Œ์•„๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์ด์ „ ํฌ์ŠคํŒ…์—์„œ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋˜ Container ๊ฐ„์˜ ๋ถ„๋ฆฌ๋ฅผ ์ด๋Ÿฌํ•œ ์œ„์ ฏ๋“ค์„ ์ด์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค. https://codekodo.tistory.com/95 3. Container, Padding ์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ Container์™€ Padding ์œ„์ ฏ์ด๋‹ค. ๊ฐ™์ด ๋ฌถ์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๋‘ ์œ„์ ฏ์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. Container ์šฐ์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” Container๊ฐ€ ์ž์‹ ์œ„์ ฏ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์ด codekodo.tistory.com ์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ Container์™€ Padding ์œ„์ ฏ์ด๋‹ค. ๊ฐ™์ด ๋ฌถ์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๋‘ ์œ„์ ฏ์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์šฐ์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” Co..

3. Container, Padding

์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ Container์™€ Padding ์œ„์ ฏ์ด๋‹ค. ๊ฐ™์ด ๋ฌถ์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๋‘ ์œ„์ ฏ์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. Container ์šฐ์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” Container๊ฐ€ ์ž์‹ ์œ„์ ฏ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์ด๋ผ๊ณ  ๋‚˜์™€์žˆ๋‹ค. ์ด ๋ง์€ ์ฆ‰, ์—ฌ๋ฐฑ, ๊ฐ„๊ฒฉ, ํ…Œ๋‘๋ฆฌ ๋˜๋Š” ๋ฐฐ๊ฒฝ์ƒ‰์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ Container๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์‹ค์ œ๋กœ Cotainer ์œ„์ ฏ์€ ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. Container Container({ Key? key, AlignmentGeometry? alignment, EdgeInsetsGeometry? padding, Color? color, Decoration? decoration, Decoration? foregroundDecoration, dou..

2. Stateless, Stateful

ํ”Œ๋Ÿฌํ„ฐ์˜ ์œ„์ ฏ์€ ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค. Stateful๊ณผ Stateless Stateful์€ ์œ„์ ฏ์ด ๋™์ž‘ํ•˜๋Š” ๋™์•ˆ ๋‚ด๋ถ€ ํด๋ž˜์Šค์—์„œ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉ๋œ๋‹ค. setState ์‹คํ–‰ ์ดํ›„ ํ™”๋ฉด์„ ๋‹ค์‹œ ๊ทธ๋ ค์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ๋‹ค์‹œ ๋ฐ˜์˜ํ•œ๋‹ค. Stateless๋Š” Stateful๊ณผ ๋‹ค๋ฅด๊ฒŒ ์œ„์ ฏ์ด ๋™์ž‘ํ•˜๋Š” ๋™์•ˆ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์— ์‚ฌ์šฉ๋œ๋‹ค. ์‚ฌ์šฉ์ž์˜ ๋ฐ˜์‘๊ณผ ์ƒ๊ด€ ์—†์ด ํ™”๋ฉด๋งŒ ๋ณด์—ฌ์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) ..

1. Widget

ํ”Œ๋Ÿฌํ„ฐ๋Š” ์œ„์ ฏ์œผ๋กœ ์‹œ์ž‘ํ•ด์„œ ์œ„์ ฏ์œผ๋กœ ๋๋‚œ๋‹ค. ํ”Œ๋Ÿฌํ„ฐ๋กœ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ํ™”๋ฉด์ƒ์— ๋ณด์ด๋Š” ๋ชจ๋“  ๊ฒƒ(element๋“ค์˜ ๋ฐฐ์น˜)๊ณผ padding, margin๊ณผ ๊ฐ™์€ ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ๋“ค์ด ์œ„์ ฏ์ด๋‹ค. ์ด๋Ÿฌํ•œ Widget๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ Widget Tree๋ผ๊ณ  ํ•œ๋‹ค. Widget๋“ค์€ ๋ถ€๋ชจ์™€ ์ž์‹์˜ ๊ด€๊ณ„๋ฅผ ๊ฐ–๋Š”๋‹ค. MyApp์˜ ์ž์‹์œผ๋กœ MaterialApp์ด ์กด์žฌํ•œ๋‹ค. Material์€ ํ˜„์žฌ ์•ˆ๋“œ๋กœ์ด๋“œ์— ์ ์šฉ๋œ UI์ด๋‹ค. https://flutter.dev/docs/development/ui/widgets/material Material Components widgets flutter.dev ์ด์™€ ๋Œ€๋น„๋˜๋Š” ๊ฒƒ์€ Cuppertino, ํ˜„์žฌ IOS์— ์ ์šฉ๋œ UI์ด๋‹ค. https://flutter.dev/docs/developm..