개발
-
Flutter - 코딩마스터하기|페이스북 로그인개발/Flutter 2021. 11. 9. 17:29
페이스북 로그인 일단 pub.dev에서 flutter_facebook_login: ^3.0.0를 설치해 준 후(현재 개발 중단으로 보임, pub get하면 마이그레이션 하라고함 나중에 다른 라이브러리로 해볼것), read me에서 안드로이드 부분의 파란 링크부분을 클릭해서 프로젝트르 생성하거나, 기존의 프로젝트를 선택한다. 그 후 4번의 리소스 및 메니페스트 수정으로 가서 첫번째 것을 복사 해준 뒤에, android - app - src - main - res - values 에 strings.xml을 만들어 주고 resources안에 복사한것을 붙여준다.(같은 경로에 있던 styles.xml 을 복사하고 resources 의 안의 내용을 지운뒤 붙여넣기 해줘도 된다.) 그리고 2번째를 복사해서 Andr..
-
Flutter - 코딩마스터하기|서치 페이지 대신 팔로/언팔로 페이지 만들기, 파이어베이스개발/Flutter 2021. 11. 8. 21:11
팔로 언팔로 페이지 만들기 우선 screens 폴더에 search_screen.dart를 만든다. 그리고 이번에 팔로/언팔로를 위해서 ListView.separated를 사용해 볼 것이다. 우선 SafeArea를 해주고 그안에 ListView.seperated를 넣어준다. 그 안에는 itemBuilder과 separatorBuilder, itemCount를 넣어주면 된다. itemBuilder은 칸의 아이템을 넣을 수 있는 부분이고 separatorBuilder는 각 item을 나눠주는 부분이다. 우선 itemBuilder와 separatorBuilder에 (context, index){}를 해주고 itemBuilder에는 return ListTile을 해준다. leading에는 RoundedAvatar..
-
Flutter - 코딩마스터하기|갤러리 레이아웃개발/Flutter 2021. 11. 4. 21:15
gallery layout 만들기 우선 widgets 폴더에 my_gallery.dart를 만들어준다. 그리고 우선 형태를 보기 위해서 return에 GridView.count를 만들어 주고 corssAxisCount에 3, children에 List.generate를 30을 준다. 그리고 index를 활용한 (index) => Image.network('이미지주소')를 줘서 다른 30개 이미지가 표현 되게 해보면 정상적으로 실행 되는 것을 볼 수 있다. class MyGallery extends StatefulWidget { const MyGallery({Key key}) : super(key: key); @override _MyGalleryState createState() => _MyGalleryS..
-
Flutter - 코딩마스터하기|Provider, 카메라 페이지 만들기2개발/Flutter 2021. 11. 4. 19:16
프로바이더 프로바이더를 통해서 데이터를 전달해줄때 프로바이더는 상위에서 하나 만들어 두면 그 아래에서는 모두 접근이 가능. 예로 탈것이라는것이 있고 차,배,비행이가 있고 각 부분에 부품들이 있으면 차에 프로바이더를 주면 차의 부품들은 접근이 가능하단거임. 배 비행기는 접근 불가. 탈것에 프로바이더를 줘서 데이터를 주면 차,배,비행기 그아래 모든 부품들도 데이터 접근 가능. 주로 사용하는 것은 ChangeNotifierProvider. 사용하기 위해서 pub.dev에서 provider를 찾아서 설치해준다. Consumer와 Provider.of 로 사용함. 데이터를 가져오기 위해서 Consumer는 context가 필요없음. context를 제공해준다. Provider.of는 context가 필요하다. 이..
-
Flutter - 코딩마스터하기|카메라 페이지 만들기개발/Flutter 2021. 11. 3. 20:59
카메라 스크린 만들기 카메라 페이지 만들고, 새창으로 띄우기 우선 screens 폴더에 camera_screen.dart 파일을 만들고 stf로 생성해준다. bottom navigation에서 가운데 버튼을 누르면 카메라 스크린이 윗부분에 뜨는게 아닌 새로 카메라 페이지를 생성되게 해줄것이기 때문에, _onBtnItemClick에서 카메라 index인 2일때 새창을 띄워 주도록 하자. 전에 배웠던 Navigator.of(context).push(MaterialPageRoute(builder: (context) => CameraScreen(),),) 을 이용해서 새창으로 CameraScreen을 불러오자. 여기서는 push를 이용하자. 그리고 이 Navigator 부분을 method 로 refactor해주..
-
Flutter - 코딩마스터하기|인증페이지 만들기2개발/Flutter 2021. 11. 2. 18:51
keyboard에 따른 화면 조절 키보드가 올라온 상태로 밑에 버튼이 올라옴. 이를 방지하기 위해서 auth_screen에서 Scaffold에서 resizeToAvoidBottomInset 옵션을 false로 해주면 키보드가 올라와도 하단의 버튼이 올라오지 않는다. 그런데 본문 부분이 아래까지 길 경우에는 보이지가 않는다. 이를 해결하기 위해서는 sign_up_form에서 해결해야 한다. Padding를 Scaffold로 감싸주고 같은 옵션을 주고 true로 해주면 된다.그리고 TextFormField border도 method로 같은 부분끼리 묶어준다. sign_up_form.dart InputDecoration _textInputDecor(String hint) { return In..
-
Flutter - 코딩마스터하기|인증페이지 만들기1개발/Flutter 2021. 11. 1. 19:08
auth screen 생성 screens 폴더에 auth_screen 파일을 만들고 statefulWidget로 만들어 준다. 그리고 import를 시켜준다. animated switcher (sign up form, sign in form) 바로바로 확인하기 위해서 main.dart에서 home을 AuthScreen()으로 바꿔준다. Scaffold안에 SafeArea를 만들고 그 안에 Container을 만들어 준다. 그리고 우선 sign in 과 sign up을 토글 시켜주기위한 버튼을 만들어 준다. FlatButton을 만들어 주고 그 안에 Text로 go to Sign up으로 해준다. 여기서 2가지 위젯을 만들어서 토글 시켜줄 것이다. widgets 폴더에 sign_up_form과 si..
-
Flutter - 코딩마스터하기|프로필스크린만들기2개발/Flutter 2021. 10. 28. 19:26
image grid 랑 custom pager 탭 부분 눌렀을때 뜨는 부분 좌우로 왔다갔다 하게 만들기. 우선 지난번에 만들었던 SliverToBoxAdapter를 정리해주자. grid와 saved의 2개 부분이 필요하므로 GridView.count 부분이 2개 필요하다는 것을 알 수 있다. 우선 GridView 를 AnimatedContainer로 감싸 준 후, duration을 300 milliseconds 주고, transform을 준다. 애니메이션의 이동방향을 지정해주는 것이라고 일단 이해해 두자. 다른 방법도 있지만, Matrix4.translationValues(x,y,z) 각 축을 이동 할 수 있다. 왼쪽창은 처음엔 x축이 0에 있다가 -size.width만큼 이동해서 안보이는 형태이다...