[flutter] widget 1 : ํ๋ฉด ๋ฐฐ์น๋ฅผ ์ํ ๋ ์ด์์
์์ ฏ ์ค ํ๋ฉด์ ๊ตฌ์ฑํ๋ ๋ ์ด์์์ ๋ง๋๋ ๊ธฐ๋ณธ ์์ ฏ๋ค์ธ container, column, row
1. Container
ํ๋์ ์์์ ๊ฐ์ง๋ ๋ ์ด์์ ์์ ฏ. ์๋ฌด๊ฒ๋ ์๋ค.
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
์์ ๊ฐ์ ๋ค์ํ ์์ฑ์ ๊ฐ์ ธ ๋ค์ํ ์์ฉ์ด ๊ฐ๋ฅํ๋ค. child๋ฅผ ์ด์ฉํด ๋ ๋ค๋ฅธ ์์ ฏ์ ์์์ผ๋ก ๊ฐ์ง ์ ์๋ค.
padding์ด๋ margin ๋ถ๋ถ์์ EdgeInsets.only, EdgeInsets.all, EdgeInsets.symmetric ๋ฑ์ ๊ธฐ๋ฅ์ ์ด์ฉํด ์ฌ๋ฐฑ์ ์ค์ ํ ์ ์๋ค.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch : Colors.blue,),
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar : AppBar(
title : Text("hello!"),
),
body : Container(
color : Colors.red,
width:150,
height:150,
),
);
}
}
2. 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, children์ด ์ฃผ์ ์์ฑ.
children์๋ ์ฌ๋ฌ widget list๋ฅผ ์ง์ ๊ฐ๋ฅ. column์ด๋ผ ์์ ฏ๋ค์ด ์ธ๋ก๋ก ๋ฐฐ์ด๋จ.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch : Colors.blue,),
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar : AppBar(
title : Text("hello!"),
),
body : Column(
children: <Widget>[
Container(
color : Colors.amber,
width : 150,
height : 100,
margin : const EdgeInsets.all(8.0),
),
Container(
color : Colors.blue,
width : 150,
height : 100,
margin : const EdgeInsets.all(8.0),
),
Container(
color : Colors.yellow,
width : 150,
height : 100,
margin : const EdgeInsets.all(8.0),
),
]
),
);
}
}
3. row
์ํ ๋ฐฉํฅ์ผ๋ก ์์ ฏ๋ค์ ๋ฐฐ์นํ๋ ๋ ์ด์์ ์์ ฏ.
Row({
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, children์ด ์ฃผ์ ์์ฑ.
column๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก children์๋ ์ฌ๋ฌ widget list๋ฅผ ์ง์ ๊ฐ๋ฅ. row์ด๋ผ ์์ ฏ๋ค์ด ๊ฐ๋ก๋ก ๋ฐฐ์ด๋จ.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch : Colors.blue,),
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar : AppBar(
title : Text("hello!"),
),
body : Row(
mainAxisSize : MainAxisSize.max,
children: <Widget>[
Container(
color : Colors.amber,
width : 100,
height : 100,
margin : const EdgeInsets.all(8.0),
),
Container(
color : Colors.blue,
width : 100,
height : 100,
margin : const EdgeInsets.all(8.0),
),
Container(
color : Colors.yellow,
width : 100,
height : 100,
margin : const EdgeInsets.all(8.0),
),
]
),
);
}
}
column๊ณผ row์ฒ๋ผ ๋ฐฉํฅ์ฑ์ด ์๋ ์์ ฏ์ mainAxis์ crossAxis ์์ฑ์ด ์๋ค. ์ด๋ ต๊ฒ ์๊ฐํ ๊ฑฐ ์์ด column์ด๋ฉด ์์ง์ผ๋ก ๋ฐฐ์ดํ๋ ์์ง์ด ์ฃผ(main) ์ถ(axis), ์ํ์ด ํก์ถ (CrossAxis)์ด ๋๋ค. row๋ฉด ๋ฐ๋๊ฐ ๋๊ฒ ๋ค.
๋ ์์ธํ ์ ๋ ฌ์ ์๋์ ๊ธ์ ์ฐธ์กฐํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
์๋๋ ๊ฐ ์์ฑ๋ค์ ์์์ ์์์ด๋ค.
MainAxisSize
์ค์ column์ ๊ฒฝ์ฐ, ์์ง์ผ๋ก ๋ฐฐ์ด์ด ๋์ง๋ง ๊ทธ ์ํ์ชฝ์ ์ฌ๋ฐฑ๊น์ง ๋ค ์ฐจ์งํ๊ณ ์๋ค. ์ด ์์ฑ์ ๊ทธ ์ฌ๋ฐฑ์ ์ ๋ฌด๋ฅผ ๊ฒฐ์ ํ๋ค.
max : ๋จ๋ ๊ณต๊ฐ์ ๋ชจ๋ ์ฐจ์ง
min : ์์ ฏ์ ํฌ๊ธฐ ๋งํผ๋ง ์ฐจ์ง
MainAxisAlignment
start : ์ผ์ชฝ ์ ๋ ฌ
center : ๊ฐ์ด๋ฐ ์ ๋ ฌ
end : ์ค๋ฅธ์ชฝ ์ ๋ ฌ
spaceEvenly : ์ ๋ค ๊ท ๋ฑํ๊ฒ ๋ฐฐ์น
spaceBetween : ์ฒซ๋ฒ์งธ์ ๋ง์ง๋ง ์์์ ์ ์ธํ ๊ฐ๊ฒฉ์ด ๊ท ๋ฑ ๋ฐฐ์น
spaceAround : ์ฒซ๋ฒ์งธ์ ๋ง์ง๋ง ์์์ ๊ฐ๊ฒฉ์ ๊ทธ ์ฌ์ด ๊ฐ๊ฒฉ๋ค์ ์ ๋ฐ์ผ๋ก ๋ฐฐ์น
CrossAxisAlignment
start : ์ผ์ชฝ ์ ๋ ฌ
center : ๊ฐ์ด๋ฐ ์ ๋ ฌ
end : ์ค๋ฅธ์ชฝ ์ ๋ ฌ
baseline : ๊ฐ๊ฐ์ ํฌ๊ธฐ๊ฐ ๋ค๋ฅด๊ฑฐ๋ ํ ๋ ๊ธฐ๋ณธ ๋ผ์ธ ์ถ์ ๋ง์ถฐ ์ ๋ ฌ
stretch : ๋๊น์ง ์ฑ์ฐ๊ธฐ
4. stack
stack ์์ ฏ์ children์ ๋์ดํ ์ฌ๋ฌ ์์ ฏ์ ์์๋๋ก ์์ด๊ฒ ํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ์ row, column๊ณผ ๊ฐ์ผ๋ฉฐ ๋จผ์ ์ด ์์ ฏ์ด ์ ์ผ ์๋์ ๊น๋ฆฌ๊ฒ ๋๋ค.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello!"),
),
body: Stack(
children: <Widget>[
Container(
color: Colors.amber,
width: 300,
height: 300,
margin: const EdgeInsets.all(8.0),
),
Container(
color: Colors.blue,
width: 200,
height: 200,
margin: const EdgeInsets.all(8.0),
),
Container(
color: Colors.yellow,
width: 100,
height: 100,
margin: const EdgeInsets.all(8.0),
),
]),
);
}
}
์ฐธ์กฐ
sysocoder.com/flutter-column-row-widgets-%EC%82%AC%EC%9A%A9%EB%B2%95/