5. MyPage

 

1. 구조 먼저 잡기 

- 전체적인 구조는 Column으로 사용 .

- 패딩 값은 마지막에 준다.

---

1. 제일 위 profile부분 

전문가로 전환하는 버튼은 icon,text를 같이 쓰고있어서 InkWell을 썻다.

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

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

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

  Container _buildProfileText() {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 40,
            height: 15,
            decoration: BoxDecoration(
              color: gClientColor,
              borderRadius: BorderRadius.circular(5),
            ),
            child: Text(
              "의뢰인",
              style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 10),
          Text(
            "green123456",
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          InkWell(
            onTap: () {},
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                border: Border.all(color: gBorderColor),
              ),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 3.0, horizontal: 5.0),
                child: Row(
                  children: [
                    Icon(
                      CupertinoIcons.person_2,
                      size: 18,
                      color: gPrimaryColor,
                    ),
                    SizedBox(width: 10),
                    Text(
                      "전문가로 전환",
                      style: TextStyle(fontSize: 10),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

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

 

2. 구매중인 주문

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "구매중인 주문",
                style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              ),
              InkWell(
                onTap: () {
                  //전체보기 페이지로 이동
                },
                child: Text(
                  "전체보기",
                  style: TextStyle(fontSize: 10, fontWeight: FontWeight.normal),
                ),
              ),
            ],
          ),
          SizedBox(height: 10),
          Container(
            width: double.infinity,
            height: 100,
            decoration: BoxDecoration(
              color: gContentBoxColor,
              borderRadius: BorderRadius.circular(5),
            ),
            child: Center(
              child: Text(
                "구매중인 주문 내역이 없습니다.",
                style: TextStyle(color: gSubTextColor, fontSize: 12),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

 

3. 나의 서비스

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "나의 서비스",
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          _buildMyService("결제/환불내역"),
          SizedBox(height: 10),
          _buildMyService("쿠폰/프로모션"),
          SizedBox(height: 10),
          _buildMyService("고객센터"),
        ],
      ),
    );
  }

  Row _buildMyService(String service) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          "$service",
          style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.normal,
              color: gSubTextColor),
        ),
        Icon(
          CupertinoIcons.right_chevron,
          size: 14,
          color: gSubTextColor,
        )
      ],
    );
  }
}

 

4. 이미지 부분

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 125,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(
            image: NetworkImage("https://picsum.photos/200"),
            fit: BoxFit.cover),
      ),
    );
  }
}