기본 위젯
•
Text
•
Image
•
Icon
•
SafeArea
Text
화면에 문자열을 출력하는 위젯
문법
•
Text( 텍스트, 스타일 )
Text(
“텍스트”,
style: TextStyle( 텍스트 스타일 속성… )
)
Text(
'표시할 텍스트',
style: TextStyle(
// 텍스트 스타일 설정 (옵션)
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)
Dart
복사
•
'표시할 텍스트': 화면에 표시할 텍스트를 지정합니다.
•
style: 텍스트의 스타일을 설정하는 옵션 속성입니다. TextStyle 클래스를 사용하여 폰트 크기, 두께, 색상 등을 지정할 수 있습니다.
다양한 텍스트 스타일
Text.rich( )
Text.rich( ) 를 사용하면, HTML의 <span> 태그 처럼, 여러 텍스트를 나누어 스타일을 줄 수 있습니다.
Text.rich(
TextSpan(
text: '일반 텍스트 ',
style: TextStyle(fontSize: 16.0, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '서식이 다른 텍스트',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
),
TextSpan(
text: ' 또 다른 일반 텍스트',
style: TextStyle(fontSize: 16.0, color: Colors.black),
),
],
),
)
Dart
복사
Image
이미지를 출력하는 위젯
- 각각 서버에 있는 이미지, 앱 안에 있는 로컬 이미지를 출력하는 위젯이 있습니다.
Image.network()
네트워크에서 이미지를 가져와 표시하는 Flutter 위젯
Image.network(
'이미지의 URL',
width: 100.0, // 이미지의 가로 크기 (옵션)
height: 100.0, // 이미지의 세로 크기 (옵션)
fit: BoxFit.cover, // 이미지가 어떻게 화면에 맞출지 설정 (옵션)
)
Dart
복사
•
'이미지의 URL': 표시할 이미지의 URL을 지정합니다.
•
width, height: 이미지의 가로 및 세로 크기를 설정합니다. (옵션)
•
fit: 이미지가 화면에 맞게 조정되는 방식을 설정합니다. BoxFit 열거형을 사용하여 지정합니다. (옵션)
AssetImage
앱 안에 있는 로컬 이미지를 출력하는 위젯
Image(
image: AssetImage('assets/image.png'),
width: 100.0, // 이미지의 가로 크기 (옵션)
height: 100.0, // 이미지의 세로 크기 (옵션)
fit: BoxFit.cover, // 이미지가 어떻게 화면에 맞출지 설정 (옵션)
)
Dart
복사
•
image: 표시할 이미지를 지정합니다. AssetImage는 앱의 자산 폴더에 있는 이미지를 로드할 때 사용됩니다.
•
width, height: 이미지의 가로 및 세로 크기를 설정합니다. (옵션)
•
fit: 이미지가 화면에 맞게 조정되는 방식을 설정합니다. BoxFit 열거형을 사용하여 지정합니다. (옵션)
pubspec.yaml 에서 image 폴더 설정
앱 내의 로컬 이미지를 사용하려면, pubspect.yaml 에서 이미지 경로를 설정해야합니다.
•
이미지 경로 : my_flutter_app/images
my_flutter_app/
|- images/
|- image1.png
|- image2.png
|- lib/
|- pubspec.yaml
...
Plain Text
복사
•
pubspec.yaml
flutter:
assets:
- images/
YAML
복사
여기서 images/는 프로젝트 루트 디렉토리에 있는 images 폴더를 나타냅니다. 이제 해당 이미지 폴더에 있는 이미지 파일들은 Flutter 앱에서 접근 가능하게 됩니다.
flutter pub get 명령을 사용하여 패키지 의존성을 업데이트해야 합니다.설정 후에는 앱 코드에서 Image.asset를 사용하여 이미지를 로드할 수 있습니다.
Image.asset('images/image1.png'),
Dart
복사
BoxFit
Image 위젯에서 이미지의 화면에 맞추는 방법을 지정하는 속성값(열거형)
BoxFit은 이미지를 어떻게 조절하고 화면에 맞출지를 결정하는 데 사용되는 속성값입니다.
•
종류
◦
contain
◦
cover
◦
fill
◦
fitWidth
◦
fitHeight
◦
scaleDown
◦
none
BoxFit 값 | 설명 |
contain | 이미지가 화면에 딱 맞도록 크기를 조절하며, 화면에 모두 나타남 |
cover | 이미지가 화면을 덮도록 크기를 조절하며, 일부가 화면 밖으로 나갈 수 있음 |
fill | 이미지가 화면을 가득 채우도록 크기를 조절하며, 일부가 화면 밖으로 나갈 수 있음 |
fitWidth | 이미지가 화면 너비에 맞도록 크기를 조절하며, 세로 부분이 잘릴 수 있음 |
fitHeight | 이미지가 화면 높이에 맞도록 크기를 조절하며, 가로 부분이 잘릴 수 있음 |
scaleDown | 이미지가 원본 크기보다 작을 경우에만 크기를 조절하거나 이미지를 그대로 표시 |
none | 이미지를 크기를 조절하지 않고 그대로 표시 |
contain
이미지가 화면에 딱 맞도록 크기를 조절하며, 화면에 모두 나타납니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.contain,
)
Dart
복사
cover
이미지가 화면을 덮도록 크기를 조절하며, 이미지의 일부가 화면 밖으로 나갈 수 있습니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
)
Dart
복사
fill
이미지가 화면을 가득 채우도록 크기를 조절하며, 이미지의 일부가 화면 밖으로 나갈 수 있습니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.fill,
)
Dart
복사
fitWidth
이미지가 화면 너비에 맞도록 크기를 조절하며, 세로 부분이 잘릴 수 있습니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.fitWidth,
)
Dart
복사
fitHeight
이미지가 화면 높이에 맞도록 크기를 조절하며, 가로 부분이 잘릴 수 있습니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.fitHeight,
)
Dart
복사
scaleDown
이미지가 원본 크기보다 작을 경우에만 크기를 조절합니다. 그렇지 않으면 이미지를 그대로 표시합니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.scaleDown,
)
Dart
복사
none
이미지를 크기를 조절하지 않고 그대로 표시합니다.
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.none,
)
Dart
복사
Icon
아이콘을 표시하는 위젯
Icon(
Icons.star, // 사용할 아이콘 (Material Design Icons)
size: 24.0, // 아이콘의 크기 (옵션)
color: Colors.yellow, // 아이콘의 색상 (옵션)
)
Dart
복사
•
Icons.star: 사용할 아이콘을 지정합니다. Icons 클래스는 Material Design Icons를 포함하고 있습니다.
•
size: 아이콘의 크기를 설정합니다. (옵션)
•
color: 아이콘의 색상을 설정합니다. (옵션)
Material Design Icon 찾기
icon_wiget.dart
import 'package:flutter/material.dart';
class IconWidget extends StatelessWidget {
const IconWidget({super.key});
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
children: [
SizedBox(height: 50,),
Text("아이콘 위젯", style: TextStyle(fontSize: 30),),
Divider(),
Text("기본 아이콘", style: TextStyle(fontSize: 30),),
Icon(
Icons.face,
size: 48,
color: Colors.black,
),
// 추가 아이콘
SizedBox(height: 10,),
Icon(
Icons.person,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.login,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.logout,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.shopping_cart,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.shopping_bag,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.menu,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
// Icons.favorite,
Icons.favorite_border,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
// Icons.thumb_up,
Icons.thumb_up_outlined,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
// Icons.bookmark,
Icons.bookmark_outline,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.payment,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Divider(),
// CRUD
Text("CRUD", style: TextStyle(fontSize: 20),),
SizedBox(height: 10,),
Icon(
Icons.create,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.edit,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.read_more,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
// Icons.delete,
Icons.delete_forever,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Divider(),
// FORM
Text("FORM", style: TextStyle(fontSize: 20),),
SizedBox(height: 10,),
Icon(
Icons.person,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.lock,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.calendar_month,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.schedule,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.place,
size: 48,
color: Colors.black,
),
SizedBox(height: 10,),
Icon(
Icons.favorite,
size: 48,
color: Colors.red,
),
],
),
),
);
}
}
Dart
복사
SafeArea
안전한 공간을 확보해주는 위젯
구현한 UI 가 디바이스의 상태바, 카메라 영역, 노치 영역 등을 침범하지 않게 하기 위해서, 안전 영역을 확보해주는 위젯입니다.
SafeArea(
child: // 안전한 영역에 배치할 위젯을 설정
)
Dart
복사
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SafeArea Example'),
),
body: SafeArea(
top: true, // 상단 안전한 영역 사용
bottom: true, // 하단 안전한 영역 사용
left: true, // 왼쪽 안전한 영역 사용
right: true, // 오른쪽 안전한 영역 사용
minimum: EdgeInsets.all(16.0), // 네 방향의 최소 안전 여백
maintainBottomViewPadding: true, // 하단 여백 유지
child: Center(
child: Text(
'Hello, SafeArea!',
style: TextStyle(fontSize: 24.0),
),
),
),
),
);
}
}
Dart
복사