본문 바로가기
프로그래밍/Flutter & Dart

Flutter & Firebase - 인스타그램 클론 (1) - 기본 화면 만들기 (로그인 페이지)

by 어느덧중반 2020. 8. 31.
반응형



오늘의 목표


 

#1. 프로젝트 생성 (시작이 반이다.)

#2. firebase 프로젝트 생성

#3. 로그인 화면 만들기

#4. 하단부 bottomNavigator로 각 페이지 연결해주기

 


 

#1. 프로젝트 생성 (시작이 반이다.)

 

#2. firebase 프로젝트 생성

 - Android 앱 추가

 - iOS 앱 추가

firebase 메인으로 가서 프로젝트 하나 생성하자. (이름은 아무거나 원하는대로 생성)
자, 프로젝트 생성시 app ID가 필요한데 위의 ID를 복사해주자. (위의 캡쳐화면은 안드로이드 앱을 만들 때 필요하다)
복사 붙여넣기
생성된 .json 파일을 저장해서 flutter > android > app 경로에 복사해서 붙여넣자.
대략 이런 경로쯤 되겠다.
붙여넣은 폴더경로 참고
classpath를 복사하자.
android > build.gradle 파일의 dependencies 위치에 맞추어 넣자. (하는 이유는 해당 구글서비스를 내 앱에서 사용할게요. 정도로 이해하자.)
다음은 plugin 관련 부분도 넣어주자. (주의할 것은 이 것은 android > app > src > build.gradle 위치에 넣어줘야 한다.)
아까 빼먹은게 있는데, SHA-1, SHA256도 처음부터 추가해주는 것이 좋다. (위의 코드를 터미널에서 실행하면 나의 키를 알 수 있을 것이다.
이렇게 추가해주면 된다.
SHA-1, SHA-256 다 추가해주자.
이번엔 iOS 앱을 추가해보자. XCode에서 열면 Bundle ID를 찾을 수 있을 것이다. 이거 복사하자.
iOS 앱 추가시 bundle id 추가하고 다음화면 클릭하면 plist 파일을 다운받을 수 있다. 이거 다운받자.
XCode를 열어 Runner 바로 밑에 GoogleService-Info.plist를 복사붙여넣기 해주자 (반드시 XCode에서 실행할 것)

 

#3. 로그인 화면 만들기

main.dart 파일의 하단부는 모두 삭제하자. 기본 컬러들을 설정해두자.

 - home_page.dart 파일을 생성하고 간단히 구글 버튼을 추가해보자.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isSignedIn = false;

  buildHomeScreen() {
    return Text('already signed in');
  }

  buildSignInScreen() {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Theme.of(context).accentColor,
              Theme.of(context).primaryColor
            ]
          )
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              'Instargram',
              style: TextStyle(
                fontSize: 70,
                color: Colors.white,
                fontFamily: 'Signatra'
              ),
            ),
            GestureDetector(
              onTap: ()=>
                print('button tapped'),
              child: Container(
                width: 260,
                height: 60,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/google_signin_button.png'),
                    fit: BoxFit.cover
                  )
                ),
              ),
            )
          ],
        )
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    if(isSignedIn) {
      return buildHomeScreen();
    } else {
      return buildSignInScreen();
    }

  }
}

 

#4. 하단부 bottomNavigator로 각 페이지 연결해주기

 - PageView를 이용해 각 페이지를 연결시켜주자. 이 때 PageController가 필요하다. 원리는 아래와 같다.
   1. 하단부(bottomNavigatorBar의 이동할 아이콘 클릭 -> ex. 프로필 아이콘 클릭시 프로필 페이지 이동)
   2. pageController가 이를 감지하여 현재 페이지를 이동할 아이콘에 해당하는 페이지로 변경시켜줌

해당 부분 소스

// 페이지가 바뀔 때 현재페이지의 index를 바꿔주자
whenPageChanges(int pageIndex) {
  setState(() {
    this.getPageIndex = pageIndex;
  });
}

// 다른 페이지에 해당하는 아이콘 클릭시 실제로 페이지를 바꿔주자
onTapChangePage(int pageIndex) {
  pageController.animateToPage(pageIndex, duration: Duration(milliseconds: 400), curve: Curves.bounceInOut);
}

buildHomeScreen() {
  return Scaffold(
    body: PageView(
      children: <Widget>[
        // 정상 로그인시 홈스크린 보인다.
        TimeLinePage(), // 0번 pageIndex
        SearchPage(), // 1번 pageIndex
        UploadPage(), // 2번 pageIndex
        NotificationsPage(), // 3번 pageIndex
        ProfilePage(), // 4번 pageIndex
      ],
      controller: pageController, // controller를 지정해주면 각 페이지별 인덱스로 컨트롤 가능
      onPageChanged: whenPageChanges, // page가 바뀔때마다 whenPageChanges 함수가 호출되고 현재 pageIndex 업데이트해줌
      physics: NeverScrollableScrollPhysics(),
    ),
    bottomNavigationBar: CupertinoTabBar(
      currentIndex: getPageIndex, // 현재 페이지에 해당하는 아이콘과 연결
      onTap: onTapChangePage, // 아이콘을 탭하여 페이지 이동을 한다면 onTapChangePage
      activeColor: Theme.of(context).dialogBackgroundColor, // 현재 페이지에 해당하는 아이콘 색
      inactiveColor: Colors.black38, // 비활성된 페이지에 해당하는 아이콘 색
      backgroundColor: Colors.white, // 네비게이션바의 배경 색상
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home)), // 0페이지와 연결되는 아이콘
        BottomNavigationBarItem(icon: Icon(Icons.search)), // 1페이지와 연결되는 아이콘
        BottomNavigationBarItem(icon: Icon(Icons.photo_camera, size: 35)), // 2페이지와 연결되는 아이콘
        BottomNavigationBarItem(icon: Icon(Icons.notifications)), // 3페이지와 연결되는 아이콘 
        BottomNavigationBarItem(icon: Icon(Icons.person)), // 4페이지와 연결되는 아이콘
      ],
    ),
  );
}



반응형

댓글0