Flutter로 간단하지만 세련된 프로필 앱을 만들어 보겠습니다.
이번 포스팅에서는 테마 설정, 메인 페이지 구조, 프로필 헤더 디자인 등을 다룹니다.
1. 테마 설정하기
테마 설정의 중요성
Flutter에서 테마(Theme)는 앱의 색상, 글꼴, 스타일 등을 한 곳에서 관리할 수 있는 기능입니다.
테마를 설정하면 디자인 일관성을 유지하고, 수정이 필요할 때 여러 파일을 변경할 필요 없이 테마만 수정하면 됩니다.
테마 파일: theme.dart
우선 테마를 정의하는 theme.dart 파일을 만듭니다. 협업 시 디자이너가 제공한 컬러 팔레트를 기반으로 작성하는 경우가 많습니다.
import 'package:flutter/material.dart';
const MaterialColor primaryWhite = MaterialColor(
0xFFFFFFFF, // 기본 색상: 흰색
<int, Color>{
50: Color(0xFFFFFFFF), // 매우 밝은 흰색
100: Color(0xFFF9F9F9), // 연한 회색
200: Color(0xFFF2F2F2), // 더 연한 회색
300: Color(0xFFE6E6E6), // 연한 회색
400: Color(0xFFD9D9D9), // 중간 회색
500: Color(0xCCCCCC), // 기본 회색
600: Color(0xB3B3B3), // 어두운 회색
700: Color(0x999999), // 더 어두운 회색
800: Color(0x808080), // 거의 검정색에 가까운 회색
900: Color(0x666666), // 매우 어두운 회색
},
);
ThemeData theme() {
return ThemeData(
primarySwatch: primaryWhite,
appBarTheme: const AppBarTheme(
iconTheme: IconThemeData(color: Colors.blue),
),
);
}
💡 중요 개념
- MaterialColor: 색상을 다양한 밝기 단계로 정의.
- ThemeData: 앱 전체의 테마를 설정하는 클래스.
- primarySwatch: 앱의 기본 색상 팔레트.
2. 메인 페이지 설정
Flutter 앱의 시작점은 main.dart 파일입니다. 여기에 테마와 메인 페이지를 연결해 줍니다.
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // 디버그 배너 제거
theme: theme(), // 테마 적용
home: const ProfilePage(), // 홈 화면 설정
);
}
}
💡 중요 개념
- MaterialApp: Flutter 앱의 뼈대를 제공하는 위젯.
- debugShowCheckedModeBanner: 디버그 모드 배너를 숨길 때 사용.
3. ProfilePage 구성
Scaffold
Scaffold는 Flutter 앱의 기본 레이아웃을 제공하는 위젯으로, AppBar, Drawer, Body 등 주요 화면 요소를 포함합니다.
class ProfilePage extends StatelessWidget {
const ProfilePage({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: const Text('Profile'),
),
endDrawer: Container(
width: 200,
color: Colors.blue,
),
body: Column(
children: [
const SizedBox(height: 20),
const ProfileHeader(), // 프로필 헤더
const SizedBox(height: 20),
// 이후 추가될 위젯들 자리
],
),
),
);
}
}💡 중요 개념
- SafeArea: 화면 영역을 침범하지 않도록 위젯을 보호.
- Scaffold: 앱의 기본 구조를 정의.
- AppBar: 상단 바를 생성.
4. 프로필 헤더 만들기
CircleAvatar
CircleAvatar는 원형 이미지나 아이콘을 표시할 때 사용하는 위젯입니다. 일반적으로 프로필 이미지를 표시하는 데 사용됩니다.
class ProfileHeader extends StatelessWidget {
const ProfileHeader({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(width: 20),
SizedBox(
width: 100,
height: 100,
child: CircleAvatar(
backgroundImage: const AssetImage('assets/avatar.png'), // 프로필 이미지
),
),
const SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'홍길동',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'프로그래머/작가',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
Text(
'데어 프로그래밍',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w400),
),
],
),
],
);
}
}💡 중요 개념
- CircleAvatar: 원형 이미지 또는 아이콘 위젯.
- AssetImage: 로컬에서 이미지를 불러오는 클래스.
- Column: 수직 방향으로 위젯을 나열.
5. 이미지 추가
pubspec.yaml 파일에 이미지를 등록해야 Flutter에서 사용할 수 있습니다.
pubspec.yaml 설정
flutter:
assets:
- assets/avatar.png이미지 경로 확인
- assets/avatar.png 경로에 이미지 파일이 존재해야 합니다.
- 설정 후 flutter pub get 명령어를 실행하여 변경 사항을 반영합니다.
6. 완성된 앱 화면
프로필 앱의 기본 화면은 다음과 같은 구성을 가집니다:
- AppBar: 상단 제목 표시.
- Drawer: 우측 슬라이드 메뉴.
- 프로필 헤더: 원형 이미지와 프로필 텍스트.
정리
- theme.dart: 테마로 디자인 일관성 유지.
- MaterialApp과 Scaffold: Flutter 앱의 기본 구조.
- CircleAvatar: 원형 이미지로 세련된 프로필 UI 구현.