728x90
들어가기 앞서...
지금 까지 배웠던 것들을 응용해서 밑의 사진을 따라 실습해보자!
본문으로...
예시 사진)
1차 시도 실패
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.black,
child: Column(
children: [
Container(
child: 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,
),
],
),
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
child: 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,
),
],
),
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
],
),
),
],
),
),
);
}
}2차 시도 실패
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
// mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Container(
child: 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,
),
],
),
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Container(
child: 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,
),
],
),
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
),
],
),
),
],
),
),
);
}
}
진행 하려는 방향...
물론 구조와 문법은 틀렸겠지만... 대충 이런식으로 잡으면 될것 같았다!
Flexible(
Column(
Background: Colors.black,
mainAxis: MainAxis.max,
Children: [
container(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container:(빨),
Container:(주),
Container:(노),
Container:(초),
]
),
container(
child: Container(주),
),
container(
mainAxisAlignment: MainAxisAlignment.end
Children: [
Container(빨),
Container(주),
Container(노),
Container(초),
]
),
container(
child: Container(그린),
)
]
)
)
애초에.. 나는 구조를 잘못 접근했다!
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
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.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,
)
],
),
Container(
color: Colors.green,
width: 50.0,
height: 50.0,
)
],
),
),
),
);
}
}
구조를 보기 쉽게 정리해보았다!
끝으로...
- 주축과 반대축에 대한 개념을 다시 상기하고 구조에대해 조금 더 공부를 해야겠다!
- 너무 어렵게 생각하지 않고 단순하게 한 전체 Column() 안 에서 하나의 Row() 씩 생각하면 된다.
728x90