6. 프로필 페이지

전체를 SigleChildScrollView로 감싸주어서 항목이 늘어날 때 마다 늘어나게 해준다.

사진 및 닉네임, 리뷰들이 있는 부분, 소개 두 부분으로 나누어서 만든다.

이전에 만들었던 페이지와 똑같게 패딩 값은 마지막에 준다.

왼쪽 : 피그마, 오른쪽 만든 페이지 

1. ProfileHeader

import 'package:finalproject_front/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildName(),
                SizedBox(height: 10),
                _buildReview(),
              ],
            ),
          ),
          _buildPicture()
        ],
      ),
    );
  }

  ClipRRect _buildPicture() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(150),
      child: Image.asset(
        "assets/picture.jpg",
        width: 80,
        height: 80,
        fit: BoxFit.cover,
      ),
    );
  }

  Row _buildReview() {
    return Row(
      children: [
        Icon(CupertinoIcons.star_fill, color: Colors.yellow, size: 16),
        SizedBox(width: 10),
        Text(
          "4.5 | 25개의 평가",
          style: TextStyle(color: gSubTextColor, fontWeight: FontWeight.bold, fontSize: 14),
        ),
      ],
    );
  }

  Text _buildName() {
    return Text(
      "아이유",
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    );
  }
}

2. ProfileDetail

1,2 중간에 색깔을 미리 주었는데 만들면서 공간을 얼마나 차지하는지 눈으로 확인 하기 위해 임의로 넣

import 'package:finalproject_front/constants.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildIntro(
              "자기소개 작성하는 공간 충섭아 컨벤션이 너무 어려워 나 좀 살려줘 머리가 터질거같애 할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어"),
          SizedBox(height: 10),
          _buildDetail("지역", "부산"),
          SizedBox(height: 10),
          _buildDetail("학력전공", "컴퓨터공학과"),
          SizedBox(height: 10),
          _buildDetail("보유자격증", "개인정보취급사"),
          SizedBox(height: 10),
          _buildDetail("총 경력기간", "신입"),
          SizedBox(height: 10),
        ],
      ),
    );
  }

  Container _buildIntro(String introContent) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "소개",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          Container(
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(1),
            ),
            width: 30,
            height: 3,
          ),
          SizedBox(height: 10),
          Container(
            decoration: BoxDecoration(),
            child: Text(
              "${introContent}",
              style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.normal,
                  color: gSubTextColor),
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }

  Container _buildDetail(String detailTitle, String detailContent) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "${detailTitle}",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 5),
          Text(
            "${detailContent}",
            style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.normal,
                color: gSubTextColor),
          ),
        ],
      ),
    );
  }
}

3. profile_detail_page

import 'package:finalproject_front/constants.dart';
import 'package:finalproject_front/pages/user/user_profile_detail/components/profile_detail.dart';
import 'package:finalproject_front/pages/user/user_profile_detail/components/profile_header.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppbar(context),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              ProfileHeader(),
              SizedBox(height: 20),
              ProfileDetail(),
              SizedBox(height: 20),
              _buildProfileInsertButton(context),
            ],
          ),
        ),
      ),
    );
  }

  InkWell _buildProfileInsertButton(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, "/ProfileInsertPage");
      },
      child: Container(
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: gButtonOffColor,
        ),
        child: Align(
          alignment: Alignment.center,
          child: Text(
            "프로필 등록/수정하기",
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }

  AppBar _buildAppbar(BuildContext context) {
    return AppBar(
      elevation: 1,
      centerTitle: true,
      title: Text(
        "프로필",
        style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
      ),
      leading: IconButton(
          icon: Icon(
            CupertinoIcons.back,
            color: Colors.black,
            size: 30,
          ),
          onPressed: () {
            Navigator.pop(context);
          }),
    );
  }
}