1. Column 은 세로는 Block 가로는 Inline 속성
2. Row 는 가로는 Block 세로는 Inline 속성
어떤 디자인을 할 때 Column은 미리 크기를 키워놔야 한다. Row는 괜찮음 (휴대폰은 대부분 세로이기 때문)
3. 컨테이너는 자식이 없으면 Block, 자식이 있으면 Inline 이다.
4. ListView 는 가로는 Block 세로는 Inline
ㅤ | Block | Inline |
Column | 세로 | 가로 |
Row | 가로 | 세로 |
Container | 자식x | 자식o |
ListView | 가로 | 세로 |
Column은 SizedBox로 가로를 끝까지 늘려준다.(나중에 배치하기 편하게)
Row는 가로가 어차피 끝까지 이기 때문에 가만히 둔다.
한개 짜리는 Align으로 배치해준다.
배치의 핵심은 Block을 다 만드는 것
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RecipePage extends StatelessWidget {
const RecipePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appbar(),
body: Column(
children: [
_top(),
_center(),
_bottom(),
],
),
);
}
Widget _bottom() {
return Align(
alignment: Alignment.centerRight,
child: Container(
color: Colors.red,
width: 50,
height: 50,
),
);
}
Widget _center() {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Container(
color: Colors.green,
width: 50,
height: 50,
),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
);
}
Widget _top() {
return SizedBox(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Container(
color: Colors.green,
width: 50,
height: 50,
),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
);
}
AppBar _appbar() {
return AppBar(
actions: [
Icon(CupertinoIcons.search),
SizedBox(width: 15),
Icon(
CupertinoIcons.heart,
color: Colors.redAccent,
),
SizedBox(width: 15),
],
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RecipePage extends StatelessWidget {
const RecipePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _appbar(),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Container(
color: Colors.green,
width: 50,
height: 50,
),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
Row(
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Container(
color: Colors.green,
width: 50,
height: 50,
),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
],
),
],
),
);
}
AppBar _appbar() {
return AppBar(
actions: [
Icon(CupertinoIcons.search),
SizedBox(width: 15),
Icon(
CupertinoIcons.heart,
color: Colors.redAccent,
),
SizedBox(width: 15),
],
);
}
}
Share article
