[Flutter] instagram_clone 앱 UI 제작하기

 

이전에도 말했듯이 이번 여름방학에는 flutter를 배워보겠다고 했었다. 그래서 인프런 강의를 하나 결제해서 열심히 했다.

그리 긴 강의가 아니었기 때문에 2주정도 잡고 강의 듣기를 시작했었다. 실제로 중반부의 프론트엔드 부분까지는 일주일 만에 다 했다. dart 언어 문법도 한번 공부하고 귀찮아서 안하는 날도 있었기 때문에 굉장히 순조롭게 잘 진행이 되었다.

https://inf.run/1b7s

Flutter 입문 - 안드로이드, iOS 개발을 한 번에 - 인프런 | 강의

 

구현

모든 코드를 소개할 수 없으니 깃허브 링크를 남겨두겠다. 전체 코드를 확인하고 싶은 사람은 깃허브를 참고 바란다. 이 글에서는 포인트가 되는 부분이나 개인적으로 신기했던 코드만 리뷰해보도록 하겠다.

https://github.com/mobuktodae/Instagram_clone

GitHub - mobuktodae/Instagram_clone

 

참고로 이 글을 쓰는 시점에 이미 백엔드까지 구현했지만, 구현 안했다고 가정하고 글을 쓰겠다.

 

1. login Page

 

중간에 보이는 Google sign in 버튼은 내가 따로 만든 것이 아니라 지원하는 것을 배치한 것이다. 이렇게 자주 쓰는 버튼의 경우 굉장히 편하게 제작할 수 있었다. 

 SignInButton(
              Buttons.Google,
              onPressed: () {
                _handleSignIn().then((user) {
                  print(user);
                });

 

2. TabPage

home, search, account 총 3개의 탭을 제작할 것이고 이를 이어주는 곳이 TabPage였다. 

네비게이션 바

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pages = [
      HomePage(widget.user),
      SearchPage(widget.user),
      AccountPage(widget.user),
    ];
  }

이렇게 각 페이지들을 저장해둔 아래 네비게이션바의 버튼들을 눌렀을 때 이동되도록 만들었다. 

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _pages[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.black,
        onTap: _onItemTapped,
        currentIndex: _selectedIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(label: 'Search',
              icon: Icon(Icons.search), ),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: 'account'),
        ],
      ),
    );
  }

네비게이션 바가 정말 편리했던 것이 우리가 흔히 보는 아이콘들을 지원해서 적은 양의 코드로도 좀 괜찮아 보이는 효과가 있었다. 

2-1) HomePage

 

Home을 눌렀을 때 나오는 부분이다. 모자이크 된 부분은 계정 프로필사진, 이메일주소, 이름이 적혀있다. 하드코딩으로 만들어졌는데 나중에 구글 계정을 연동하면 계정에 따라 바뀔 수 있도록 만들 예정이다. 

 

2-2) Search Page

 

이 곳은 글을 작성하고 확인할 수 있는 곳이다. 지금 보니 저기 플로팅버튼을 흰색으로 바꿔주는 걸 잊어버렸다는 사실을 알게 되었다. (백엔드 하다가 오류나서 몇번 갈아엎다가 까먹음)

저기 플로팅 버튼도 기본적으로 지원하는 것 중 하나라서 매우 쉽게 만들었다. 

floatingActionButton: FloatingActionButton(onPressed: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => CreatePage(widget.user)
              )
          );
      },
        backgroundColor: Colors.blue,
        child: Icon(Icons.create),
      ),

이런식으로 플로팅버튼을 만들고 안에 속성만 지정해준다음 눌렀을 때 발생할 이벤트만 지정해주면 가볍게 완성된다.

 

 

2-2-1) Create Page 

플로팅 버튼을 누르면 나오는 곳이다. 이미지 삽입과 내용을 입력하여 글을 작성할 수 있다. 

 

 

3) Account Page

 

계정 정보를 확인할 수 있는 곳이다. 위쪽 AppBar에 있는 나가기 버튼을 누르면 로그아웃되어서 처음 로그인 페이지로 이동할 수 있다. 

 

 

 

이렇게 모아두니 별로 만든건 없지만, 다양한 기능을 배웠고 이 것을 응용해서 기본적인 앱의 모양은 구현할 수 있을 것 같다. 사실 앱이나 웹을 만들때는 기본적인 사용법만 익히고 프로젝트를 하나 해서 원하는 기능을 구현하기 위한 무한 구글링으로 실력을 키워가는 것이 더 좋다고 생각하기 때문에 굉장히 만족했다. 

 

여기까지는 정말 행복했다. 뭐 버전 업데이트로 충돌나는 것이 있었지만, 충분히 다른 코드로 대체할 수 있는 수준이었기 때문이다. 백엔드 부분에서 한달 이상 정체될 줄은 진짜 몰랐다. 백엔드 이야기는 다음 글에서 계속 올리겠다.