[Flutter] Flutter 예제 - Profile App 만들기

Apr 14, 2024

Contents

1. 기본 세팅 2. 앱 테마 만들기 3. Drawer 만들기 4. CircleAvatar 사용하기 4.2. 컴포넌트 분리하기 5. count_info 만들기 6. InkWell 사용하기 7. DefaultTabController 사용하기 8. TabBarView 사용하기, 높이 오류 해결 9. 컴포넌트 분리로 코드 정리하기

1. 기본 세팅

assets 폴더를 만들고 사진 파일을 넣는다.

pubspec.yml 을 설정하고 pub get 을 누른다.

2. 앱 테마 만들기

theme.dart


import 'package:flutter/material.dart';

const MaterialColor primaryWhite = MaterialColor(
  0xFFFFFFFF,
  <int, Color>{
    50: Color(0xFFFFFFFF),
    100: Color(0xFFFFFFFF),
    200: Color(0xFFFFFFFF),
    300: Color(0xFFFFFFFF),
    400: Color(0xFFFFFFFF),
    500: Color(0xFFFFFFFF),
    600: Color(0xFFFFFFFF),
    700: Color(0xFFFFFFFF),
    800: Color(0xFFFFFFFF),
    900: Color(0xFFFFFFFF),
  },
);

ThemeData theme() {
  return ThemeData(
      primarySwatch: primaryWhite,
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.blue), //앱바 아이콘 색깔 정하기
      )
  );
}

💡

앱의 전체적인 색상을 흰색으로 만든다. 기본 색이 흰색이기 때문에 흰색을 원한다면 굳이 테마를 만들 필요는 없다.

main.dart


import 'package:flutter/material.dart';
import 'package:profile_app/theme.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: Scaffold(
        appBar: _buildAppBar(),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar( 
        leading: Icon(Icons.arrow_back_ios), // 앱바 아이콘 만들기
        title: Text("Profile"),
        centerTitle: true,
      );
  }
}

3. Drawer 만들기

3.1. Drawer 란?

💡

Drawer는 앱의 화면 왼쪽에서 나오는 메뉴를 의미한다. 주로 앱의 내비게이션 링크나 설정등을 제공한다. endDrawer 를 사용하면 화면 오른쪽에 표시된다.


import 'package:flutter/material.dart';
import 'package:profile_app/theme.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: Container(
          width: 200,
          height: double.infinity,
          color: Colors.blue,
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

3.2. 컨포넌트 분리하기

main.dart


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

import 'components/profile_drawer.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

profile_drawer.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: double.infinity,
      color: Colors.blue,
    );
  }
}

4. CircleAvatar 사용하기

4.1. CircleAvatar 란?

💡

CircleAvatar는 주로 사용자의 프로필 이미지나 이니셜을 원형으로 표시하기 위해 사용되는 위젯이다. 이 위젯을 사용하면 간단하게 원형의 아바타를 만들 수 있으며, 이미지나 텍스트 등을 쉽게 적용할 수 있다.


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

import 'components/profile_drawer.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 100,
                  height: 100,
                  child: CircleAvatar(
                    backgroundImage: AssetImage("assets/avatar.png"),
                  ),
                ),
                Column(
                  children: [
                    Text(
                      "GetInThere",
                      style:
                          TextStyle(fontSize: 25, fontWeight: FontWeight.w700),
                    ),
                    Text(
                      "데어 프로그래밍",
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

4.2. 컴포넌트 분리하기

main.dart


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

components/profile_header.dart


import 'package:flutter/material.dart';

import 'header_avatar.dart';
import 'header_profile.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        HeaderAvatar(),
        HeaderProfile(),
      ],
    );
  }
}

components/header_avatar.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: CircleAvatar(
        backgroundImage: AssetImage("assets/avatar.png"),
      ),
    );
  }
}

components/header_profile.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          "GetInThere",
          style:
          TextStyle(fontSize: 25, fontWeight: FontWeight.w700),
        ),
        Text(
          "데어 프로그래밍",
          style: TextStyle(
            fontSize: 15,
          ),
        ),
      ],
    );
  }
}

5. count_info 만들기


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            Row(
              children: [
                Column(
                  children: [
                    Text(
                      "50",
                      style: TextStyle(fontSize: 15),
                    ),
                    Text(
                      "Posts",
                      style: TextStyle(fontSize: 15),
                    ),
                  ],
                ),
              Container(
                width: 2,height: 60,color: Colors.blue,
              ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

5.2. 컴포넌트 분리, 변수화

components/count_info.dart


import 'package:flutter/material.dart';

class CountInfo extends StatelessWidget {
  final countNumber ;
  final countMenu ;
  
  CountInfo({required this.countNumber,required this.countMenu});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          countNumber,
          style: TextStyle(fontSize: 15),
        ),
        SizedBox(height: 2),
        Text(
          countMenu,
          style: TextStyle(fontSize: 15),
        ),
      ],
    );
  }
}

components/count_line.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 2,height: 60,color: Colors.blue,
    );
  }
}

profile_count_info.dart


import 'package:flutter/material.dart';

import 'count_info.dart';
import 'count_line.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          CountInfo(countNumber: "50",countMenu: "Posts",),
          CountLine(),
          CountInfo(countNumber: "10",countMenu: "Likes",),
          CountLine(),
          CountInfo(countNumber: "3",countMenu: "Share",),
        ],
      ),
    );
  }
}

main.dart


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/count_info.dart';
import 'components/count_line.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            ProfileCountInfo(),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

6. InkWell 사용하기

6.1. InkWell 란?

💡

InkWell 위젯은 사용자의 터치에 반응하여 물결 효과를 생성하고, 탭 이벤트를 처리할 수 있어서 버튼처럼 사용할 수 있다.


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
            children: [
            ProfileHeader(),
        ProfileCountInfo(),
        Padding(
          padding: const EdgeInsets.only(top: 25),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              InkWell(
                onTap: () {  // 버턴을 눌렀을 때 이벤트 실행
                  print("Follow 버튼 클릭");
                },
                child: Container(
                  alignment: Alignment.center,
                  width: 150,
                  height: 45,
                  child: Text(
                    "Follow",
                    style: TextStyle(color: Colors.white),
                  ),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
              InkWell(
                onTap: () {
                  print("Message 버튼 클릭");
                },
                child: Container(
                  alignment: Alignment.center,
                  width: 150,
                  height: 45,
                  child: Text(
                    "Message",
                    style: TextStyle(color: Colors.black,),
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(),
                  ),
                  ),
                )

                ],
              ),
        ),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

Inkwell 버튼을 누르면 이벤트가 발생한다.

6.2. 컴포넌트 분리

components/profile_buttons.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 25),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          InkWell(
            onTap: () {
              print("Follow 버튼 클릭");
            },
            child: Container(
              alignment: Alignment.center,
              width: 150,
              height: 45,
              child: Text(
                "Follow",
                style: TextStyle(color: Colors.white),
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          InkWell(
            onTap: () {
              print("Message 버튼 클릭");
            },
            child: Container(
              alignment: Alignment.center,
              width: 150,
              height: 45,
              child: Text(
                "Message",
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

main.dart


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            ProfileCountInfo(),
            ProfileButtons(),
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

7. DefaultTabController 사용하기

💡

DefaultTabController는 탭을 사용하여 여러 페이지를 구성할 때 사용되는 위젯이다. DefaultTabController를 사용하면 Flutter에서 탭 기반의 인터페이스를 쉽게 구현할 수 있다.

main.dart


import 'package:flutter/material.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            ProfileCountInfo(),
            ProfileButtons(),
            DefaultTabController(
              length: 2,
              initialIndex: 0,
              child: Column(
                children: [
                  TabBar(tabs: [
                    Tab(icon:Icon(Icons.directions_car)),
                    Tab(icon:Icon(Icons.directions_transit)),
                  ],)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

8. TabBarView 사용하기, 높이 오류 해결

8.1. TabBarView 란?

💡

TabBarView는 탭을 통해 여러 페이지를 스와이프하여 볼 수 있게 해주는 위젯이다. 주로 TabBar와 함께 사용되며, 사용자가 탭을 선택할 때 해당하는 페이지를 보여준다.


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            ProfileCountInfo(),
            ProfileButtons(),
            DefaultTabController(
              length: 2,
              initialIndex: 0,
              child: Column(
                children: [
                  TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),
                      Tab(icon: Icon(Icons.directions_transit)),
                    ],
                  ),
                  TabBarView(
                    children: [
                      GridView.builder(
                        gridDelegate:
                            SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisSpacing: 10,
                          crossAxisCount: 3,
                          mainAxisSpacing: 10,
                        ),
                        itemCount: 42,
                        itemBuilder: (context, index) {
                          return Image.network(
                              "https://picsum.photos/id/${index + 1}/200/200");
                        },
                      ),
                      Container(
                        color: Colors.red,
                      )
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

8.2. Horizontal viewport was given unbounded height 오류

💡

해당 코드를 실행하면 위와 같은 오류가 발생한다. 이는 부모 Column 내부에 무제한의 높이를 가질 수 있는 GridView나 ListView,TabBarView 등이 있을 때 발생한다. 이때 Expanded 위젯으로 자식 위젯을 감싼다. Expanded 위젯은 가능한 모든 공간을 차지하도록 자식 위젯을 확장시킨다.

8.3. RenderFlex children have non-zero flex but incoming height constraints are unbounded 오류

💡

이렇게 되면 또 다른 오류가 발생한다. 이 오류는 Column과 같은 위젯이 자식에게 무한한 높이를 허용할 때, 그 안에 있는 Expanded 또는 Flexible 위젯이 얼마나 많은 공간을 차지해야 하는지 결정할 수 없을 때 발생한다. Column 내부에서 Expanded 또는 Flexible 위젯을 사용할 때, 이들이 명확한 높이 제약을 가질 수 있도록 해야 한다. 예를 들어, Column을 Scaffold의 body로 직접 사용하는 경우, Column의 높이가 화면의 높이로 제한되므로 Expanded 위젯을 사용해야 한다.

main.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:profile_app/theme.dart';
import 'components/profile_buttons.dart';
import 'components/profile_count_info.dart';
import 'components/profile_drawer.dart';
import 'components/profile_header.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: Scaffold(
        appBar: _buildAppBar(),
        endDrawer: ProfileDrawer(),
        body: Column(
          children: [
            ProfileHeader(),
            ProfileCountInfo(),
            ProfileButtons(),
            Expanded(
              child: DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Column(
                  children: [
                    TabBar(
                      tabs: [
                        Tab(icon: Icon(Icons.directions_car)),
                        Tab(icon: Icon(Icons.directions_transit)),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        children: [
                          GridView.builder(
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisSpacing: 10,
                              crossAxisCount: 3,
                              mainAxisSpacing: 10,
                            ),
                            itemCount: 42,
                            itemBuilder: (context, index) {
                              return Image.network(
                                  "https://picsum.photos/id/${index + 1}/200/200");
                            },
                          ),
                          Container(
                            color: Colors.red,
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }
}

스크롤을 내리며 사진을 볼 수 있다.

9. 컴포넌트 분리로 코드 정리하기

components/profile_tab.dart


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Column(
        children: [
          _TabBar(),
          Expanded(child: _TabBarView()),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return TabBarView(
      children: [
        GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 10,
            crossAxisCount: 3,
            mainAxisSpacing: 10,
          ),
          itemCount: 42,
          itemBuilder: (context, index) {
            return Image.network(
                "https://picsum.photos/id/${index + 1}/200/200");
          },
        ),
        Container(
          color: Colors.red,
        )
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: [
        Tab(icon: Icon(Icons.directions_car)),
        Tab(icon: Icon(Icons.directions_transit)),
      ],
    );
  }
}

pages/profile_page.dart


import 'package:flutter/material.dart';

import '../components/profile_buttons.dart';
import '../components/profile_count_info.dart';
import '../components/profile_drawer.dart';
import '../components/profile_header.dart';
import '../components/profile_tab.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      endDrawer: ProfileDrawer(),
      body: Column(
        children: [
          ProfileHeader(),
          ProfileCountInfo(),
          ProfileButtons(),
          Expanded(child: ProfileTab())
        ],
      ),
    );
  }
  AppBar _buildAppBar() {
    return AppBar(
      leading: Icon(Icons.arrow_back_ios),
      title: Text("Profile"),
      centerTitle: true,
    );
  }

}

main.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:profile_app/pages/profile_page.dart';
import 'package:profile_app/theme.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: ProfilePage(),
    );
  }

}

See more posts

[Flutter] Flutter 예제 - Profile App 만들기

1. 기본 세팅

2. 앱 테마 만들기

3. Drawer 만들기

3.1. Drawer 란?

3.2. 컨포넌트 분리하기

4. CircleAvatar 사용하기

4.1. CircleAvatar 란?

4.2. 컴포넌트 분리하기

5. count_info 만들기

5.2. 컴포넌트 분리, 변수화

6. InkWell 사용하기

6.1. InkWell 란?

6.2. 컴포넌트 분리

7. DefaultTabController 사용하기

8. TabBarView 사용하기, 높이 오류 해결

8.1. TabBarView 란?

8.2. Horizontal viewport was given unbounded height 오류

8.3. RenderFlex children have non-zero flex but incoming height constraints are unbounded 오류

9. 컴포넌트 분리로 코드 정리하기

More articles

[Spring] JWT 적용하기

[Spring] JWT(Json Web Token)

[Flutter] Flutter 예제 - Recipe App 만들기

[Flutter] Flutter 예제 - Store App 만들기