출처
만들면서 배우는 플러터 앱 프로그래밍 7가지 모바일 앱 UI 제작 & RiverPod 상태 관리
Project 생성
Chapter 04 Preview
- Material App 위젯
- Scaffold 위젯
- Column 위젯
- Row 위젯
- Text 위젯
- SafeArea 위젯
- Image 위젯
- Spacer 위젯
- Expanded 위젯
- Padding, SizedBox 위젯
Sample Image 가져오기
0. image 경로 설정
1. project에 assets 폴더 생성
2. 샘플 assets 모음 내의 사진 복사
3. assets 폴더에 사진 붙여넣기
Store App 만들어보기
0. 기본 코드
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp();
home : StorePage();
}
}
class StorePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
);
}
}
1. Column 위젯
Column 위젯은 수직 방향 레이아웃 구조를 만들어주고 chlid가 아닌 children 속성을 가진다.
Store App은 위에서부터 아래로 내려가는 구조이기 때문에 Column 위젯으로 Layout을 잡아준다.
child 속성을 가진 위젯은 하나의 위젯만 가질 수 있고, children 속성을 가진 위젯은 많은 위젯을 가질 수 있다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
],
),
);
}
}2. Row 위젯
Row 위젯은 수평방향 Layout 구조를 만들어주고 child가 아닌 children 속성을 가진다.
Row 위젯은 그림처럼 수평으로 흐른다
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Row(
children: [
],
)
],
),
);
}
}3. Text 위젯
문자열을 담을 수 있는 위젯
Text() 위젯을 Row 내부에 추가한다
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Row(
children: [
Text("Woman"),
Text("kids"),
Text("Shoes"),
Text("Back"),
],
),
],
),
);
}
}
4. SafeArea 위젯
휴대폰 기기별로 조금씩 다른 상태바 영역에 Padding을 넣어주는 역할
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text("Woman"),
Text("kids"),
Text("Shoes"),
Text("Back"),
],
),
],
),
),
),
);
}
}
5. Text 위젯의 style 속성
style 속성을 사용하여 Text 위젯 디자인
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
],
),
),
),
);
}
}
6. Open Fullter Devtools
Open Fullter Devtools를 사용하여 위젯이 어느 정도의 공간을 차지하고 있는지 확인
7. Spacer 위젯
위젯 사이의 간격 조정하는데 사용
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
],
),
),
),
);
}
}
mainAxisAlignment: MainAxisAlignment.spaceBetween 을 사용하여 간격을 조정할 수도 있다
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
],
),
),
),
);
}
}
8. Padding 위젯
자식 위젯 주위에 빈 공간을 만들어준다.
EdgeInsets.all → 왼쪽, 오른쪽, 위, 아래 즉, 전체 방향에 여백을 줄 때 사용 EdgeInsets.only → 4 방향 중 내가 원하는 곳만 여백을 줄 때 사용 EdgeInsets.symmertric → 수직이나 수평 중 선택하여 여백을 줄 때 사용
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
],
),
),
),
);
}
}
9. Image 위젯
Image 위젯을 이용하여 화면에 사진 배치
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Image.asset(
"assets/bag.jpeg",
fit: BoxFit.cover,
),
Image.asset("assets/cloth.jpeg", fit: BoxFit.cover),
],
),
),
),
);
}
}
10. Expanded 위젯 - Column 방향
남은 위젯을 공간을 확장하여 공간을 채울 수 있도록 하는 위젯
남은 공간 : 높이
이미지들을 Expanded 위젯으로 감싸준다
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Expanded(
child: Image.asset(
"assets/bag.jpeg",
fit: BoxFit.cover,
),
flex: 1,
),
Expanded(
child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover),
flex: 1,
),
],
),
),
),
);
}
}
Expanded 위젯은 flex 속성을 가진다
flex 속성을 주지 않으면 기본값은 flex: 1
11. SizedBox 위젯
width 혹은 height 크기를 가지는 빈 상자 = 마진
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Woman",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"kids",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Shoes",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
"Back",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Expanded(
child: Image.asset(
"assets/bag.jpeg",
fit: BoxFit.cover,
),
flex: 1,
),
SizedBox(
height: 2,
),
Expanded(
child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover),
flex: 1,
),
],
),
),
),
);
}
}
Share article