Flutter instargram5 Flutter & Firebase - 인스타그램 클론 (5-1) - 프로필 화면 만들기 오늘의 목표 프로필 페이지를 만들어보자. 내 프로필을 보는 경우, 프로필 편집 버튼이 보여야 할 것이며 다른 사용자의 프로필을 보는 경우, 팔로우 상태가 아니라면 팔로우 버튼이 보여야 하고 팔로우 상태라면 언팔로우 버튼이 보여야 할 것이다. #1. 프로필 화면 구성 #2. 프로필 화면 결과 화면 #3. 프로필 수정 화면 #4. 프로필 수정 화면 결과 화면 #1. 프로필 화면 구성 - 기본 화면 구성 중 프로필 상단부 영역 // build method @override Widget build(BuildContext context) { return Scaffold( appBar: header(context, isAppTitle: false, title: 'Profile',), body: ListView( c.. 2020. 9. 3. Flutter & Firebase - 인스타그램 클론 (4) - 업로드 화면 만들기 오늘의 목표 이미지를 업로드하기 위한 페이지를 만들어보자. 이미지는 카메라 촬영, 갤러리에서 가져오기의 기능으로 가져올 것이다. #1. 업로드 화면 구성 #2. 업로드 화면 #3. 결과 화면 #1. 업로드 화면 구성 - Upload Image 버튼 클릭 - 사진촬영/갤러리에서 가져오기 기능을 위한 다이얼로그 팝업 - 사진 선택 후 게시를 위한 동작 (share버튼 클릭시) #2. 업로드 화면 - 업로드화면 displayUploadScreen() { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.add_photo_alternate, color: Colors.grey, siz.. 2020. 9. 2. Flutter & Firebase - 인스타그램 클론 (3) - 사용자 검색화면 만들기 오늘의 목표 사용자를 검색하는 사용자 검색화면(Search Page)을 만들어보자. 검색어 입력시 입력한 검색어와 일치하거나 검색어를 포함하는 사용자 리스트를 보여주게 된다. #1. 검색창 화면 구성 #2. 검색창(상단) 만들기 #3. 검색결과(하단) 만들기 #4. 참고내용 #5. 결과화면 #1. 검색창 화면 구성 - 상단 : appBar로 된 검색창 - 하단 : 검색 결과를 보여줄 ListView @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: searchPageHeader(), body: futureSearchResults == null ? displayNoSearc.. 2020. 9. 2. Flutter & Firebase - 인스타그램 클론 (2) - 기본 화면 만들기 (OAuth 구글 로그인) 오늘의 목표 앞서 추가한 기본 화면에 구글 SignIn 버튼을 실제로 동작하도록 구현해보자. #0. 구글 SignIn 관련 variable 설명 #1. 앱 시작시 build 전 initState #2. 구글 SignIn 버튼 클릭시 동작 #0. 구글 SignIn 관련 variable 설명 - GoogleSignIn : 구글 로그인의 기능을 담당할 변수 - GoogleSignInAccount : 구글 로그인시 계정을 담을 변수 - userReference : 로그인시 user정보 db(firestore)에 저장할 때 사용할 변수 - isSignedIn : 앱 시작시 기 로그인여부를 확인할 변수 - DocumentSnapshot : Firestore에서 실시간 데이터를 주고받을 때 사용하는 용도 // var.. 2020. 9. 2. Flutter & Firebase - 인스타그램 클론 (1) - 기본 화면 만들기 (로그인 페이지) 오늘의 목표 #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 ext.. 2020. 8. 31. 이전 1 다음
