오늘의 목표
#1. 프로젝트 생성 (시작이 반이다.)
#2. firebase 프로젝트 생성
#3. 로그인 화면 만들기
#4. 하단부 bottomNavigator로 각 페이지 연결해주기
#1. 프로젝트 생성 (시작이 반이다.)
#2. firebase 프로젝트 생성
- Android 앱 추가
- iOS 앱 추가
#3. 로그인 화면 만들기
- 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페이지와 연결되는 아이콘
],
),
);
}
댓글