Search

λ ˆμ΄μ•„μ›ƒ μœ„μ ―

λ ˆμ΄μ•„μ›ƒ μœ„μ ―

β€’
Container
β€’
Row
β€’
Column
β€’
Expanded
β€’
Stack
β€’
Center
β€’
Align
β€’
SizedBox
β€’
Padding
β€’
ListView
β€’
GridView
β€’
Card

Container

1 개의 μžμ‹ μœ„μ ―μ„ 담을 수 μžˆλŠ” λ°•μŠ€ ν˜•νƒœμ˜ μœ„μ ―

문법

Container( width: κ°€λ‘œ 크기 height: μ„Έλ‘œ 크기 color: 배경색 margin: μ™ΈλΆ€ μ—¬λ°± padding: λ‚΄λΆ€ μ—¬λ°± child: μžμ‹ μœ„μ ― decoration: λ°•μŠ€ μŠ€νƒ€μΌ )
Dart
볡사
속성
μ„€λͺ…
클래슀
width
μ»¨ν…Œμ΄λ„ˆμ˜ κ°€λ‘œ 크기λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.
double
height
μ»¨ν…Œμ΄λ„ˆμ˜ μ„Έλ‘œ 크기λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.
double
color
μ»¨ν…Œμ΄λ„ˆμ˜ 배경색을 μ§€μ •ν•©λ‹ˆλ‹€.
Color
margin
μ»¨ν…Œμ΄λ„ˆμ˜ μ™ΈλΆ€ 여백을 μ„€μ •ν•©λ‹ˆλ‹€.
EdgeInsets
padding
μ»¨ν…Œμ΄λ„ˆμ˜ λ‚΄λΆ€ 여백을 μ„€μ •ν•©λ‹ˆλ‹€.
EdgeInsets
child
μ»¨ν…Œμ΄λ„ˆ 내에 배치될 μžμ‹ μœ„μ ―μ„ μ§€μ •ν•©λ‹ˆλ‹€.
Widget
decoration
μ»¨ν…Œμ΄λ„ˆμ˜ μŠ€νƒ€μΌμ„ μ§€μ •ν•©λ‹ˆλ‹€.
BoxDecoration

μ˜ˆμ‹œ

Container( width: 200.0, // κ°€λ‘œ 크기 (μ˜΅μ…˜) height: 100.0, // μ„Έλ‘œ 크기 (μ˜΅μ…˜) color: Colors.blue, // 배경색 margin: EdgeInsets.all(16.0), // μ™ΈλΆ€ μ—¬λ°± padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0), // λ‚΄λΆ€ μ—¬λ°± child: Text('Hello, Container!'), // μžμ‹ μœ„μ ― )
Dart
볡사

Color

ν”ŒλŸ¬ν„°μ—μ„œ 색상을 ν‘œν˜„ν•˜λŠ” 클래슀
β€’
정적 μƒμ„±μžλ₯Ό μ‚¬μš©ν•˜μ—¬ 색상 생성
β€’
미리 μ •μ˜λœ 색상 μ‚¬μš©

정적 μƒμ„±μžλ₯Ό μ‚¬μš©ν•˜μ—¬ 색상 생성

Color myColor = Color.fromRGBO(255, 0, 0, 1.0); // 빨간색
Dart
볡사

미리 μ •μ˜λœ 색상 μ‚¬μš©

Color myColor = Colors.blue; // νŒŒλž€μƒ‰
Dart
볡사

EdgeInsets

ν”ŒλŸ¬ν„°μ—μ„œ 여백을 λ‚˜νƒ€λ‚΄λŠ” 클래슀
주둜, Container의 marginμ΄λ‚˜ padding 속성에 μ‚¬μš©λ©λ‹ˆλ‹€.

μ’…λ₯˜

μƒμ„±μž 및 λ©”μ†Œλ“œ
μ„€λͺ…
EdgeInsets.all(double)
λͺ¨λ“  λ°©ν–₯에 λ™μΌν•œ 여백을 μ§€μ •ν•©λ‹ˆλ‹€.
EdgeInsets.fromLTRB(left, top, right, bottom)
쒌, 상, 우, ν•˜μ— 각각 λ‹€λ₯Έ 여백을 μ§€μ •ν•©λ‹ˆλ‹€.
EdgeInsets.symmetric({vertical, horizontal})
μƒν•˜, 쒌우 각각 λ‹€λ₯Έ 여백을 μ§€μ •ν•©λ‹ˆλ‹€.
EdgeInsets.only({left, top, right, bottom})
각 λ°©ν–₯λ³„λ‘œ λ‹€λ₯Έ 여백을 μ§€μ •ν•©λ‹ˆλ‹€.

μ˜ˆμ‹œ

1.
λͺ¨λ“  λ°©ν–₯에 λ™μΌν•œ μ—¬λ°± 지정:
EdgeInsets.all(16.0) // λͺ¨λ“  λ°©ν–₯에 16.0의 μ—¬λ°±
Dart
볡사
2.
μƒν•˜μ’Œμš° 각각 λ‹€λ₯Έ μ—¬λ°± 지정:
EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0) // 쒌, 상, 우, ν•˜μ— 각각 λ‹€λ₯Έ μ—¬λ°±
Dart
볡사
3.
μƒν•˜, 쒌우 각각 λ‹€λ₯Έ μ—¬λ°± 지정:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0) // μƒν•˜, 쒌우 각각 λ‹€λ₯Έ μ—¬λ°±
Dart
볡사
4.
각 λ°©ν–₯λ³„λ‘œ λ‹€λ₯Έ μ—¬λ°± 지정:
EdgeInsets.only(top: 10.0, bottom: 20.0, left: 30.0, right: 40.0) // 각 λ°©ν–₯
Dart
볡사

maring, padding μ μš©ν•˜κΈ°

Container( margin: EdgeInsets.all(16.0), // λͺ¨λ“  λ°©ν–₯에 16.0의 μ—¬λ°± padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), // μƒν•˜, 쒌우 각각 λ‹€λ₯Έ μ—¬λ°± child: Text('Hello, EdgeInsets!'), )
Dart
볡사

BoxDecoration

μƒμž λͺ¨μ–‘μ˜ μž₯식을 μ§€μ •ν•˜λŠ” 클래슀
Container의 decoration 속성에 주둜 μ‚¬μš©λ©λ‹ˆλ‹€.
속성
μ„€λͺ…
color
μƒμžμ˜ 배경색을 μ§€μ •ν•©λ‹ˆλ‹€.
border
μƒμžμ˜ ν…Œλ‘λ¦¬(경계선)을 μ§€μ •ν•©λ‹ˆλ‹€.
borderRadius
μƒμžμ˜ λͺ¨μ„œλ¦¬λ₯Ό λ‘₯κΈ€κ²Œ λ§Œλ“­λ‹ˆλ‹€.
boxShadow
μƒμžμ— 그림자λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
gradient
μƒμžμ˜ 배경에 κ·ΈλΌλ””μ–ΈνŠΈλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
image
μƒμžμ˜ 배경에 이미지λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
1. κΈ°λ³Έ μ‚¬μš©:
BoxDecoration( color: Colors.blue, // 배경색 border: Border.all(color: Colors.red, width: 2.0), // 경계선 borderRadius: BorderRadius.circular(12.0), // λͺ¨μ„œλ¦¬μ˜ 반경 )
Dart
볡사
2. 그림자 μΆ”κ°€:
BoxDecoration( color: Colors.blue, // 배경색 border: Border.all(color: Colors.red, width: 2.0), // 경계선 borderRadius: BorderRadius.circular(12.0), // λͺ¨μ„œλ¦¬μ˜ 반경 boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2.0, 2.0), // 그림자의 μœ„μΉ˜ blurRadius: 5.0, // 그림자의 흐림 정도 ), ], )
Dart
볡사
3. κ·ΈλΌλ””μ–ΈνŠΈ μΆ”κ°€:
BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.blue, Colors.red], // κ·ΈλΌλ””μ–ΈνŠΈ 색상 ), )
Dart
볡사
4. 이미지 λ°°κ²½ μΆ”κ°€:
BoxDecoration( image: DecorationImage( image: AssetImage('assets/background.jpg'), fit: BoxFit.cover, ), )
Dart
볡사

Row

μ—¬λŸ¬κ°€μ§€ μš”μ†Œλ₯Ό ν–‰λ°©ν–₯(κ°€λ‘œ)둜 λ°°μΉ˜ν•˜λŠ” μœ„μ ―

mainAxisAlignment

μ£ΌμΆ• μ •λ ¬ 방식 Row 의 주좕은 κ°€λ‘œλ°©ν–₯
mainAxisAlignment
효과
start
μ‹œμž‘ 지점을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
center
κ°€μš΄λ°λ₯Ό κΈ°μ€€μœΌλ‘œ μ •λ ¬
end
끝 지점을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
spaceBetween
μ‹œμž‘κ³Ό 끝에 μ •λ ¬ν•˜κ³ , 쀑간을 λ™μΌν•œ κ°„κ²©μœΌλ‘œ λΆ„λ°°
spaceAround
각 μžμ‹μ˜ μ£Όμœ„μ— λ™μΌν•œ κ°„κ²©μœΌλ‘œ λΆ„λ°°
spaceEvenly
λ™μΌν•œ κ°„κ²©μœΌλ‘œ λͺ¨λ“  μžμ‹μ„ λΆ„λ°°

crossAxisAlignment

ꡐ차좕 μ •λ ¬ 방식 Row 의 ꡐ차좕은 μ„Έλ‘œλ°©ν–₯
crossAxisAlignment
효과
start
μœ„μͺ½μ„ κΈ°μ€€μœΌλ‘œ μ •λ ¬
center
쀑앙을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
end
μ•„λž˜μͺ½μ„ κΈ°μ€€μœΌλ‘œ μ •λ ¬

문법

Row( mainAxisAlignment: MainAxisAlignment.start, // κ°€λ‘œ μ •λ ¬ (μ˜΅μ…˜) crossAxisAlignment: CrossAxisAlignment.center, // μ„Έλ‘œ μ •λ ¬ (μ˜΅μ…˜) mainAxisSize: MainAxisSize.max, // Row의 크기 지정 (μ˜΅μ…˜) children: <Widget>[ // μžμ‹ μœ„μ ―λ“€ ], )
Dart
볡사

μ˜ˆμ‹œ

Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Container(color: Colors.red, width: 50.0, height: 50.0), Container(color: Colors.blue, width: 50.0, height: 50.0), Container(color: Colors.green, width: 50.0, height: 50.0), ], )
Dart
볡사

Column

μ—¬λŸ¬κ°€μ§€ μš”μ†Œλ₯Ό μ—΄λ°©ν–₯(μ„Έλ‘œ)둜 λ°°μΉ˜ν•˜λŠ” μœ„μ ―

mainAxisAlignment

μ£ΌμΆ• μ •λ ¬ 방식 Column 의 주좕은 μ„Έλ‘œλ°©ν–₯
mainAxisAlignment
효과
start
μ‹œμž‘ 지점을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
center
κ°€μš΄λ°λ₯Ό κΈ°μ€€μœΌλ‘œ μ •λ ¬
end
끝 지점을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
spaceBetween
μ‹œμž‘κ³Ό 끝에 μ •λ ¬ν•˜κ³ , 쀑간을 λ™μΌν•œ κ°„κ²©μœΌλ‘œ λΆ„λ°°
spaceAround
각 μžμ‹μ˜ μ£Όμœ„μ— λ™μΌν•œ κ°„κ²©μœΌλ‘œ λΆ„λ°°
spaceEvenly
λ™μΌν•œ κ°„κ²©μœΌλ‘œ λͺ¨λ“  μžμ‹μ„ λΆ„λ°°

crossAxisAlignment

ꡐ차좕 μ •λ ¬ 방식 Column 의 ꡐ차좕은 κ°€λ‘œλ°©ν–₯
crossAxisAlignment
효과
start
μ’ŒμΈ‘μ„ κΈ°μ€€μœΌλ‘œ μ •λ ¬
center
쀑앙을 κΈ°μ€€μœΌλ‘œ μ •λ ¬
end
μš°μΈ‘μ„ κΈ°μ€€μœΌλ‘œ μ •λ ¬
stretch
μžμ‹λ“€μ„ μ΅œλŒ€ 크기둜 늘리고 μ„Έλ‘œλ‘œ μ •λ ¬

문법

Column( mainAxisAlignment: MainAxisAlignment.start, // μ„Έλ‘œ μ •λ ¬ (μ˜΅μ…˜) crossAxisAlignment: CrossAxisAlignment.center, // κ°€λ‘œ μ •λ ¬ (μ˜΅μ…˜) mainAxisSize: MainAxisSize.max, // Column의 크기 지정 (μ˜΅μ…˜) children: <Widget>[ // μžμ‹ μœ„μ ―λ“€ ], )
Dart
볡사

μ˜ˆμ‹œ

Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ Container(color: Colors.red, width: 50.0, height: 50.0), Container(color: Colors.blue, width: 50.0, height: 50.0), Container(color: Colors.green, width: 50.0, height: 50.0), ], )
Dart
볡사

Expanded

λΆ€λͺ¨ μœ„μ ―μ— λŒ€ν•˜μ—¬, 가지고 μžˆλŠ” μ—¬μœ  곡간을 λͺ¨λ‘ μ°¨μ§€ν•˜λŠ” μœ„μ ―
Expanded μœ„μ ―μ€ μžμ‹ μœ„μ ―μ΄ 가지고 μžˆλŠ” μ—¬μœ  곡간을 λͺ¨λ‘ μ°¨μ§€ν•˜λ„λ‘ λ§Œλ“œλŠ” 역할을 ν•©λ‹ˆλ‹€. 주둜 Row λ˜λŠ” Column λ‚΄μ—μ„œ μžμ‹ μœ„μ ―μ— μ μš©λ˜μ–΄ μ‚¬μš©λ©λ‹ˆλ‹€.

μ˜ˆμ‹œ

Row( children: [ Container(width: 50, height: 50, color: Colors.red), Expanded( child: Container(color: Colors.blue), ), Container(width: 50, height: 50, color: Colors.green), ], )
Dart
볡사
μœ„ μ˜ˆμ‹œμ—μ„œ ExpandedλŠ” νŒŒλž€μƒ‰ μ»¨ν…Œμ΄λ„ˆκ°€ λ‚˜λ¨Έμ§€ κ°€λ‘œ 곡간을 λͺ¨λ‘ μ°¨μ§€ν•˜λ„λ‘ ν•©λ‹ˆλ‹€.

Stack

μžμ‹ μœ„μ ―λ“€μ„ κ²Ήμ³μ„œ λ°°μΉ˜ν•˜λŠ” μœ„μ ―
Stack μœ„μ ―μ€ μžμ‹ μœ„μ ―μ„ 겹치게 λ°°μΉ˜ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. 각 μžμ‹ μœ„μ ―μ€ μœ„μΉ˜ 및 크기λ₯Ό μ§€μ •ν•˜μ—¬ μŒ“μΌ 수 μžˆμŠ΅λ‹ˆλ‹€.

μ˜ˆμ‹œ

Stack( children: [ Positioned( top: 10, left: 10, child: Container(width: 50, height: 50, color: Colors.red), ), Positioned( top: 20, left: 20, child: Container(width: 50, height: 50, color: Colors.blue), ), ], )
Dart
볡사
μœ„ μ˜ˆμ‹œμ—μ„œ Stack은 빨간색과 νŒŒλž€μƒ‰ μ»¨ν…Œμ΄λ„ˆλ₯Ό κ²Ήμ³μ„œ ν‘œμ‹œν•©λ‹ˆλ‹€.

Center

μžμ‹ μœ„μ ―μ„ ν™”λ©΄μ˜ κ°€μš΄λ° μ •λ ¬ν•˜λŠ” μœ„μ ―
Center μœ„μ ―μ€ μžμ‹ μœ„μ ―μ„ ν™”λ©΄μ˜ κ°€μš΄λ°μ— μ •λ ¬ν•©λ‹ˆλ‹€.

μ˜ˆμ‹œ

Center( child: Container(width: 100, height: 100, color: Colors.green), )
Dart
볡사
μœ„ μ˜ˆμ‹œμ—μ„œ CenterλŠ” μ΄ˆλ‘μƒ‰ μ»¨ν…Œμ΄λ„ˆλ₯Ό ν™”λ©΄ κ°€μš΄λ°μ— μ •λ ¬ν•©λ‹ˆλ‹€.

Align

μžμ‹ μœ„μ ―μ„ 정해진 μœ„μΉ˜μ— λ°°μΉ˜ν•˜λŠ” μœ„μ ―
Align μœ„μ ―μ€ μžμ‹ μœ„μ ―μ„ 정해진 μœ„μΉ˜μ— λ°°μΉ˜ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. alignment 속성을 톡해 μœ„μΉ˜λ₯Ό μ‘°μ ˆν•  수 μžˆμŠ΅λ‹ˆλ‹€.
속성값
μ„€λͺ…
topLeft
쒌츑 상단
topCenter
상단 쀑앙
topRight
우츑 상단
centerLeft
쒌츑 쀑앙
center
쀑앙
centerRight
우츑 쀑앙
bottomLeft
쒌츑 ν•˜λ‹¨
bottomCenter
ν•˜λ‹¨ 쀑앙
bottomRight
우츑 ν•˜λ‹¨

μ˜ˆμ‹œ

Align( alignment: Alignment(0.5, 0.5), child: Container(width: 50, height: 50, color: Colors.orange), )
Dart
볡사
μœ„ μ˜ˆμ‹œμ—μ„œ Align은 μ˜€λ Œμ§€μƒ‰ μ»¨ν…Œμ΄λ„ˆλ₯Ό ν™”λ©΄μ˜ κ°€λ‘œμ™€ μ„Έλ‘œ 쀑간에 μœ„μΉ˜ν•˜λ„λ‘ ν•©λ‹ˆλ‹€. Alignment 클래슀의 값을 μ‘°μ ˆν•˜μ—¬ λ‹€μ–‘ν•œ μœ„μΉ˜λ‘œ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

SizedBox

κ³ μ •λœ 크기의 곡간을 μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” μœ„μ ―
주둜 여백을 λ§Œλ“€κ±°λ‚˜ μ •ν™•ν•œ 크기의 μƒμžλ₯Ό λ§Œλ“€μ–΄μ•Ό ν•  λ•Œ μœ μš©ν•©λ‹ˆλ‹€. Container와 달리 λ°μ½”λ ˆμ΄μ…˜ 없이 크기만 μ§€μ •ν•˜λŠ” κ°„λ‹¨ν•œ μœ„μ ―μž…λ‹ˆλ‹€.

문법

SizedBox( width: 100.0, // κ°€λ‘œ 크기 (μ˜΅μ…˜) height: 50.0, // μ„Έλ‘œ 크기 (μ˜΅μ…˜) child: YourWidget(), // 크기가 μ§€μ •λœ μœ„μ ― (μ˜΅μ…˜) )
Dart
볡사

μ˜ˆμ‹œ

SizedBox( width: 200.0, height: 100.0, child: Container( color: Colors.blue, child: Center( child: Text('Hello, SizedBox!'), ), ), )
Dart
볡사
μœ„μ˜ μ˜ˆμ‹œ μ½”λ“œμ—μ„œλŠ” SizedBox둜 크기가 200x100인 μƒμžλ₯Ό λ§Œλ“€κ³ , κ·Έ μ•ˆμ— Containerλ₯Ό λ„£μ–΄ νŒŒλž€μƒ‰μœΌλ‘œ μ±„μš°κ³  κ°€μš΄λ°μ— ν…μŠ€νŠΈλ₯Ό λ°°μΉ˜ν•œ μ˜ˆμ‹œκ°€ μžˆμŠ΅λ‹ˆλ‹€. width와 heightλ₯Ό μ‚¬μš©ν•˜μ—¬ 크기λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

Padding

μžμ‹ μœ„μ ― μ£Όμœ„μ— 여백을 μΆ”κ°€ν•˜λŠ” μœ„μ ―

문법

Padding( padding: EdgeInsets.all(16.0), // μ—¬λ°±μ˜ 크기λ₯Ό 지정 (μ˜΅μ…˜) child: YourWidget(), // 여백이 좔가될 μœ„μ ― (ν•„μˆ˜) )
Dart
볡사

μ˜ˆμ‹œ

Padding( padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0), child: Container( color: Colors.green, child: Center( child: Text('Hello, Padding!'), ), ), )
Dart
볡사
μœ„μ˜ μ˜ˆμ‹œ μ½”λ“œμ—μ„œλŠ” Padding으둜 수직으둜 20.0, μˆ˜ν‰μœΌλ‘œ 10.0의 여백을 μΆ”κ°€ν•œ ν›„, κ·Έ μ•ˆμ— Containerλ₯Ό λ„£μ–΄ μ΄ˆλ‘μƒ‰μœΌλ‘œ μ±„μš°κ³  κ°€μš΄λ°μ— ν…μŠ€νŠΈλ₯Ό λ°°μΉ˜ν•œ μ˜ˆμ‹œκ°€ μžˆμŠ΅λ‹ˆλ‹€. padding 속성을 μ‚¬μš©ν•˜μ—¬ μ—¬λ°±μ˜ 크기λ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

ListView

슀크둀 κ°€λŠ₯ν•œ μ„Έλ‘œ λͺ©λ‘μ„ λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” μœ„μ ―

ListTile

리슀트 μ•„μ΄ν…œμ„ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” μœ„μ ―
속성
μ„€λͺ…
νƒ€μž…
leading
μ•„μ΄ν…œμ˜ μ‹œμž‘ 뢀뢄에 μœ„μΉ˜ν•˜λŠ” μœ„μ ―
Widget
title
μ•„μ΄ν…œμ˜ 제λͺ©μ„ λ‚˜νƒ€λ‚΄λŠ” ν…μŠ€νŠΈ μœ„μ ―
Widget
subtitle
μ•„μ΄ν…œμ˜ λΆ€μ œλͺ©μ„ λ‚˜νƒ€λ‚΄λŠ” ν…μŠ€νŠΈ μœ„μ ―
Widget
trailing
μ•„μ΄ν…œμ˜ 끝 뢀뢄에 μœ„μΉ˜ν•˜λŠ” μœ„μ ―
Widget
onTap
μ•„μ΄ν…œμ΄ νƒ­λ˜μ—ˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ” 콜백 ν•¨μˆ˜
void Function()
selected
μ•„μ΄ν…œμ΄ μ„ νƒλ˜μ—ˆλŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” λΆˆλ¦¬μ–Έ κ°’
bool
contentPadding
μ•„μ΄ν…œμ˜ λ‚΄μš© μ£Όμœ„μ˜ 여백을 μ§€μ •ν•˜λŠ” 속성
EdgeInsets
enabled
μ•„μ΄ν…œμ΄ ν™œμ„±ν™”λ˜μ—ˆλŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” λΆˆλ¦¬μ–Έ κ°’
bool

문법

ListView( children: <Widget>[ // 리슀트 μ•„μ΄ν…œλ“€... ], )
Dart
볡사

속성

속성
μ„€λͺ…
νƒ€μž…
children
ListView에 포함될 μœ„μ ―λ“€μ˜ λͺ©λ‘
List<Widget>
padding
λͺ©λ‘ μ£Όμœ„μ— μΆ”κ°€λ˜λŠ” μ—¬λ°±
EdgeInsets
shrinkWrap
λ¦¬μŠ€νŠΈκ°€ μžμ‹ μ˜ 컨텐츠 크기에 맞게 μΆ•μ†Œλ˜λŠ”μ§€ μ—¬λΆ€
bool

μ˜ˆμ‹œ

ListView( children: <Widget>[ ListTile( leading: Icon(Icons.map), title: Text('Map'), ), ListTile( leading: Icon(Icons.photo), title: Text('Album'), ), // 좔가적인 리슀트 μ•„μ΄ν…œλ“€... ], )
Dart
볡사

GridView

κ·Έλ¦¬λ“œ ν˜•νƒœμ˜ μ•„μ΄ν…œλ“€μ„ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•œ 슀크둀 κ°€λŠ₯ν•œ μœ„μ ―

문법

GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0, ), children: <Widget>[ // κ·Έλ¦¬λ“œ μ•„μ΄ν…œλ“€... ], )
Dart
볡사

속성

속성
μ„€λͺ…
νƒ€μž…
gridDelegate
κ·Έλ¦¬λ“œμ˜ λ ˆμ΄μ•„μ›ƒ 및 간격을 μ •μ˜ν•˜λŠ” 델리게이트
SliverGridDelegate
children
GridView에 포함될 μœ„μ ―λ“€μ˜ λͺ©λ‘
List<Widget>
padding
κ·Έλ¦¬λ“œ μ£Όμœ„μ— μΆ”κ°€λ˜λŠ” μ—¬λ°±
EdgeInsets
shrinkWrap
κ·Έλ¦¬λ“œκ°€ μžμ‹ μ˜ 컨텐츠 크기에 맞게 μΆ•μ†Œλ˜λŠ”μ§€ μ—¬λΆ€
bool

μ˜ˆμ‹œ

GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0, ), itemCount: 10, itemBuilder: (BuildContext context, int index) { return Card( child: Center( child: Text('Item $index'), ), ); }, )
Dart
볡사

Card

Material Design μŠ€νƒ€μΌμ˜ ν‘œλ©΄μ„ 가지고 μžˆλŠ” μ»¨ν…Œμ΄λ„ˆ

문법

Card( child: // μΉ΄λ“œ λ‚΄μš©, )
Dart
볡사

속성

속성
μ„€λͺ…
νƒ€μž…
child
μΉ΄λ“œ 내뢀에 ν‘œμ‹œλ˜λŠ” μœ„μ ―
Widget
color
μΉ΄λ“œμ˜ 배경색
Color
elevation
그림자 높이
double
shape
μΉ΄λ“œμ˜ λͺ¨μ–‘ 지정
ShapeBorder

μ˜ˆμ‹œ

Card( elevation: 4.0, child: ListTile( leading: Icon(Icons.album), title: Text('Title'), subtitle: Text('Subtitle'), ), )
Dart
볡사