์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- SwiftUI
- visionOS
- realm
- XCTest
- Flutter
- Xcode
- Kuring
- node.js
- BOJ
- CollectionView
- swift
- RxSwift
- SnapKit
- designpattern
- BFS
- raywenderlich
- Lv2
- combine
- ํจ์คํธ์บ ํผ์ค
- rxcocoa
- UIKit
- Swfit
- TCA
- ๋ฐฑ์ค
- MVVM
- arkit
- ios
- tableView
- ํ๋ก๊ทธ๋๋จธ์ค
- reactorkit
- Today
- Total
lgvv98
[flutter] 21๊ฐ | Column, Row ์์ ฏ ๋ณธ๋ฌธ
โ ์ด๋ฒ ์๊ฐ์๋ Column ์์ ฏ๊ณผ Row ์์ ฏ์ ๋ํด์ ์์๋ณผ ์์ ์ด์ผ
์ฌ์ฐ๋๊น ์ฑ ๋ณด๊ธฐ
โญ๏ธ ๋ ์ด์์์ ํ์ต์ด๋ ๊ธํ ๋, ํ ์คํธ ํ์ง ์๊ณ ์ด๋ ๊ฒ ๋๋๊ฑธ ํ์ธํ ์ ์๋ ์ข์ ์ฌ์ดํธ๊ฐ ์๋ค.
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
โ Columns ์์ ฏ์ ์ธ๋ก์ถ์ ๊ฐ๋ฅํ ๋ชจ๋ ๊ธธ์ด๋ฅผ ๊ฐ๊ณ ๊ฐ๋ก์ถ์ ๊ธธ์ด๋ง ์ ํ๋๋ค.
import 'package:flutter/material.dart'; // ๋ฐ์คํฌํ, ์ฑ ๋ฑ์ ๊ณ ๋ฃจ UI๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๊ตฌ๊ธ์ด ์ ๊ณตํด์ฃผ๋ ํจํค
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// ์ค์ง์ ์ผ๋ก ๋ชจ๋ ์ฑ์ ๊ฐ์ธ๊ณ ์๋ค.
title: 'Appbar', // ์ฑ์ ์ด์นญํ๋ ์ด๋ฆ -> ์ค๋งํธ ํฐ ์ฑ์์ ์ต๊ทผ ์ฌ์ฉํ ์ฑ ๋ณด์ฌ์ค ๋์ ์ด๋ฆ
theme:
ThemeData(primarySwatch: Colors.green // ํน์ ์์ ์์ฉ๋ค์ ๊ธฐ๋ณธ ์์์ผ๋ก ์ง์ ํด์ ์ฌ์ฉํ๊ฒ
),
home: MyPage(), // home์ ์ฑ์ด ์คํ๋ ๋ ๊ฐ์ฅ๋จผ์ ๋ณด์ฌ์ฃผ๋ ํ์ด
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // ์นผ๋ผ์ ์ค์์ ์์น
children: [
Container(
width: 100,
height : 100,
color : Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height : 100,
color : Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height : 100,
color : Colors.red,
child: Text('container 3'),
),
],
),
),
),
);
}
}
๊ฐ์ด๋ฐ ์ฌ์ง์ ์ผํฐ๋ฅผ ํ์์๋ Column ์์ ฏ์ด ์ธ๋ก์ถ์ ๋ค ์ฐจ์งํด์ Center ์์ ฏ์ด ์ธ๋ก์ถ์ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋ฐฉํฅ์ผ๋ก ๋ณด์ฌ์ฃผ์ง ๋ชปํ๋ค.
โ ๊ทธ๋ ๋ค๋ฉด Column ์์ ฏ์ด ์ธ๋ก์ถ์ ๋ค ์ฐจ์งํ์ง ๋ชปํ๊ฒ ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น?
mainAxisSize : MainAxisSize.min ์ผ๋ก ์ฝ๋๋ฅผ ๋ณ๊ฒฝํด์ค๋ค.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Center(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ์นผ๋ผ์ ์ค์์ ์์น
mainAxisSize: MainAxisSize.min, // ์นผ๋ผ์ด ์ ์ฒด ๋ค ์ฐจ์ง ์ํ๋๋ก ๋ง๋ค๊ธฐ
children: [
Container(
width: 100,
height : 100,
color : Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height : 100,
color : Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height : 100,
color : Colors.red,
child: Text('container 3'),
),
],
),
),
),
);
}
}
โ ์ด๋ฒ์๋ verticalDirection๋ฅผ ์ด์ฉํ์ฌ ์๋๋ถํฐ ์ ๋ ฌ๋๋๋ก ๋ง๋ค์ด๋ณด์
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
],
),
),
);
}
}
โ ๋ค๋ฅธ ์์ฑ์ ๋ํด ๋ ์์๋ณด์
mainAxisAlignment
- MainAxisAlignment.spaceEvenly : ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์ ( ์ฒ์์ด๋ ๋ ๊ณต๊ฐ๋ ํฌํจ )
- MainAxisAlignment.spaceBetween : ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์ ( ์ฒ์์ด๋ ๋ ๊ณต๊ฐ์ ์ ์ธ )
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
//verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
//mainAxisAlignment : MainAxisAlignment.spaceEvenly, // ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์
mainAxisAlignment: MainAxisAlignment.spaceBetween , // ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
],
),
),
);
}
}
crossAxisAlignment
- CrossAxisAlignment.end : ์ปจํ ์ด๋์ ๋์ ๋ง๊ฒ ์ ๋ ฌ
๐ก ํ๋ฌํฐ ์์๋ width๊ฐ ํ๋ฉด์ ํฌ๊ธฐ ๋ฐ์ผ๋ก ๋ฒ์ด๋๋ ๊ทธ ์ด์์ผ๋ก ์ปค์ง์ง ์๊ณ ์์์ ํ๋ฉด ๋ ํฌ๊ธฐ์ ๋ง์ถ๊ฒ ๋๋ค.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
//verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
//mainAxisAlignment : MainAxisAlignment.spaceEvenly, // ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์
//mainAxisAlignment: MainAxisAlignment.spaceBetween , // ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์
//crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
],
),
),
);
}
}
- CrossAxisAlignment.stretch : ํ๋ฉด์ ๊ฐ๋ก์ถ์ ๊ฐ๋ฅํํ ์ต๋๋ก ๋๋ฆผ
๐ธ width๋ ๋ฌด์๋๋ค. ์ฆ, ์ ์ฉ ์๋ผ
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
//verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
//mainAxisAlignment : MainAxisAlignment.spaceEvenly, // ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์
//mainAxisAlignment: MainAxisAlignment.spaceBetween , // ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์
//crossAxisAlignment: CrossAxisAlignment.end, // ์นผ๋ผ์ ๋์ ๋ง์ถค
crossAxisAlignment: CrossAxisAlignment.stretch, // ์นผ๋ผ์ ๊ฐ๋ก์ถ์ ์ต๋๋ก - ๋์ width ์ ์ฉ์๋ผ
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
],
),
),
);
}
}
โ invisible Container ํ์ฉํ๊ธฐ
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
//verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
//mainAxisAlignment : MainAxisAlignment.spaceEvenly, // ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์
//mainAxisAlignment: MainAxisAlignment.spaceBetween , // ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์
//crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
Container( // invisible Container
width: double.infinity, // ๊ฐ ์ ์๋๋ฐ๊น์ง ๊ฐ๋ก์ถ์ผ๋ก ํ์ฅํ๋ผ
height: 20,
)
],
),
),
);
}
}
invisible container ๋ฅผ ํตํ์ฌ ์ปจํ ์ด๋๋ฅผ ๋๊น์ง ํ์ฅํ ์ ์๋ค.
โ๏ธ๊ทผ๋ฐ ์ด ๊ฐ๋ ์ด ์กฐ๊ธ ์์ํด์ ์ถ์์ ์ผ๋ก ์ดํดํ๋ฉด ๋ ์ฝ๊ฒ ๋ฐ์๋ค์ผ ์ ์๋ค.
โ SizedBox ๋ฅผ ์ด์ฉํด์ ๊ฐ๊ฒฉ ์ฃผ๊ธฐ
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Column(
//mainAxisAlignment: MainAxisAlignment.center, // ๊ฐ์ด๋ฐ ์ ๋ ฌ
//mainAxisSize: MainAxisSize.min, // ์นผ๋ผ ์ฌ์ด์ฆ ์ปจํ
์ด๋ ์ฌ์ด์ฆ ๋งํผ
//verticalDirection: VerticalDirection.up, // ์๋๋ถํฐ ์ ๋ ฌ
//mainAxisAlignment : MainAxisAlignment.spaceEvenly, // ์นผ๋ผ์์ ๊ฐ์ ๊ฐ๊ฒฉ๋งํผ ๋์์
//mainAxisAlignment: MainAxisAlignment.spaceBetween , // ๊ณต๊ฐ๋ง ์นผ๋ผ์์ ๋๋ ์
//crossAxisAlignment: CrossAxisAlignment.end, // ์นผ๋ผ์ ๋์ ๋ง์ถค
crossAxisAlignment: CrossAxisAlignment.stretch, // ์นผ๋ผ์ ๊ฐ๋ก์ถ์ ์ต๋๋ก - ๋์ width ์ ์ฉ์๋ผ
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: Text('container 1'),
),
SizedBox(
height: 30,
),
Container(
width: 100,
height: 100,
color: Colors.white,
child: Text('container 2'),
),
Container(
width: 100,
height: 100,
color: Colors.red,
child: Text('container 3'),
),
],
),
),
);
}
}
Row์์๋ height -> width๋ก ๋ฐ๊พผ๋ค.
โ Row๋ Column ๊ณผ ๋ฐ๋์ด๋ฏ๋ก ์์ ์ค๋ช ์ ๋ณด๊ณ ๋ฐ๋๋ก ์ ์ฉํ๋ค.
'flutter > ์ํ๋ง(๊ธฐ์ด)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[flutter] 23๊ฐ | Navigator ์ pushName ๋ฉ์๋ ์ดํดํ๊ธฐ (0) | 2021.08.16 |
---|---|
[flutter] 22๊ฐ | Navigator ์ดํดํ๊ธฐ (0) | 2021.08.16 |
[flutter] 20๊ฐ | ์ปจํ ์ด๋ ์์ ฏ (container widget) ๋์ง์ด ๋ณด๊ธฐ. (0) | 2021.08.13 |
[flutter] 19๊ฐ | ๋น๋ ์์ ฏ ์์ด ์ค๋ต๋ฐ ๋ง๋ค๊ธฐ ๋ฐ ํ ์คํธ ๋ฉ์์ง (0) | 2021.08.13 |
[flutter] 27๊ฐ(ํจ์น๊ฐ์ข) | ํ๋ฌํฐ 2.0 ๋ฒํผ (0) | 2021.08.13 |