flutter - myPage 디자인하기-1 (프로필 영역 / 프로필수정)

✅ myPage 메인 & 프로필 수정 페이지

 

1️⃣ mypage 상단 프로필영역 디자인

 

① userProfile 디자인

class MypageProfile extends StatelessWidget {
  const MypageProfile({Key? key, this.userInfo}) : super(key: key);
  final userInfo;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: ListTile(
                leading: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(14)),
                  child: Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("assets/Funny-Bunny.png"),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                title: Container(
                  padding: EdgeInsets.all(0),
                  width: 160,
                  child: Text(
                    "${userInfo.user.userName}" + "님",
                    style: textTheme(
                            color: kPrimaryColor(), weight: FontWeight.bold)
                        .headline2,
                  ),
                ),
                subtitle: Container(
                  padding: EdgeInsets.all(0),
                  width: 160,
                  child: Text(
                    "반갑습니다. 함께 TODO해요!",
                    style: textTheme(color: kchacholGreyColor()).bodyText2,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 20),
              child: OutlinedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => MyPageProfilePage()),
                  );
                },
                child: Text("프로필 수정",
                    style: textTheme(
                            color: kchacholGreyColor(), weight: FontWeight.w600)
                        .bodyText1),
                style: OutlinedButton.styleFrom(
                  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(6),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
        _buildFollowCount(context, 150, 999),
      ],
    );
  }

- 프로필수정 버튼 클릭 시, MeterialPageRoute로 프로펠 수정 페이지로 넘어가게 함

 

 

② 팔로잉 &  팔로워 count

❗ count 된 숫자는 위에서 임의로 넣어주었음

_buildFollowCount(context, 150, 999),

➡ Row의 Container에 Expanded로 가로 영역 전체 공간을 갖게 함 

Padding _buildFollowCount(BuildContext context, int count, int count2) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 20),
      child: Row(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Color(0xfff2f2f2),
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
              padding: EdgeInsets.symmetric(vertical: 14),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  TextButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => MyPageFollowingPage()),
                      );
                    },
                    child: Column(
                      children: [
                        Text(
                          "팔로잉",
                          style: textTheme(color: kPrimaryColor()).bodyText1,
                        ),
                        SizedBox(height: 2),
                        Text(
                          "$count",
                          style: textTheme(
                                  color: kPrimaryColor(),
                                  weight: FontWeight.bold)
                              .headline3,
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 2,
                    height: 28,
                    color: Color(0xffe9e9e9),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => MyPageFollowPage()),
                      );
                    },
                    child: Column(
                      children: [
                        Text(
                          "팔로워",
                          style: textTheme(color: kPrimaryColor()).bodyText1,
                        ),
                        SizedBox(height: 2),
                        Text(
                          "$count2",
                          style: textTheme(
                                  color: kPrimaryColor(),
                                  weight: FontWeight.bold)
                              .headline3,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

 

 

 

 

2️⃣ 프로필 수정 페이지

import 'package:flutter/material.dart';
import 'package:riverpod_firestore_steam1/core/theme.dart';
import 'package:riverpod_firestore_steam1/view/pages/main/components/chat_app_bar.dart';
import 'package:riverpod_firestore_steam1/view/pages/main/components/default_button.dart';
import 'package:riverpod_firestore_steam1/view/pages/main/components/home_app_bar.dart';

import '../components/line_app_bar.dart';

class MyPageProfilePage extends StatelessWidget {
  const MyPageProfilePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(55),
          child: LineAppBar("프로필 수정", null),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          color: klightGreyColor(),
                          border: Border.all(width: 1, color: kchacholGreyColor()),
                          borderRadius: BorderRadius.all(Radius.circular(30)),
                        ),
                      ),
                      Positioned(
                        bottom: 8,
                        right: -8,
                        child: Container(
                          width: 24,
                          height: 24,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage("assets/photo_plus_icon.png"),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 48),
              Column(
                children: [
                  _buildColumnForm("닉네임", "닉네임을 입력해주세요"),
                  SizedBox(height: 24),
                  _buildColumnForm("자기소개", "자기소개를 입력해주세요"),
                  SizedBox(height: 32),
                  DefaultButton(routes: "/mypage", btnText: "확인")
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Column _buildColumnForm(String text, String hintText) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          text,
          style: textTheme(color: kchacholGreyColor()).bodyText2,
        ),
        TextFormField(
          decoration: InputDecoration(
            hintText: hintText,
            contentPadding: EdgeInsets.only(top: 10, bottom: 9, left: 10),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: kmidGreyColor()),
            ),
            hintStyle: textTheme(color: kmidGreyColor(), weight: FontWeight.bold).headline3,
          ),
        ),
      ],
    );
  }
}

- stack에 clipBehavior: Clip.none을 설정해주면 stack의 지정된 영역 외부에 position을 줄 수 있음

- 닉네임 & 자기소개 textForm을 mypage의 components 파일로 따로 빼서 사용해도 됨!

- GestureDetector로 텍스트 입력시 키보드를 숨길 수 있게 함