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

0. Home ui 틀 설계

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Instargram Clone'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 20),
            Text('Instargram에 오신 것을 환영합니다.'),
            SizedBox(height: 20),
            Text('사진과 동영상을 보려면 팔로우하세요'),
            SizedBox(height: 20),
            Card(
              child : Column(
                children: [
                  Text('이미지'),
                  Text('이메일'),
                  Text('닉네임'),
                  Text('사진들 3개'),
                  Text('Facebook 친구'),
                  ElevatedButton(
                      onPressed: (){},
                      child: Text('팔로우'),
                  ),
                ],
              )
            ),
          ],
        ),
      ),
    );
  }
}

ui를 디자인 하기 전에, 미리 text를 통해 위치 틀을 잡고 가면 더 쉽게 화면을 생성할 수 있다.

우선 우리가 구현할 화면의 경우, 다음과 같은 구성으로 이뤄져 있다.

• 이미지(프로필)
• 이메일
• 닉네임
• 대표 사진
  - 세개의 사진은 가로 방향으로 되어 있다.
• face book 친구
• 관련 버튼

이렇게 잡아두고, 전체적인 요소를 구현해보자.

전체 코드는 다음과 같다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Instargram Clone'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 20),
            const Text('Instargram에 오신 것을 환영합니다.'),
            const SizedBox(height: 20),
            const Text('사진과 동영상을 보려면 팔로우하세요'),
            const SizedBox(height: 20),
            Card(
              elevation: 4.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: 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'),
                      ),
                    ),
                    const SizedBox(height: 8), //padding
                    const Text(
                      'test@test.com,',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const Text('닉네임'),
                    const SizedBox(height: 8),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.network(
                          'https://thumb.mtstarnews.com/06/2022/09/2022092418122613152_1.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.mediafine.co.kr/news/photo/202305/30454_52145_5511.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.topstarnews.net/news/photo/202307/15371470_1150533_2335.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),
                    const SizedBox(height: 8),
                    const Text('Facebook 친구'),
                    const SizedBox(height: 8),
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('팔로우'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

그럼 이제 앞에서 명시해 뒀던 순서대로 하나하나 구현해보자.

1. 프로필

앞에서 말했던 것처럼, 카드 안에 존재하는 화면들은 세로로 나열되어 있다.
프로필을 설정하기 위해선 cicle 형태의 이미지를 가져와야 한다.
우선 CircleAvatar를 통해 원형 형태의 이미지 틀을 만든다.

CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2022/06/03/7d17ec30-276f-4265-b056-c3a691a5a8f1.jpg'),
                      ),

여기에 들어갈 이미지는 backgroundImage:를 통해 설정이 가능한데, 편의상 이번 실습에서는 Network의 이미지를 가져와서 실습을 하도록 하겠다.

중요한 것은 CircleAvatar 내부에는 사이즈를 명시하기 위한 속성이 없다는 것이다. 이럴 경우 SizedBox로 감싸면 사이즈를 지정할 수 있다. 다음과 같이 SizedBox로 감싸고, width와 height를 명시해주자.

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'),
                      ),
                    ),

2. 닉네임 & 이메일 text

const Text(
                      'test@test.com,',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const Text('닉네임'),

Text의 경우는 Text 내부에 원하는 Text를 입력하고, style을 통해 굵기와 같은 스타일을 지정하면 된다.

3. 가로방향 사진

Row(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.network(
                          'https://thumb.mtstarnews.com/06/2022/09/2022092418122613152_1.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.mediafine.co.kr/news/photo/202305/30454_52145_5511.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.topstarnews.net/news/photo/202307/15371470_1150533_2335.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),

사진의 경우 가로 방향으로 놓여져야 하기 때문에 Row로 묶어준다.
Row의 경우. 전체 화면을 채우려는 경향이 있기 때문에 카드를 만들 수 없다.
그러므로 다음의 코드를 사용해 카드의 크기를 유지할 수 있도록 지정한다.

mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,

이미지는 Children 배열 안에 각각 넣어주면 된다.

Image.network(
                          'https://thumb.mtstarnews.com/06/2022/09/2022092418122613152_1.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),

이번에도 편의를 위해 Network 이미지를 이용했다.
fit: BoxFit.cover의 경우, 이미지의 크기, 방향이 어떻듯 같은 크기로 맞추기 위해 넣어주는 속성이다.

children: [
                        Image.network(
                          'https://thumb.mtstarnews.com/06/2022/09/2022092418122613152_1.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.mediafine.co.kr/news/photo/202305/30454_52145_5511.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 4),
                        Image.network(
                          'https://cdn.topstarnews.net/news/photo/202307/15371470_1150533_2335.jpg',
                          width: 70,
                          height: 70,
                          fit: BoxFit.cover,
                        ),
                      ],

세개의 이미지를 넣어 주기 위해 세개의 리스트 요소를 생성한다.
각각의 이미지 사이에는 다음을 통해 약간의 Padding 값을 주었다.

const SizedBox(width: 4)

4. 전체 모양 속성

Card(
              elevation: 4.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),

• elevation은 그림자를 주기 위한 속성이다.
• Padding(의 경우, child에 넣어 내부 간격이 생기도록 한다.
  • EdgeInsets.all(16.0),을 통해 모든 edge에 16씩 패딩을 넣을 수 있다.

5. 결과

---

⭐ const는 맨 나중에 지정하는 것이 좋다. (alt + enter)
⭐ ctrl + alt + l을 눌러서 코드를 정리할 수 있다.