[Flutter] 위젯 배치에 사용하는 레이아웃 형태의 위젯들
Column
- 위에서 아래로 위젯 배치
- 여러 위젯을 감싸기 때문에 child가 아니라 children 사용
//Dart
class MyHomePage extends StatelessWidget {
final String title; //화면상단에 표시될 제목. final이 붙어 더이상 변경되지 않는다.
MyHomePage({required this.title}); //required: 꼭 선언해주어야 하는 값
@override
Widget build(BuildContext context) {
return Scaffold( //앱 화면이 기본적으로 갖춘 기능을 선언한 위젯
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
title,
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center, //위에서 아래 기준으로 가운데 정렬
children: [
Text('1. First', style: TextStyle(fontSize:24)),
Text('2. second', style: TextStyle(fontSize:20)),
Text('3.Third', style: TextStyle(fontSize:15)),
]
,)
);
}
}
Column의 정렬 프로퍼티
- Column이 아닌 Column 내부의 children 위젯을 정렬시키는 프로퍼티
- mainAxisAlignment: 위에서 아래로 진행하는 과정에서 어떤 기준으로 정렬할지
- crossAxisAlignment: 왼쪽에서 오른쪽으로 진행하는 방향에서 어떤 기준으로 정렬할지
Row
- 왼쪽에서 오른쪽으로 위젯 배치
- children으로 감쌀 위젯 선언
ListView
- Row, Column과 다르게 스크롤할 수 있는 화면 생성
- scrollDirection 프로퍼티를 이용해 스크롤 방향도 설정 가능
//Dart
class MyHomePage extends StatelessWidget {
final String title; //화면상단에 표시될 제목. final이 붙어 더이상 변경되지 않는다.
List<Widget> myChildren = [];
MyHomePage({required this.title}); //required: 꼭 선언해주어야 하는 값
@overrides
Widget build(BuildContext context) {
for (var i=0; i<50; i++){
myChildren.add(Text('Text', style: TextStyle(fontSize: 25)));
}
return Scaffold( //앱 화면이 기본적으로 갖춘 기능을 선언한 위젯
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
this.title,
),
),
body: Center(
child: ListView(
scrollDirection: Axis.horizontal, //가로방향으로 스크롤 생성
children: myChildren,
),
),
);
}
}
builder 함수를 이용해 위 코드와 동일한 ListView 생성하기
//Dart
class MyHomePage extends StatelessWidget {
final String title; //화면상단에 표시될 제목. final이 붙어 더이상 변경되지 않는다.
MyHomePage({required this.title}); //required: 꼭 선언해주어야 하는 값
@overrides
Widget build(BuildContext context) {
return Scaffold( //앱 화면이 기본적으로 갖춘 기능을 선언한 위젯
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
this.title,
),
),
body: Center(
child: ListView.builder(
itemCount:50,
itemBuilder: (BuildContext context, int index){
return Text('$index' + 'Text', style: TextStyle(fontsize:25));
},
),
),
);
}
}
Stack
- 위젯 위에 위젯 쌓을 때 사용
- 가장 먼저 선언한 위젯이 가장 아래에 놓임
- Positioned 위젯을 이용해 위젯 위치 지정 가능
//Dart
class MyHomePage extends StatelessWidget {
final String title; //화면상단에 표시될 제목. final이 붙어 더이상 변경되지 않는다.
List<Widget> myChildren = [];
MyHomePage({required this.title}); //required: 꼭 선언해주어야 하는 값
@overrides
Widget build(BuildContext context) {
for (var i=0; i<50; i++){
myChildren.add(Text('hello', style: TextStyle(fontSize: 25)));
}
return Scaffold( //앱 화면이 기본적으로 갖춘 기능을 선언한 위젯
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(
this.title,
),
),
body: Center(
child: Stack(
children: [
Image.aseet('images/image1.png'),
Positioned( //Image.network 이미지 배치
left: 0,
bottom: 0,
child: Image.network('https~.png',
height: 100,
width: 100,
),
),
),
],
),
),
);
}
}
