์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- ํจ์คํธ์บ ํผ์ค
- node.js
- reactorkit
- Xcode
- ํ๋ก๊ทธ๋๋จธ์ค
- XCTest
- rxcocoa
- arkit
- UIKit
- Swfit
- RxSwift
- CollectionView
- SwiftUI
- TCA
- combine
- Lv2
- swift
- ios
- BFS
- BOJ
- tableView
- realm
- raywenderlich
- designpattern
- Flutter
- visionOS
- ๋ฐฑ์ค
- Kuring
- MVVM
- SnapKit
- Today
- Total
lgvv98
[flutter] 20๊ฐ | ์ปจํ ์ด๋ ์์ ฏ (container widget) ๋์ง์ด ๋ณด๊ธฐ. ๋ณธ๋ฌธ
[flutter] 20๊ฐ | ์ปจํ ์ด๋ ์์ ฏ (container widget) ๋์ง์ด ๋ณด๊ธฐ.
๐ฅ ์บ๋ฟ๋งจ 2021. 8. 13. 16:34โ ๋๋์ด ์ฌ๊ธฐ๋ถํฐ๋ ์ํ๋ง์ ๋ฒ์ด๋ ์กฐ๊ธ ๋งค์ด๋ง ๊ฐ์ข์ด๋ค ใ ..ใ
๋ฌด๋ฃ ๊ฐ์ข์ธ๋ฐ ์ง์ง ์ด๋ ๊ฒ ์ข์ ์๊ฐ ์์...
์ ํ๋ธ ์ฝ๋ฉ์ํ๋ ๊ฐ์ข๋ฅผ ๋ฌดํํ ์ถ์ฒํ๋ค.
โ ์ด๋ฒ์๊ฐ๋ถํฐ๋ ์ปจํ ์ด๋ ์์ ฏ์ ๋ํด์ ์์๋ณผ ์์ ์ธ๋ฐ, ์ฐจ๊ทผ์ฐจ๊ทผ ๋ด๋ณด์.
์ฐ์ ํ๋ฌํฐ ๊ณต์ ํํ์ด์ง ๊ฐ์ ๋ ์ด์์ ์์ ฏ์ ํ์ธํ๋ ๊ฒ๋ ์ข์ ๋ฐฉ๋ฒ์ด๊ฒ ์ง?
https://flutter-ko.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets
ํ๋ฌํฐ์ ์ปจํ ์ด๋์ ๊ณต์ ๋ฌธ์๋ฅผ ๋ณด๋ฉด
"Containers with no children try to be as big as possible"
childern์ด ์์๊ฒฝ์ฐ ์ปจํ ์ด๋๊ฐ ๊ฐ๋ฅํ ํฐ ๋ถ๋ถ์ ์ฐจ์งํ๋ค.
๐ ์ฝ๋๋ฅผ ๋ณด์๋ผ.
๋ฐฑ๊ทธ๋ผ์ด๋๊ฐ white๋ก ์ค์ ๋์ด ์์ด๋ ์ปจํ ์ด๋๊ฐ ํ๋ฉด์ ์ต๋๋ก ์ฐจ์งํด์ ๋นจ๊ฐ์์ผ๋ก ๋ชจ๋ ๋ฎ์ฌ์๋ค.
import 'package:flutter/material.dart'; // ๋ฐ์คํฌํ, ์ฑ ๋ฑ์ ๊ณ ๋ฃจ UI๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๊ตฌ๊ธ์ด ์ ๊ณตํด์ฃผ๋ ํจํค
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// ์ค์ง์ ์ผ๋ก ๋ชจ๋ ์ฑ์ ๊ฐ์ธ๊ณ ์๋ค.
title: 'Appbar', // ์ฑ์ ์ด์นญํ๋ ์ด๋ฆ -> ์ค๋งํธ ํฐ ์ฑ์์ ์ต๊ทผ ์ฌ์ฉํ ์ฑ ๋ณด์ฌ์ค ๋์ ์ด๋ฆ
theme:
ThemeData(primarySwatch: Colors.green // ํน์ ์์ ์์ฉ๋ค์ ๊ธฐ๋ณธ ์์์ผ๋ก ์ง์ ํด์ ์ฌ์ฉํ๊ฒ
),
home: MyPage(), // home์ ์ฑ์ด ์คํ๋ ๋ ๊ฐ์ฅ๋จผ์ ๋ณด์ฌ์ฃผ๋ ํ์ด
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.red
),
);
}
}
โ ๊ทธ๋ ๋ค๋ฉด child๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: Container(
color: Colors.red,
child: Text('Hello Hello Hello Hello Hello'),
),
);
}
}
๋ฐ๋ ์ฝ๋๋ ํ์ค ๋ฐ์ ์๋ค. ํ์ง๋ง ๊ฒฐ๊ณผ๋ ์์ฒญ๋ ์ฐจ์ด๋ฅผ ๋ณด์ฌ์ค๋ค...
๊ณต์ ๋ฌธ์๋ฅผ ๋ณด๋ฉด
"Containers with children size themselves to their childred"
์ปจํ ์ด๋๊ฐ children์ ๊ฐ์ง๋ฉด children์ ํฌ๊ธฐ๊ฐ ๋๋ค.
๋ค๋ง ์๋ ๊ทธ๋ฆผ์ ๋จ์ ์ ํ๋ฉด ๋ฐ์ผ๋ก ๋ฒ์ด๋๊ฒ ๋๋ค๋ ์ ์ด๋ค. ๊ทธ๋ผ ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ์ด๋ป๊ฒ ํด์ผํ ๊น?
๋ฐ๋ก SafeArea !
iOS ๊ฐ๋ฐ์์ ์์ฃผ ๋ณด์๋ ๋ด์ฉ์ธ๋ฐ, iOS์์ ์ ํ์ ์ค๋ช ์ ๋ฐ๋ฅด๋ฉด SafeArea๋ ๋ ธ์น๊ฐ ์๊น์ผ๋ก์จ ๊ฐ๋ ค์ง๋ ํ๋ฉด์ด ์๊ธฐ๋๋ฐ ์ด ์์ญ์ ์ ์ธํ์ฌ ์์ ํ๊ฒ ๋ทฐ๋ฅผ ๋ณด์ฌ์ค ์ ์๋ ๋ถ๋ถ์ด๋ค.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Container(
color: Colors.red,
child: Text('Hello Hello Hello Hello Hello'),
),
),
);
}
}
๋งฅ ๊ธฐ์ค์ผ๋ก ์ปจํ ์ด๋์ option + enter ๋๋ฅด๋ฉด ๋ฐ๋ก child ๊ฐ๋ฅํ ์ต์ ์ ์ ๊ณตํด์ค๋ค.
โ ์ด๋ฒ์๋ ์ปจํ ์ด๋์ ํฌ๊ธฐ์ margin์ ์ค์ ํด๋ณด์.
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Container(
color: Colors.red,
width: 100,
height: 100,
margin: EdgeInsets.symmetric( //๊ฐ๋ก ์ธ๋ก ๊ฐ ์ค์
vertical: 50, // ์ธ๋ก์ถ
horizontal: 10, // ๊ฐ๋ก์ถ
),
padding: EdgeInsets.all(20),
//EdgeInsets.all(20), // ๋ชจ๋ ์ธ๋ถ๋ฉด์ 20 ํฝ์
์ฌ๋ฐฑ
child: Text('Hello Hello Hello Hello Hello'),
),
),
);
}
}
โ Container ์์ ฏ์ Only One child
ํ๋ฌํฐ์๋ ๋ฉํฐ์ฐจ์ผ๋์ ์์ฐจ์ผ๋ ๋๊ฐ๊ฐ ์๋๋ฐ ์ปจํ ์ด๋๋ ์ ์ฐจ์ผ๋์ด๋ค.
'flutter > ์ํ๋ง(๊ธฐ์ด)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[flutter] 22๊ฐ | Navigator ์ดํดํ๊ธฐ (0) | 2021.08.16 |
---|---|
[flutter] 21๊ฐ | Column, Row ์์ ฏ (0) | 2021.08.16 |
[flutter] 19๊ฐ | ๋น๋ ์์ ฏ ์์ด ์ค๋ต๋ฐ ๋ง๋ค๊ธฐ ๋ฐ ํ ์คํธ ๋ฉ์์ง (0) | 2021.08.13 |
[flutter] 27๊ฐ(ํจ์น๊ฐ์ข) | ํ๋ฌํฐ 2.0 ๋ฒํผ (0) | 2021.08.13 |
[flutter] 18(26)๊ฐ | ํ๋ฌํฐ 2.0 SnackBar ์ ScaffoldMessenger (0) | 2021.08.12 |