Design-loving front-end engineer
Ryong
Design-loving front-end engineer
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
    • Framework
    • React
      • Concept
      • Library
      • Hook
      • Component
      • Test
    • NodeJS
    • Android
      • Concept
      • Code
      • Sunflower
      • Etc
    • Flutter
      • Concept
      • Package
    • Web
    • Web
    • CSS
    • Language
    • JavaScript
    • TypeScript
    • Kotlin
    • Dart
    • Algorithm
    • Data Structure
    • Programmers
    • Management
    • Git
    • Editor
    • VSCode
    • Knowledge
    • Voice
Design-loving front-end engineer

Ryong

[ Flutter ] ํ™”๋ฉด ๋ฐฐ์น˜
Flutter/Concept

[ Flutter ] ํ™”๋ฉด ๋ฐฐ์น˜

2021. 12. 28. 08:54

Container

๐Ÿ’ฌ  child๋ฅผ ํฌํ•จํ•œ ๋ถ€๋ชจ ์œ„์ ฏ์œผ๋กœ ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

๐Ÿ’ฌ  width, height๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์ตœ๋Œ€ ํฌ๊ธฐ๋กœ ํ™•์žฅํ•œ๋‹ค.

๐Ÿ’ฌ  ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Container(
  color: Colors.red,
  width: 100,
  height: 100,
  padding: const EdgeInsets.all(8.0),
  margin: const EdgeInsets.all(8.0),
)

 

SizedBox

๐Ÿ’ฌ  ์—ฌ๋ฐฑ์„ ์ฃผ๊ธฐ ์œ„ํ•œ ๋‹จ์ˆœ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•˜๋ฉฐ, Container์ฒ˜๋Ÿผ child๋ฅผ ํฌํ•จํ•œ ๋ถ€๋ชจ ์œ„์ ฏ์œผ๋กœ ์‚ฌ์šฉ๋˜๊ธฐ๋„ ํ•œ๋‹ค.

๐Ÿ’ฌ  width, height๊ฐ€ ์„ค์ •๋˜์ง€ ์•Š์œผ๋ฉด child์˜ ํฌ๊ธฐ์— ๋งž๊ฒŒ ํฌ๊ธฐ๊ฐ€ ์„ค์ •๋œ๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.red,
  ),
),

 

Column

๐Ÿ’ฌ  ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ์œ„์ ฏ๋“ค์„ ๋‚˜๋ž€ํžˆ ๋ฐฐ์น˜ํ•˜๋Š” ์œ„์ ฏ

Column(
  children: <Widget>[
    [์œ„์ ฏ],
    [์œ„์ ฏ],
    [์œ„์ ฏ],
  ],
),

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
  ],
),

 

Row

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    [์œ„์ ฏ],
    [์œ„์ ฏ],
    [์œ„์ ฏ],
  ],
),

๐Ÿ’ฌ  mainAxis๋Š” ์œ„์ ฏ์˜ ๊ธฐ๋ณธ ๋ฐฉํ–ฅ์ด๋ฉฐ, Row๋Š” ์˜ค๋ฅธ์ชฝ, Column์€ ์•„๋ž˜์ชฝ์ด mainAxis๊ฐ€ ๋œ๋‹ค.

๐Ÿ’ฌ  crossAxis๋Š” ๊ธฐ๋ณธ ๋ฐฉํ–ฅ์˜ ๋ฐ˜๋Œ€ ๋ฐฉํ–ฅ์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ, Row๋Š” ์•„๋ž˜์ชฝ, Column์€ ์˜ค๋ฅธ์ชฝ์ด ๋œ๋‹ค.

๐Ÿ’ฌ  ๊ฐ ํ”„๋กœํผํ‹ฐ์— ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Row (
  mainAxisSize: MainAxisSize.max,  // ๊ฐ€๋กœ๋กœ ๊ฝ‰ ์ฑ„์šฐ๊ธฐ
  mainAxisAlignment: MainAxisAlignment.center,  // ๊ฐ€๋กœ ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ
  crossAxisAlignment: CrossAxisAlignment.center,  // ์„ธ๋กœ ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
     color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
     color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    )
  ],
)

 

Stack

๐Ÿ’ฌ  children์— ๋‚˜์—ดํ•œ ์—ฌ๋Ÿฌ ์œ„์ ฏ์„ ์ˆœ์„œ๋Œ€๋กœ ๊ฒน์น˜๊ฒŒ ํ•œ๋‹ค.

๐Ÿ’ฌ  ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ Row, Column๊ณผ ๊ฐ™์œผ๋ฉฐ ์ˆœ์„œ๋Š” children ํ”„๋กœํผํ‹ฐ์— ์ •์˜ํ•œ ๋ฆฌ์ŠคํŠธ์— ๋จผ์ € ์ž‘์„ฑํ•œ ์œ„์ ฏ์ด ๊ฐ€์žฅ ์•„๋ž˜์ชฝ์— ์œ„์น˜ํ•˜๊ณ  ๋‚˜์ค‘์— ์ž‘์„ฑํ•œ ์œ„์ ฏ์ด ์œ„์ชฝ์— ์œ„์น˜ํ•œ๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Stack (
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 80,
      height: 80,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 60,
      height: 60,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    )
  ],
)

 

GridView

๐Ÿ’ฌ  ์—ด ์ˆ˜๋ฅผ ์ง€์ •ํ•˜์—ฌ ๊ทธ๋ฆฌ๋“œ ํ˜•ํƒœ๋กœ ํ‘œ์‹œํ•˜๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  GridView.count() ์ƒ์„ฑ์ž๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

๐Ÿ’ฌ  crossAxisCount ํ”„๋กœํผํ‹ฐ์— ์—ด ์ˆ˜๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

GridView.count(
  crossAxisCount: [์—ด ์ˆ˜],
  children: <Widget>[
    [์œ„์ ฏ],
    [์œ„์ ฏ],
    [์œ„์ ฏ],
  ],
),

์˜ˆ์ œ

๋”๋ณด๊ธฐ
GridView.count(
  crossAxisCount: 2,  // ์—ด ์ˆ˜
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
    ),
  ],
),

 

PageView

๐Ÿ’ฌ  ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๋ฅผ ์ขŒ์šฐ๋กœ ์Šฌ๋ผ์ด๋“œํ•˜์—ฌ ๋„˜๊ธธ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  children ํ”„๋กœํผํ‹ฐ์— ๊ฐ ํ™”๋ฉด์„ ํ‘œํ˜„ํ•  ์œ„์ ฏ์„ ์—ฌ๋Ÿฌ ๊ฐœ ์ค€๋น„ํ•˜์—ฌ ์ง€์ •ํ•˜๋ฉด ํ™”๋ฉด์„ ์ขŒ์šฐ๋กœ ์Šฌ๋ผ์ด๋“œํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ’ฌ  ํ•˜์ง€๋งŒ, Tab๊ณผ ์—ฐ๋™ํ•˜์—ฌ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์ขŒ์šฐ๋กœ ์Šฌ๋ผ์ด๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•œ์ง€ ์‚ฌ์šฉ์ž๊ฐ€ ๋ชจ๋ฅผ ์ˆ˜ ์žˆ์–ด์„œ ๋‹จ๋…์œผ๋กœ๋Š” ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

PageView(
  children: <Widget>[
    [์œ„์ ฏ],
    [์œ„์ ฏ],
    [์œ„์ ฏ],
  ],
),

์˜ˆ์ œ

๋”๋ณด๊ธฐ
PageView(
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

 

Center

๐Ÿ’ฌ  ์ค‘์•™์œผ๋กœ ์ •๋ ฌ์‹œํ‚ค๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  child ํ”„๋กœํผํ‹ฐ์— ์ค‘์•™์— ๋ฐฐ์น˜ํ•  ์œ„์ ฏ์„ ์„ค์ •ํ•œ๋‹ค.

Center(
  child: [์œ„์ ฏ],
),

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Center(
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

 

Padding

๐Ÿ’ฌ  ์•ˆ์ชฝ ์—ฌ๋ฐฑ์„ ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์œ„์ ฏ์œผ๋กœ, ์•ˆ์ชฝ ์—ฌ๋ฐฑ์€ padding ํ”„๋กœํผํ‹ฐ์— ๊ฐ’์„ ์ง€์ •ํ•œ๋‹ค.

๐Ÿ’ฌ  EdgeInsets ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์ •ํ•˜๋ฉฐ const๋ฅผ ๋ถ™์ด๋ฉด ์ปดํŒŒ์ผ ํƒ€์ž„์— ์ƒ์ˆ˜๋กœ ์ •์˜๋˜์–ด ๋‹ค์‹œ ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์„ ๊ฒฝ์šฐ ๋ฉ”๋ชจ๋ฆฌ์— ์žˆ๋Š” ๊ฐ’์„ ์žฌ์‚ฌ์šฉํ•˜๋Š” ์ด๋“์ด ์žˆ๋‹ค.

Padding(
  padding: const EdgeInsets.all(40.0),
  child: [์œ„์ ฏ],
),

โ—ป๏ธ  ๋‹จ, ๋‹ฌ๋ผ์ง€๋Š” ๊ฐ’์ด ๋ถ€์—ฌํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, const๋ฅผ ์‚ญ์ œํ•ด์•ผ ํ•œ๋‹ค.

EdgeInsets.all([double])

โ—ป๏ธ  all() ํ•จ์ˆ˜๋Š” ๋„ค ๋ฐฉํ–ฅ ๋ชจ๋‘ ๊ฐ™์€ ๊ฐ’์„ ์ง€์ •ํ•œ๋‹ค.

EdgeInsets.only({left: [์™ผ์ชฝ], top: [์œ„], right: [์˜ค๋ฅธ์ชฝ], bottom: [์•„๋ž˜]})

โ—ป๏ธ  only() ํ•จ์ˆ˜๋Š” ์›ํ•˜๋Š” ๋ฐฉํ–ฅ์— ๊ฐ’์„ ์ง€์ •ํ•œ๋‹ค.

โ—ป๏ธ  ์ง€์ •ํ•˜์ง€ ์•Š์€ ๋ฐฉํ–ฅ์—๋Š” ๊ธฐ๋ณธ๊ฐ’ 0.0์ด ์ง€์ •๋œ๋‹ค.

EdgeInsets.fromLTRB([์™ผ์ชฝ], [์œ„], [์˜ค๋ฅธ์ชฝ], [์•„๋ž˜])

โ—ป๏ธ  fromLTRB() ํ•จ์ˆ˜๋Š” ๋„ค ๋ฐฉํ–ฅ์˜ ๊ฐ’์„ ๊ฐ๊ฐ ์ง€์ •ํ•œ๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Padding(
  padding: const EdgeInsets.all(40.0),
  child: Container(
    color: Colors.red,
  ),
),

 

Align

๐Ÿ’ฌ  ์ž์‹ ์œ„์ ฏ์˜ ์ •๋ ฌ ๋ฐฉํ–ฅ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  ์ž์‹ ์œ„์ ฏ์„ ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” alignment ํ”„๋กœํผํ‹ฐ์— ์ •๋ ฌํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฐฉํ–ฅ์„ ์ •์˜ํ•ด์•ผ ํ•œ๋‹ค.

Align(
  alignment: Alignment.bottomRight,
  child: [์œ„์ ฏ],
),

๐Ÿ’ฌ  Alignment ํด๋ž˜์Šค์— ์ •์˜๋˜์–ด ์žˆ๋Š” ์ •๋ ฌ ๊ด€๋ จ ์ƒ์ˆ˜๋“ค

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Align(
  alignment: Alignment.bottomRight,
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

 

Expanded

๐Ÿ’ฌ  ์ž์‹ ์œ„์ ฏ์˜ ํฌ๊ธฐ๋ฅผ ์ตœ๋Œ€ํ•œ์œผ๋กœ ํ™•์žฅ์‹œ์ผœ์ฃผ๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  ์—ฌ๋Ÿฌ ์œ„์ ฏ์„ ๋™์‹œ์— ์ ์šฉํ•˜๋ฉด flex ํ”„๋กœํผํ‹ฐ์— ์ •์ˆซ๊ฐ’์„ ์ง€์ •ํ•˜์—ฌ ๋น„์œจ์„ ์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ธฐ๋ณธ๊ฐ’์„ 1์ด๋‹ค.

Column(
  children: <Widget>[
    Expanded(
      flex: [๋น„์œจ],  // ๊ธฐ๋ณธ๊ฐ’์„ 1
      child: [์œ„์ ฏ],
    ),
    Expanded(
      child: [์œ„์ ฏ],
    ),
    Expanded(
      child: [์œ„์ ฏ],
    ),
  ],
),

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
),

 

Card

๐Ÿ’ฌ  ์นด๋“œ ํ˜•ํƒœ์˜ ๋ชจ์–‘์„ ์ œ๊ณตํ•˜๋Š” ์œ„์ ฏ์ด๋‹ค.

๐Ÿ’ฌ  ๊ธฐ๋ณธ์œผ๋กœ ํฌ๊ธฐ๊ฐ€ 0์ด๋ฏ€๋กœ ์ž์‹ ์œ„์ ฏ์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
  elevation: [์‹ค์ˆซ๊ฐ’],  // ๊ทธ๋ฆผ์ž ๊นŠ์ด
  child: [์œ„์ ฏ],
),

โ—ป๏ธ  elevation ํ”„๋กœํผํ‹ฐ๋ฅผ ์ง€์ •ํ•˜์—ฌ ๊ทธ๋ฆผ์ž์˜ ๊นŠ์ด๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

โ—ป๏ธ  shape ํ”„๋กœํผํ‹ฐ๋Š” ์นด๋“œ ๋ชจ์–‘์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋ฉฐ, ์—ฌ๊ธฐ์„œ๋Š” RoundedRectangleBorder ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ง€์ •ํ–ˆ๋‹ค.

โ—ป๏ธ  borderRadius ํ”„๋กœํผํ‹ฐ์— BorderRadius.circular() ๋ฉ”์„œ๋“œ๋ฅผ ์ง€์ •ํ•˜์—ฌ ์นด๋“œ ๋ชจ์„œ๋ฆฌ์˜ ๋‘ฅ๊ทผ ์ •๋„๋ฅผ ์‹ค์ˆซ๊ฐ’์œผ๋กœ ์กฐ์ ˆํ•œ๋‹ค. ๊ฐ’์ด ํด์ˆ˜๋ก ๋” ๋‘ฅ๊ธ€๊ฒŒ ๋œ๋‹ค.

์˜ˆ์ œ

๋”๋ณด๊ธฐ
Center(
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    elevation: 4.0,  // ๊ทธ๋ฆผ์ž ๊นŠ์ด
    child: Container(
      width: 200,
      height: 200,
    ),
  ),
),

 

Flexible

๐Ÿ’ฌ  ๊ฐ ์œ„์ ฏ์ด ์ž”์—ฌ ๊ณต๊ฐ„์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ’ฌ  flex ํ”„๋กœํผํ‹ฐ๋ฅผ ํ†ตํ•ด Flexible ๊ฐ„์˜ ๋น„์œจ์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ’ฌ  ๋‚จ์€ ๊ณต๊ฐ„์— ์ตœ๋Œ€๋กœ ํ™•์žฅ๋˜๊ธฐ๋ฅผ ์›ํ•˜๋Š” ๊ฒฝ์šฐ Flexible์˜ fit ์ธ์ž๋ฅผ FlexFit.tight๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ Expanded๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

Column(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.orangeAccent,
      ),
    ),
    Flexible(
      flex: 3,
      child: Container(
        color: Colors.lightBlueAccent,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.blueAccent,
      ),
    ),
  ],
),

 

FittedBox

๐Ÿ’ฌ  ์ž์‹ ์œ„์ ฏ์ด ๋ถ€๋ชจ ์œ„์ ฏ์˜ ์‚ฌ์ด์ฆˆ์— ๊ฝ‰ ์ฐจ๋„๋ก ๋ฐฐ์น˜ํ•œ๋‹ค.

Container(
  color: Colors.blue,
  width: 300,
  height: 300,
  child: FittedBox(
    child: Center(
      child: Text(
        "FittedBox",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    ),
  ),
),

 

Visibility

๐Ÿ’ฌ  ์œ„์ ฏ์˜ ํ™œ์„ฑ/๋น„ํ™œ์„ฑ ์—ฌ๋ถ€๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.

Visibility(
  visible: bool,
  child: Widget
),

 

Opacity

Opacity(
  child: _image,
  opacity: 0.3,
),

๐Ÿ’ฌ  ์œ„์ ฏ์— ํˆฌ๋ช…๋„๋ฅผ ์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

 

PlaceHolder

๐Ÿ’ฌ  ๋‚˜์ค‘์— ์œ„์ ฏ์ด ๋“ค์–ด๊ฐˆ ๊ณต๊ฐ„์„ ์ž„์‹œ๋กœ ๋‚จ๊ฒจ๋‘๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

Placeholder(
  fallbackWidth: 100,
  fallbackHeight: 100,
),

 

FractionallySizedBox

๐Ÿ’ฌ  ๋ถ€๋ชจ ์œ„์ ฏ์˜ ์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ๋กœ ์ž์‹ ์œ„์ ฏ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

Container(
  width: 200.0,
  height: 200.0,
  color: const Color.fromARGB(255, 235, 237, 237),
  child: FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.25,
    child: ElevatedButton(
      onPressed: () {  },
      child: const Text('Button'),
    ),
  ),
),

 

์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'Flutter > Concept' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ Flutter ] ์ฟ ํผํ‹ฐ๋…ธ ๋””์ž์ธ  (0) 2021.12.29
[ Flutter ] ์• ๋‹ˆ๋ฉ”์ด์…˜  (0) 2021.12.29
[ Flutter ] ๋‹ค์ด์–ผ๋กœ๊ทธ  (0) 2021.12.29
[ Flutter ] ๋ฒ„ํŠผ  (0) 2021.12.28
[ Flutter ] ์ดˆ๊ธฐ ์„ค์ •  (0) 2021.12.20
    'Flutter/Concept' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [ Flutter ] ์• ๋‹ˆ๋ฉ”์ด์…˜
    • [ Flutter ] ๋‹ค์ด์–ผ๋กœ๊ทธ
    • [ Flutter ] ๋ฒ„ํŠผ
    • [ Flutter ] ์ดˆ๊ธฐ ์„ค์ •
    Design-loving front-end engineer
    Design-loving front-end engineer
    ๋””์ž์ธ์— ๊ด€์‹ฌ์ด ๋งŽ์€ ๋ชจ๋ฐ”์ผ ์•ฑ ์—”์ง€๋‹ˆ์–ด Ryong์ž…๋‹ˆ๋‹ค.

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