Flutter Chapter-02-13 내 정보 만들기

현재까지 배운 내용으로 이제 내 정보 만들기가 이해가 될 것으로 생각한다.

출력되는 이미지와 코드를 통해서 어떻게 작동했는지 확인해보고, 수정 혹은 모르는 부분은 댓글로 달아주길 바랍니다.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      Text('010-XXXX-XXXX', style: TextStyle(
                          fontFamily: 'BlackHanSans-Regular',
                          fontSize: 15)
                      ),
                      Icon(
                        Icons.notifications_none,
                        color: Colors.black,
                        size: 26,
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 8,
                ),
                const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5),
                    child: Text(
                      '아이디 회원 전환 >',
                      style: TextStyle(
                          fontSize: 13,
                          fontFamily: 'BlackHanSans-Regular'
                      ),
                    )),
                const SizedBox(
                  height: 15,
                ),
                Container(
                  decoration: BoxDecoration(
                    color: const Color(0xff1f1d35),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  padding: const EdgeInsets.all(20),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const CircleAvatar(
                            radius: 12,
                            backgroundColor: Color(0xff343a52),
                            child: Icon(
                              Icons.home,
                              color: Color(0xfff7f7ff),
                              size: 20,
                            ),
                          ),
                          const SizedBox(
                            width: 5,
                          ),
                          const Text(
                            '내 쿠폰',
                            style: TextStyle(
                              fontFamily: 'BlackHanSans-Regular',
                              fontSize: 20,
                              color: Color(0xfff7f7ff),
                            ),
                          ),
                          Expanded(child: Container()),
                          const Text(
                            '1',
                            style: TextStyle(
                              fontFamily: 'BlackHanSans-Regular',
                              fontSize: 20,
                              color: Color(0xfff7f7ff),
                            ),
                          ),
                        ],
                      ),
                      const Divider(color: Color(0xff353349), thickness: 2.0),
                      Row(
                        children: [
                          const CircleAvatar(
                            radius: 12,
                            backgroundColor: Color(0xff343a52),
                            child: Icon(
                              Icons.home,
                              color: Color(0xfff7f7ff),
                              size: 20,
                            ),
                          ),
                          const SizedBox(
                            width: 5,
                          ),
                          const Text(
                            '내 정보 포인트',
                            style: TextStyle(
                              fontFamily: 'BlackHanSans-Regular',
                              fontSize: 20,
                              color: Color(0xfff7f7ff),
                            ),
                          ),
                          Expanded(child: Container()),
                          const Text(
                            '0 P',
                            style: TextStyle(
                              fontFamily: 'BlackHanSans-Regular',
                              fontSize: 20,
                              color: Color(0xfff7f7ff),
                            ),
                          ),
                        ],
                      ),
                      const Divider(color: Color(0xff353349), thickness: 2.0),
                      Row(
                        children: [
                          const CircleAvatar(
                            backgroundColor: Color(0xff343a52),
                            radius: 12,
                            child: Icon(
                              Icons.home,
                              color: Color(0xfff7f7ff),
                              size: 20,
                            ),
                          ),
                          const SizedBox(
                            width: 5,
                          ),
                          const Text(
                            '내 정보 캐쉬',
                            style: TextStyle(
                                fontFamily: 'BlackHanSans-Regular',
                                fontSize: 20, color: Color(0xfff7f7ff)),
                          ),
                          Expanded(child: Container()),
                          const Text(
                            '0 P',
                            style: TextStyle(
                                fontFamily: 'BlackHanSans-Regular',
                                fontSize: 20, color: Color(0xfff7f7ff)),
                          ),
                        ],
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Container(
                        margin: const EdgeInsets.symmetric(
                            vertical: 0.5, horizontal: 1),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            color: const Color(0xff312e49)),
                        padding: const EdgeInsets.symmetric(
                            vertical: 5, horizontal: 1),
                        child: const Center(
                          child: Text('쿠폰·포인트·캐쉬등록',
                              style: TextStyle(
                                  fontFamily: 'BlackHanSans-Regular',
                                  fontSize: 15, color: Color(0xfff7f7ff))),
                        ),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                const SizedBox(
                  height: 20,
                ),
                Container(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 25, vertical: 5),
                  decoration: BoxDecoration(
                    color: const Color(0xfff7f7f7),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.home,
                        color: Color(0xff606060),
                        size: 20,
                      ),
                      const SizedBox(
                        width: 12,
                      ),
                      const Text(
                        '내 정보 캐쉬 · 쿠폰',
                        style:
                        TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 20, color: Color(0xff181818)
                        ),
                      ),
                      Expanded(child: Container()),
                      const Icon(
                        Icons.keyboard_arrow_right,
                        color: Color(0xff181818),
                        size: 20,
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      children: const [
                        Text('업데이트', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text('구매내역', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                        SizedBox(
                          height: 10,
                        ),
                        Text('계정관리', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                        SizedBox(
                          height: 10,
                        ),
                        Text('설정', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                      ],
                    ),
                    Column(
                      children: const [
                        Text('다운로드관리', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                        SizedBox(
                          height: 10,
                        ),
                        Text('고객센터', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                        SizedBox(
                          height: 10,
                        ),
                        Text('공지사항', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                        SizedBox(
                          height: 10,
                        ),
                        Text('이용안내', style: TextStyle(
                            fontFamily: 'BlackHanSans-Regular',
                            fontSize: 17)),
                      ],
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}