Row & Column
Tip
stless : 자동으로 stateless sidget 만들어줌
MainAxisAlignment - Column
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
child: Column(
// mainAxisAlignment
// start
// end
// center
// spaceBetween
// spaceEvenly
// spaceAround
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
],
),
),
),
);
}
}
// main.dart
import 'package:flutter/material.dart';
import 'package:hello_world/screen/home_screen.dart';
void main() {
runApp(MaterialApp(
home: HomeScreen(),
));
}
MainAxisAlignment - Row
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
ch ild: Container(
color: Colors.black,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
],
),
),
),
);
}
}
CrossAxisAlignment - Column
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
],
),
),
),
);
}
}
CrossAxisAlignment - Row
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
],
),
),
),
);
}
}
...
child: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
height: 300.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
...
],
),
......
child: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
...
],
),
),
...MainAxisSize
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
child: Row(
// MainAxisAlignment - 주축 정렬
mainAxisAlignment: MainAxisAlignment.start,
// CrossAxisAlignment - 반대축 정렬
crossAxisAlignment: CrossAxisAlignment.start,
// MainAxisSize - 주축 크기
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
],
),
),
),
);
}
}
Expanded
col과 row 아래에만 쓸 수 있다
Expanded
나머지 공간들을 Expanded로 감싸져있는 Widget들이 나눠 먹는다
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
),
],
),
),
),
);
}
}
Flexible
flex
expanded로 나눠진 공간을 나눠먹는 비율
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
),
Expanded(
flex: 4,
child: Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
),
Expanded(
flex: 5,
child: Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
),
],
),
),
),
);
}
}
Flexible
남는 공간을 버림
빨강 + 검정 : 주 : 노 : 초 : 파 = 1 : 1 : 1 : 1 : 1
...
child: Container(
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
),
...
],
),
),
......
child: Container(
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex : 4,
child: Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
),
Expanded(
child: Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
),
...
],
),
),
...실습
// home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.red,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.yellow,
width: 50.0,
height: 50.0,
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
],
),
],
),
),
),
);
}
}
Last updated
