[Flutter] 연습하기 3 - flutter profile app

플러터를 이용해서 간단한 profile App을 만들며 문법에 익숙해져보도록 하겠습니다.
만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.

코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지를 넣어줍니다.

사용할 내부 이미지 다운로드 받아 주세요(다른 이미지 사용 해도 좋아요)

avatar.png

yaml 파일 설정

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/avatar.png

 

theme.dart 파일 만들어 보기

 

앱의 테마는 전체 디자인에서 중요한 부분을 차지합니다. Flutter에서는 ThemeData 클래스를 사용하여 앱의 테마를 설정할 수 있습니다. 이를 통해 색상, 글꼴, 위젯 스타일 등을 일관되게 적용할 수 있습니다.

import 'package:flutter/material.dart';
// 보통 협업 --> 디자이너
// 전역 함수로 만들어 보자.

const MaterialColor primaryWhite = MaterialColor(
  0xFFFFFFFF, // Base color: White
  <int, Color>{
    50: Color(0xFFFFFFFF), // 50% opacity
    100: Color(0xFFF9F9F9), // Lighter shade
    200: Color(0xFFF2F2F2),
    300: Color(0xFFE6E6E6),
    400: Color(0xFFD9D9D9),
    500: Color(0xCCCCCC), // Mid-light gray
    600: Color(0xB3B3B3), // Darker gray
    700: Color(0x999999), // Darker shade
    800: Color(0x808080), // Even darker shade
    900: Color(0x666666), // Very dark gray
  },
);

// 전역 함수
ThemeData theme() {
  // 앱 전반적인 테마(색상, 글꼴, 위젯 스타일등)를 정의하는 클래스
  // 입니다. --> 일관된 디자인을 유지하기 위해 사용한다.
  return ThemeData(
    // 앱의 기본 색상 팔레트를 설정하는 속성입니다.
    primarySwatch: primaryWhite,
    appBarTheme: const AppBarTheme(
      iconTheme: IconThemeData(color: Colors.blue),
    ),
  );
}

 

main.dart 파일 기본 설정하기 

 

main.dart는 앱을 실행하는 주요 파일입니다. MaterialApp을 사용하여 전체 앱의 스타일과 레이아웃을 설정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_profile_app/theme.dart';

void main() {
  runApp(const MyApp());
}

// MyApp -> MaterialApp
class MyApp extends StatelessWidget {
  // 객체를 const 사용하려면 생성자가 const 생성자야 한다.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme(),
      home: ProfilePage(),
    );
  }
} // end of MyApp

 

메인 페이지 설정하기 (profile_page.dart)

 

profile_page.dart는 페이지를 정의하는 파일입니다. SafeArea를 사용하여 앱의 안전구역을 설정하고, Scaffold 위젯을 활용해 페이지를 구성하는 데 필요한 위젯들을 정의합니다.

 

import 'package:flutter/material.dart';

import '../components/my_profile_buttons.dart';
import '../components/profile_buttons.dart';
import '../components/profile_count_info.dart';
import '../components/profile_header.dart';
import '../components/profile_tab_bar.dart';
import '../components/side_bar.dart';

// 페이지 단위의 위젯을 만들어 보자 --> 클래스로
// 우리들의 규칙 2 Scaffold
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Profile'),
        ),
        endDrawer: SideBar(),
        body: Column(
          children: [
            const SizedBox(height: 20),
            ProfileHeader(),
            const SizedBox(height: 20),
            profileCountInfo(),
            const SizedBox(height: 20),
            // MyProfileButtons(),
            ProfileButtons(),
            Expanded(child: ProfileTab()),
          ],
        ),
      ),
    );
  }
}

 

프로필 헤더 만들기

profile header

프로필의 상단에는 사용자의 이름과 직업, 사진을 보여주는 헤더가 필요합니다. 이를 Row 위젯을 이용해 간단히 구성할 수 있습니다.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  const ProfileHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const SizedBox(width: 20),
        _buildHeaderAvatar(),
        const SizedBox(width: 20),
        _buildHeaderProfile()
      ],
    );
  }

  Column _buildHeaderProfile() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '홍길동',
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          '프로그래머 / 작가',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w700,
          ),
        ),
        Text(
          '데어 프로그래밍',
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
          ),
        )
      ],
    );
  }

  SizedBox _buildHeaderAvatar() {
    return SizedBox(
      height: 100,
      width: 100,
      child: CircleAvatar(
        // 에셋이미지는 보통 위젯의 배경으로 동작할 때, 꾸밀 때 많이 활용하는 위젯이다
        backgroundImage: AssetImage('assets/avatar.png'),
      ),
    );
  }
}

프로필 카운트 인포위젯 만들어 보기

 

사용자의 게시물, 좋아요, 공유 등과 같은 통계 정보를 보여주는 위젯을 만들 수 있습니다. Row와 Column 위젯을 활용하여 각 항목을 표시할 수 있습니다.

import 'package:flutter/material.dart';

// 프로필 카운트 인포 위젯 만들어 보기
class profileCountInfo extends StatelessWidget {
  const profileCountInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildInfo('50', 'Posts'),
        _buildLine(),
        _buildInfo('10', 'Likes'),
        _buildLine(),
        _buildInfo('3', 'Share'),
      ],
    );
  }

  Container _buildLine() {
    return Container(
      width: 2,
      height: 50,
      color: Colors.blueAccent,
    );
  }

  Widget _buildInfo(String count, String title) {
    return Column(
      children: [
        Text(
          count,
          style: TextStyle(fontSize: 15),
        ),
        const SizedBox(height: 5),
        Text(
          title,
          style: TextStyle(fontSize: 15),
        ),
      ],
    );
  }
}

 

프로필 버튼 만들기

 

Follow와 Message 버튼을 만들어 봅니다. InkWell 위젯을 사용하여 터치 이벤트를 처리하고, 버튼의 스타일을 Container와 BoxDecoration을 활용하여 꾸밉니다.

import 'package:flutter/material.dart';

// 버튼 만들어 보기
class ProfileButtons extends StatelessWidget {
  const ProfileButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildFollowButton(),
        _buildMessageButton(),
      ],
    );
  }

  InkWell _buildMessageButton() {
    // InkWell: 터치 이벤트(탭, 더블탭) 감지하고 시각적 피드백도 제공합니다.
    // 터치하고자하는 영역을 감싸서 만들 수 있다.
    return InkWell(
      onTap: () {
        print('버튼 클릭');
      },
      child: Container(
        alignment: Alignment.center,
        width: 160,
        height: 40,
        child: Text(
          'Message',
          style: TextStyle(color: Colors.black87),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }

  InkWell _buildFollowButton() {
    return InkWell(
      onTap: () {
        print('버튼 클릭');
      },
      child: Container(
        alignment: Alignment.center,
        width: 160,
        height: 40,
        child: Text(
          'Follow',
          style: TextStyle(color: Colors.white),
        ),
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}

 

▼profile 앱 완성 화면