1. 프로필 앱 만들기

프로젝트 셋팅, 헤더

HootJem

Oct 04, 2024

Contents

1. 프로젝트 셋팅 2. 파일 기본 설정 3. 헤더 작성

완성된 앱부터 보여드리겠습니다.

위 부터 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