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

    5. SingleChildScrollView, ListView

    ์ง€๋‚œ ์‹œ๊ฐ„์— 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..