완성된 앱부터 보여드리겠습니다.
위 부터 Appbar, header, count_info, button, tabBar, tabBarView 로 이루어져 있습니다.
각 항목을 컴포넌트로 분리하여 작업을 했습니다.
1. 프로젝트 셋팅
컴포넌트 분리를 위해 패키지를 만들어 내부에 파일을 생성합니다.
그리고
assets 폴더 생성 후 pubspec.yaml 파일에 설정을 추가 합니다.
2. 파일 기본 설정
2.1 . profile_buttons.dart
import 'package:flutter/material.dart';
class ProfileButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildFollowButton(),
_buildMessageButton(),
],
);
}
}
Widget _buildFollowButton(){
return SizedBox();
}
Widget _buildMessageButton(){
return SizedBox();
}2.2 . profile_count_info.dart
import 'package:flutter/material.dart';
class ProfileCountInfo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildInfo("50", "Posts"),
_buildLine(),
_buildInfo("10", "Likes"),
_buildLine(),
_buildInfo("3", "Share"),
],
);
}
}
Widget _buildInfo(String count, String title){
return SizedBox();
}
Widget _buildLine(){
return SizedBox();
}2.3 . profile_drawer.dart
import 'package:flutter/material.dart';
class ProfileDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: double.infinity,
color: Colors.blue,
);
}
}2.4 . profile_header.dart
import 'package:flutter/material.dart';
class ProfileHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
SizedBox(width: 20),
_buildHeaderAvatar(),
SizedBox(width: 20),
_buildHeaderProfile(),
],
);
}
}
Widget _buildHeaderAvatar(){
return SizedBox();
}
Widget _buildHeaderProfile(){
return SizedBox();
}2.5 . profile_tab.dart
import 'package:flutter/material.dart';
class ProfileTab extends StatefulWidget {
@override
State<ProfileTab> createState() => _ProfileTabState();
}
class _ProfileTabState extends State<ProfileTab> {
@override
Widget build(BuildContext context) {
return Column(
children: [
_buildTabBar(),
_buildTabView(),
],
);
}
}
Widget _buildTabBar(){return SizedBox();}
Widget _buildTabView(){return SizedBox();}2.6 . main.dart
import 'package:flutter/material.dart';
import 'package:profileapp/components/profile_buttons.dart';
import 'package:profileapp/components/profile_count_info.dart';
import 'package:profileapp/components/profile_drawer.dart';
import 'package:profileapp/components/profile_header.dart';
import 'package:profileapp/components/profile_tab.dart';
import 'package:profileapp/theme.dart';
void main() {
@override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: ProfileDrawer(),// ProfileDrawer()
// AppBar()
body: Column(
children: [
// header()
const SizedBox(height: 20),
ProfileHeader(),
// countInfo()
const SizedBox(height: 20),
ProfileCountInfo(),
// Buttons()
ProfileButtons(),
const SizedBox(height: 20),
// Tab()
Expanded(child: ProfileTab()),
],
),
);
}
}
AppBar _buildProfileAppBar(){
return AppBar();
}3. 헤더 작성
헤더와, 앱바를 만들어 보겠습니다.
완성 화면은 이렇습니다.
3.1 앱바
main 파일의 메서드인
_buildProfileAppBar 를 수정할 것입니다.AppBar _buildProfileAppBar(){
return AppBar();
}AppBar _buildProfileAppBar(){
return AppBar(
leading: Icon(Icons.arrow_back_ios),
title: Text("Prifile"),
centerTitle: true,
);
}그리고 위젯의 build 에 주석해 놓았던 appBar 부분에 새로 만든 메서드를 추가해 주면 됩니다.
3.2 헤더
profile_header 파일을 수정하겠습니다.
이렇게 나누어 볼 수 있겠죠
@override
Widget build(BuildContext context) {
return Row( //가로로 두는 역할
children: [
SizedBox(width: 20), //사진과 프로필 정보 사이 여백 추가
_buildHeaderAvatar(),
SizedBox(width: 20),
_buildHeaderProfile(),
],
);
}
}- 프로필 이미지
CircleAvatar 위젯을 활용했습니다. 이미지를 원형으로 만들어 주는 위젯입니다.Widget _buildHeaderAvatar(){
return SizedBox(
width: 100,
height: 100,
child: CircleAvatar(
backgroundImage: AssetImage("assets/avatar.png"),
),
);
}- 유저 정보
Widget _buildHeaderProfile(){
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"GetinThere",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
),
),
Text(
"프로그래머/작가/강사",
style: TextStyle(
fontSize: 20,
),
),
Text(
"데어 프로그래밍",
style: TextStyle(
fontSize: 15,
),
),
],
);
}[프로필 앱 만들기]
1. 프로젝트 셋팅, 헤더
https://inblog.ai/hj/1-프로필-앱-만들기--30850
2. 프로필 카운드 바 만들기
https://inblog.ai/hj/2-프로필-앱-만들기-30576
Share article