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

4. Column, Row, Expanded

2021. 8. 18. 11:34
๋ชฉ์ฐจ
  1. Column
  2. Row
  3. Expanded

์ง€๋‚œ ์‹œ๊ฐ„ Container์— ์ด์–ด ์˜ค๋Š˜์€ Column, Row, Expanded์— ์•Œ์•„๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์ด์ „ ํฌ์ŠคํŒ…์—์„œ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋˜ Container ๊ฐ„์˜ ๋ถ„๋ฆฌ๋ฅผ ์ด๋Ÿฌํ•œ ์œ„์ ฏ๋“ค์„ ์ด์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

 

https://codekodo.tistory.com/95

 

3. Container, Padding

์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ Container์™€ Padding ์œ„์ ฏ์ด๋‹ค. ๊ฐ™์ด ๋ฌถ์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๋‘ ์œ„์ ฏ์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. Container ์šฐ์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” Container๊ฐ€ ์ž์‹ ์œ„์ ฏ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์ด

codekodo.tistory.com

์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ Container์™€ Padding ์œ„์ ฏ์ด๋‹ค. ๊ฐ™์ด ๋ฌถ์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ๋‘ ์œ„์ ฏ์ด ๊ฑฐ์˜ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์šฐ์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” Container๊ฐ€ ์ž์‹ ์œ„์ ฏ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์ด๋ผ๊ณ  ๋‚˜์™€์žˆ๋‹ค.

Column

Column์€ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ element๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์œ„์ ฏ์ด๋‹ค. Column๋„ ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

Column Column({
    Key? key,              
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,   
    MainAxisSize mainAxisSize = MainAxisSize.max,             
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,     
    TextDirection? textDirection,                  
    VerticalDirection verticalDirection = VerticalDirection.down,      
    TextBaseline? textBaseline,                
    List<Widget> children = const <Widget>[]
    })

์†์„ฑ๋“ค์€ ์‹ค์ œ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๋ฉด์„œ ์•Œ์•„๋ณด์ž. ์šฐ์„  mainAxisAlignment์™€ crossAxisAlignment๊ฐ€ ์ •๋ ฌ์— ๊ด€ํ•œ ์†์„ฑ์ด๋‹ค. Column์˜ ๊ฒฝ์šฐ main์€ ์ˆ˜์ง๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ, crossAxisAlignment๋Š” ์ˆ˜ํ‰๋ฐฉํ–ฅ์œผ๋กœ์˜ ์ •๋ ฌ์„ ์œ„๋ฏธํ•œ๋‹ค. verticalDirection์€ 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(
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.red,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
            Container(
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

์ด๋ ‡๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ๋นŒ๋“œ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด Container๋ผ๋ฆฌ ๊ฒน์น˜์ง€ ์•Š๊ณ  ์ง€๋‚œ ์‹œ๊ฐ„์— ์šฐ๋ฆฌ๊ฐ€ ์›ํ–ˆ๋˜ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

Column์˜ ์ •๋ ฌ์—๋Š” ๋‘ ๊ฐ€์ง€ ํƒ€์ž…์ด ์กด์žฌํ•˜๋Š”๋ฐ ์ˆ˜ํ‰ ๋ฐฉํ–ฅ๊ณผ ์ˆ˜์ง ๋ฐฉํ–ฅ์ด๋‹ค. ์ˆ˜ํ‰ ๋ฐฉํ–ฅ์€ CrossAxisAlignment, ์ˆ˜์ง ๋ฐฉํ–ฅ์€ MainAxisAlignment์ด๋‹ค. ์ •๋ ฌ ์†์„ฑ์—๋„ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ ์ž์ฃผ ์“ฐ์ด๋Š” spaceAround, spaceBetween, spaceEvenly์„ ๋ณด๋ฉด spaceAround์˜ ๊ฒฝ์šฐ Column์˜ children์˜ ์œ„์ ฏ์„ ์ค‘์‹ฌ์œผ๋กœ ์–‘์ชฝ์— ๊ฐ™์€ ์—ฌ๋ฐฑ์„ ์ฃผ๋Š” ์†์„ฑ์ด๋‹ค. spaceBetween์˜ ๊ฒฝ์šฐ ์œ„์ ฏ๋“ค ์‚ฌ์ด์— ๊ฐ™์€ ์—ฌ๋ฐฑ์„, spaceEvenly๋Š” ๋ชจ๋“  ์—ฌ๋ฐฑ์ด ๊ฐ™์€ ํฌ๊ธฐ์ธ ์†์„ฑ์ด๋‹ค. ์‹ค์ œ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์‰ฝ๊ฒŒ ์ดํ•ด๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค.

spaceAround
spaceBetween
spaceEvenly

VerticalDirection ์†์„ฑ์€ ๋ง ๊ทธ๋Œ€๋กœ ์œ„์—์„œ ์•„๋ž˜๋กœ ๋ณด์—ฌ์ค„ ๊ฒƒ์ธ์ง€, ์•„๋ž˜์—์„œ ์œ„๋กœ ๋ณด์—ฌ์ค„ ๊ฒƒ์ธ์ง€๋ฅผ ์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

Row

Row๋„ Column๊ณผ ์œ ์‚ฌํ•˜๋‹ค. ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค๋ฉด MainAxisAlignment์™€ CrossAxisAlignment๊ฐ€ ์˜๋ฏธํ•˜๋Š”๊ฒŒ Column๊ณผ ๋ฐ˜๋Œ€๋‹ค. Column์—์„œ๋Š” Main์€ ์ˆ˜์ง ๋ฐฉํ–ฅ, Cross๋Š” ์ˆ˜ํ‰ ๋ฐฉํ–ฅ์ด์—ˆ๋Š”๋ฐ Row์—์„œ๋Š” Main์€ ์ˆ˜ํ‰ ๋ฐฉํ–ฅ, Cross๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์ด ๋œ๋‹ค.

 

์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žตํ•˜๋Š” ๊ฑธ๋กœ...

Expanded

Expanded๋Š” ๋ญ˜๊นŒ? ํ•ด์„ํ•˜๋ฉด ํ™•์žฅ? ์˜ ์˜๋ฏธ์ธ๋ฐ ์–ด๋””์— ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ผ๊นŒ? Expanded๋Š” Column๊ณผ Row์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์œผ๋กœ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ Container๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ํŽธํ•˜๋‹ค. ์•„๋ž˜์˜ ๋‘ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์ฒซ ๋ฒˆ์งธ๋Š” Expanded๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๊ฒฐ๊ณผ์ด๊ณ , ๋‘ ๋ฒˆ์งธ๋Š” Expaned๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฐ๊ณผ์ด๋‹ค.

Expanded๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋ฐฑ ์—†์ด ์œ ์—ฐํ•˜๊ฒŒ Container๋ฅผ ์ฑ„์šธ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ Expanded์—๋Š” flex๋ผ๋Š” ์†์„ฑ์ด ์กด์žฌํ•˜๋Š”๋ฐ ์ด๋Š” Expanded ๊ฐ„์— ํฌ๊ธฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  Black : Indigo Container์˜ ํฌ๊ธฐ๊ฐ€ 1 : 2 ๊ฐ€ ๋œ๋‹ค.

๊ฒ€์€์ƒ‰ ์˜์—ญ์˜ ํฌ๊ธฐ๊ฐ€ ์ข€ ๋” ์ปค์ง„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ’ป ๊ฐœ๋ฐœ > Flutter' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Flutter / Dart] What is Singleton?  (0) 2022.07.21
[Flutter] SingleChildScrollView, ListView, ListView.bulider  (1) 2021.08.18
3. Container, Padding  (0) 2021.08.18
2. Stateless, Stateful  (0) 2021.07.13
1. Widget  (0) 2021.07.13
  1. Column
  2. Row
  3. Expanded
'๐Ÿ’ป ๊ฐœ๋ฐœ/Flutter' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Flutter / Dart] What is Singleton?
  • [Flutter] SingleChildScrollView, ListView, ListView.bulider
  • 3. Container, Padding
  • 2. Stateless, Stateful
kodo_o
kodo_o
iOS ๊ฟ€์žผ!
kodo_o
๐ŸŽ๐Ÿ
kodo_o
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (149)
    • ๐Ÿ”จ ํ”„๋กœ์ ํŠธ (0)
      • TP 1 (0)
      • WhiteHCCTV (0)
      • FootPrint (0)
    • ๐Ÿ’ป ๊ฐœ๋ฐœ (63)
      • iOS (30)
      • Android (6)
      • Kotlin (4)
      • Flutter (9)
      • Node.js (5)
      • Architecture (1)
      • ์˜ค๋Š˜์˜ ์‚ฝ์งˆ (7)
      • ์—๋Ÿฌ์™€์˜ ๋™์นจ (1)
    • โœ๏ธ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (6)
      • Graph (6)
      • String (0)
      • Sort (0)
    • โœ๏ธ ์ฝ”ํ…Œ ์ค€๋น„ (44)
      • Math (1)
      • Implementation (3)
      • String (3)
      • Brute Force (5)
      • Back Tracking (7)
      • Greedy (0)
      • Dynamic Programming (13)
      • Binary Search (1)
      • DFS, BFS (5)
      • Shortest Path (2)
      • Two Pointer (4)
      • MST (0)
    • ๐Ÿ“š CS (6)
      • Operating System (6)
    • โ›น๏ธ ๋ผ์ดํ”„ (30)
      • 2020 ๊ฒจ์šธ๋ฐฉํ•™ ๋ชจ๊ฐ์ฝ”(๊ฐœ์ธ) (12)
      • 2021 ์—ฌ๋ฆ„๋ฐฉํ•™ ๋ชจ๊ฐ์ฝ”(๊ฐœ์ธ) (6)
      • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ (1)
      • ํšŒ๊ณ  (10)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ๊นƒํ—ˆ๋ธŒ

์ธ๊ธฐ ๊ธ€

์ตœ๊ทผ ๊ธ€

์ตœ๊ทผ ๋Œ“๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
kodo_o
4. Column, Row, Expanded
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.