[flutter] 인스타그램 클론코딩_account_page ui 작성

간단해 보이는 페이지 하나하나를 만들기 위해 이렇게 많은 노고가 들어가는지 몰랐다..
하면 할수록 느끼는 건데, 나는 진짜 프론트랑 안 맞는 것 같다
차라리 좀 어려워도 백엔드가 더 재밌는 것 같다...

그럼, 거두절미하고
이제 개인 페이지 ui를 설계해보자.
우선 완성된 페이지의 ui를 보고 어떻게 구성을 잡으면 좋을지를 구상해보자.

정리해보면 다음과 같다.
1. appbar의 경우, text와 함께 로그아웃 버튼(오른쪽)이 존재한다.
2. 전체적인 box는 row로 되어 있다.
3. 프로필 부분은 column으로 되어 있다.
프로필 안에는 + 문양의 둥근 버튼이 있다. 이는 프로필과 겹쳐야 하는 부분으로, 이런 부분은 Stack을 통해 나타낼 수 있다.

전체 코드는 다음과 같다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Instargram Clone'),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.exit_to_app),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                Stack(
                  children: [
                    const SizedBox(
                      width: 80,
                      height: 80,
                      child: CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2022/06/03/7d17ec30-276f-4265-b056-c3a691a5a8f1.jpg'),
                      ),
                    ),
                    Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.bottomRight,
                      child: const Stack(
                        alignment: Alignment.center,
                        children: [
                          SizedBox(
                            width: 28,
                            height: 28,
                            child: FloatingActionButton(
                              onPressed: null,
                              backgroundColor: Colors.black,
                            ),
                          ),
                          SizedBox(
                            width: 25,
                            height: 25,
                            child: FloatingActionButton(
                              onPressed: null,
                              child: Icon(Icons.add),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 8,
                ),
                const Text(
                  'NANA',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const Column(
              children: [
                Text(
                  '3',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '게시물',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
            const Column(
              children: [
                Text(
                  '0',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '팔로워',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
            const Column(
              children: [
                Text(
                  '0',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '팔로잉',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

이제 하나하나 뜯어보며 기능을 익혀보자.

1. AppBar

appBar: AppBar(
        title: const Text('Instargram Clone'),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.exit_to_app),
          ),
        ],
      ),

AppBar의 경우 말했던 것처럼 텍스트와 로그아웃 버튼이 존재한다.
여기서 로그아웃 버튼을 구현하기 위해 action 선언을 해서 그 안에 IconButton을 넣어준다.

actions
action[]은 AppBar의 오른쪽에 표시되는 작은 아이콘 또는 버튼의 집합을 의미한다.
onPressec는 아직 구현하지 않았기에 빈칸으로 뒀다.

2. 게시물, 팔로워 text 설정

다음으로 구성된 row 박스 안에 게시물, 팔로워에 대한 text를 넣어보도록 하겠다.

const Column(
              children: [
                Text(
                  '3',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '게시물',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
            const Column(
              children: [
                Text(
                  '0',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '팔로워',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
            const Column(
              children: [
                Text(
                  '0',
                  style: TextStyle(fontSize: 18),
                ),
                Text(
                  '팔로잉',
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),

각각은 내부에서 Column으로 구성 되므로(세로로 되어 있다.) Column으로 묶어 준다.
children을 통해 내부에 넣을 text들을 구성한다. "style:"을 통해 text 크기를 지정했다.

Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,

또한 상위에 padding을 줘서 간격이 16으로 유지되도록 하였다.
mainAxisAlignment: MainAxisAlignment.spaceBetween을 통해 자식 위젯들이 동일한 간격으롷 유지되면서 양쪽으로 분산될 수 있도록 한다.

3. 프로필 설정

프로필과 닉네임도 세로 방향 정렬이 되어 있다.(column)즉, column 정렬이 되어 있다는 의미이다. 그러므로 column을 row안에 설정하고 프로필을 만들어준다.

Column(
              children: [
              const SizedBox(
                      width: 80,
                      height: 80,
                      child: CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2022/06/03/7d17ec30-276f-4265-b056-c3a691a5a8f1.jpg'),
                      ),
                    ),
                  ],
                ),
                

프로필의 경우, 앞에서 했던걸 그대로 옮겨왔기 때문에 동일하다.
또한, 프로필과 버튼이 겹쳐야 하기 때문에 프로필 역시 Stack으로 설정한다.

4. Stack을 통한 button 설정

프로필과 겹쳐져 있는 +버튼의 경우. Stack으로 선언해야 한다.

Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.bottomRight,
                      child: const Stack(
                        alignment: Alignment.center,
                        children: [
                          SizedBox(
                            width: 28,
                            height: 28,
                            child: FloatingActionButton(
                              onPressed: null,
                              backgroundColor: Colors.black,
                            ),
                          ),
                          SizedBox(
                            width: 25,
                            height: 25,
                            child: FloatingActionButton(
                              onPressed: null,
                              child: Icon(Icons.add),
                            ),
                          ),
                        ],
                      ),

SizedBox(
                            width: 25,
                            height: 25,
                            child: FloatingActionButton(
                              onPressed: null,
                              child: Icon(Icons.add),
                            ),
                          ),

우선 FloatingActionButton을 이용해서 +모양의 button을 생성한다.

FloatingActionButton
"FloatingActionButton"은 플러터(Flutter) 프레임워크에서 제공하는 위젯 중 하나이다. 이 위젯은 일반적으로 앱의 주요 작업을 나타내는 둥근 아이콘 버튼을 표시하는 데 사용된다.

Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.bottomRight,

버튼을 나타내는 Stack의 상위에는 다음과 같이 정의해둔다.
alignment: Alignment.bottomRight을 통해 자식 위젯을 오른쪽으로 정렬하고. 정렬 대상 box는 width: 80,height: 80을 통해 프로필과 같은 80으로 지정한다.

SizedBox(
                            width: 28,
                            height: 28,
                            child: FloatingActionButton(
                              onPressed: null,
                              backgroundColor: Colors.black,
                            ),
                          ),

추가적으로 버튼 뒤의 검정색 선을 표현하기 위해 다음과 같이 같은 형태의 버튼을 생성한다. backgroundColor: Colors.black를 통해 블랙 컬러의 선이 생길 수 있도록 한다.

5. 결과