티스토리

comFFuny

검색하기

블로그 홈

comFFuny

ffuny.tistory.com/m

커뮤니티 만드는 건 늘 재밌어 새로워 짜릿해

구독자: 1

방명록 방문하기

반응형

주요 글 목록

Flutter | 플러터 상태관리 패키지 사용해보기 - bloc - 4. bloc 과 cubit 사용방법 이번에는 bloc와 cubit의 구조에 대해서 알아보겠습니다. 그리고 간단한 예제를 만들어 보겠습니다.그리 많은 분들이 사용하는 GetX와 간단 비교해보겠습니다. 1. GetX 동작 GetX는 presentation 영역과 비지니스 로직 영역으로 나뉘어서 관리됩니다. 일반변수와 상태변수가 있고 이벤트 함수가 있습니다. 이벤트함수는 환면에서 직접 호출을 해서 비지니스 로직을 통해 변수나 클래스를 처리하는 방식입니다. GetX는 상태를 여러가지를 Controller에 넣어서 관리를 합니다. 한가지 Controller에서 2가지 변수와 이벤트를 각각 따로 이용하도록 2가지를 같이 사용할 수도 있고, 2가지를 나눠서 연관이 있는 부분끼리 묶어서 2가지의 Controller로 나눠서 사용할 수도 있습니다. 2. .. 공감수 0 댓글수 0 2023. 2. 24.
Flutter | 플러터 상태관리 패키지 사용해보기 - bloc - 3. 알아두면 좋은 위젯 지난번에는 Bloc에서 필수로 알아둬야 할 위젯을 알아봤습니다. 이번에는 알아두면 좋은 위젯들인 BlocSelector, BlocListener, MultiBlocListener, BlocConsumer에 대해서 알아보겠습니다. 1. BlocSelector bloc에 등록된 상태들중에 필요한 부분만 선택해서 화면을 갱신해주는 위젯입니다. 3가지 generic을 BlocSelector의 형태로 사용합니다. 1번에는 bloc이나 cubit이 사용하는 부분이고, 2번은 상태값을 등록해주는 부분입니다. 3번째는 반환 타입을 지정해 줍니다. 그리고 옵션으로 selector을 필수로 사용해야 하고, 3번째로 사용한 타입으로 지정해 줘야 합니다. 그리고 지금 코드에서 설명하자면 changeState가 변경되면 bui.. 공감수 0 댓글수 0 2023. 2. 23.
Flutter | 플러터 상태관리 패키지 사용해보기 - bloc - 2. bloc 핵심 위젯 살펴보기 이번에는 개발하는남자님의 유튜브를 보고 참고하여 bloc을 직접 다뤄보겠습니다. BlocBuilder, BlocSelector, BlocProvider, MultiBlocProvider, BlocListener, MultiBlocListener, BlocConsumer, RepositoryProvider, MultiRepositoryProvider 가 있는데 이 중에 중요한 부분들인 BlocBuilder, BlocProvider, MultiBlocProvider, RepositoryProvider, MultiRepositoryProvider 를 먼저 알아보겠습니다. 1. BlocProvider 첫번째로 blocprovider입니다. bloc이나 cubit을 사용하기 위해서는 context에 등록을 해줘야.. 공감수 0 댓글수 0 2023. 2. 22.
Flutter | 플러터 상태관리 패키지 사용해보기 - bloc - 1. 리스트 목록에서 좋아하는 목록 만들기(저장 및 삭제) 플러터를 사용하다 보면 여러 페이지들의 데이터가 동기화가 필요하고 지금 페이지에서 처리한 데이터가 다른페이지에 적용이 되어야 할때가 있습니다. 이럴때 사용하는게 상태관리입니다. 현재 플러터에는 주로 4가지 상태관리 패키지를 사용합니다. 현재 사용자들에게서 논란이 많은 GetX, 많은 분들이 사용하는 Provider, Provider 개발자가 만든 신흥 강자 revierpod, 그리고 중대형 프로젝트에서 주로 쓰이지만 다른것들에 비해 조금 어려운 bloc까지, 이 4가지가 많이 사용되는데요. 다른것들은 주로 사용해 봤지만 bloc는 사용해보지 않아서 한번 해보고자 합니다. 많은분들이 1가지만 배워도 할 수있나, 아니면 다른것들도 배워야 하나 싶으실텐데 저는 지금 급한거라면 다른걸 배우기보다 지금 사용하는걸.. 공감수 0 댓글수 0 2023. 2. 21.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 7. 간단 메모 앱 배포 간단하기 알아보기 지난번 까지 완성한 앱으로 이제 앱을 배포해보도록 하겠습니다. 우선 출시 전에 확인해야할 항목들을 간단히 알아보겠습니다. 개인정보처리방침 작성 및 게시 스토어 등록정보 작성 앱 버전 업데이트 앱 정상 동작 여부 테스트 광고 설정 확인하기 개인정보처리방침 작성 및 게시는 최초 배포, 개정이 필요한 경우에만 준비를 하면 되지 나머지는 업데이트를 할때에도 매번 준비를 해줘야 합니다. 각 부분의 자세한 사항들은 검색을 통해 알아보시면 될 것 같습니다. 이제 안드로이드 앱을 만드는 법을 알아보겠습니다. 우선 앱 아이콘 변경을 해보겠습니다. 현재는 앱에 기본 플러터 로고가 들어가 있는데 앱을 출시하면 자신만의 로고를 써야 합니다. 이 앱 아이콘을 만들려면 다양한 해상도의 아이콘을 만들어야 하는데, App Icon .. 공감수 3 댓글수 0 2023. 2. 17.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 6. 메모 앱에 앱 광고 애드 몹 (Ad Mob) 달아보기 이제 메모 앱은 다 만들었습니다. 하지만 이 앱으로 광고를 달아서 돈을 벌 수 있도록 만들어 보겠습니다. 하지만 광고를 게재할때 가이드라인은 꼭 지켜주셔야 합니다. 또한 광고들에는 어떤 형태의 광고들이 있는지 확인해 보시고 내 앱에 맞는 광고를 선택하시면 보기에도 좋고 나에게 이득이 될 수 있습니다. 우선 애드몹 계정을 만들어 주시면 됩니다. 애드몹 계정을 만드시면 구글 애드센스 구글 애즈의 계정이 함께 생성됩니다. 애드센스는 웹페이지에 광고를 게재할때 사용합니다. admob.com 으로 이동하신 후 가입을 하시면 됩니다. 국가는 대한민국으로 해주시면 됩니다. 시간대는 서울을 선택해 주시고 결제 통화는 특별한 경우가 아니면 원 을 선택해 주시면 됩니다. 이제 광고 단위를 만들어 볼텐데 광고 단위를 만들려.. 공감수 1 댓글수 0 2023. 2. 16.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 5. 메모를 데이터 베이스에 저장하기 지금까지 메모 앱의 메인 목록 화면과 작성, 수정 화면, 삭제기능까지 메모 앱의 기능과 화면을 다 완성했습니다. 하지만 메모 앱을 재 실행하면 초기화가 되고 실행 중일때만 저장 되는 문제가 남아있습니다. 이를 위해 여러 방법중 스마트폰의 내부 데이터베이스에 저장을 해서 실행 시 초기화가 되지 않고 저장된 목록을 볼 수 있도록 해보겠습니다. 우선 데이터베이스란 공유해서 사용할 목적으로 체계화해서 통합 관리하는 데이터 집합니다. 쉽게 말해서 대부분의 전산 시스템에서 사용하고 있습니다. 요즘엔 앱에서도 쉽게 볼 수 있습니다. 종류는 sql과 nosql이 있습니다. 여기서는 sql로 만들겠습니다. sql은 관계형 데이터 베이스로 쉽게 생각해서 엑셀이라 생각하시면 좋을것같습니다. 여기서는 sqflite라는 패키지.. 공감수 0 댓글수 0 2023. 2. 15.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 4. 목록 화면과 메모 작성 화면 연결하기 메모 작성 화면까지 만들어 봤는데 이번에는 메인 목록 화면을 home에 띄워주고 floating action button을 누르면 메모작성화면이 나오도록 연결해 보겠습니다. 또한 작성된 노트를 삭제하거나 편집이 가능하도록 해보겠습니다. 여기서 사용할 방법은 각화면에 이름을 붙이고 이 이름을 사용해서 원하는 화면으로 이동하는 방법입니다. 각화면에 이름을 붙여보겠습니다. note_list_page에서 상의 NoteListPage의 class 안에 routeName이라는 상수를 만들어 줍니다. 기본페이지이기 때문에 /만 있게 해주시면 됩니다. static const routeName = '/'; 다음은 note_edit_page에 이름을 edit으로 지정해 주시면 됩니다. static const routeNa.. 공감수 0 댓글수 0 2023. 2. 14.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 3. 메모 작성 화면 만들기 이번에는 메모를 작성하는 화면을 만들어 보겠습니다. 새로운 화면이기때문에 새로운 dart 파일을 만들어 줍니다. note_edit_page.dart 파일을 만들어 주고 statefulWidget로 만들어 준뒤 클래스 명을 NoteEditPage로 지정해줍니다. material로 import해주시면 됩니다. Scaffold를 만들어 주신 후 appBar에 title을 Text로 노트 편집으로 작성해 줍니다. body는 Column으로 만드시고 mainAxisSize는 min으로 설정해 줍니다. 제목을 입력받기 위해서는 TextField라는 위젯을 사용합니다. TextField를 만들어 주신 후 테두리 선을 만들기 위해 decoration 속성에 InputDecoration을 사용해 줍니다. 그리고 그 안에.. 공감수 0 댓글수 0 2023. 2. 13.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 2. 메모 목록 메인 화면 만들기 이제 진짜로 메모앱을 만들어 보겠습니다. 우선 디자인적으로는 직접 마음대로 하셔도 되지만 저는 윈도우의 스티커 메모를 따라서 해보겠습니다. 제일 먼저 새로운 프로젝트를 만들어 보겠습니다. 프로젝트 이름은 sticky_memo로 해주고 스마트폰으로만 출시 할것이기때문에 안드로이드와 ios를 선택해줍니다. 안드로이드 언어와 ios 언어는 기본적으로 kotlin과 swift로 선택되어 있는데 여기서는 건드리지 않을것이기때문 각 플랫폼의 기본 언어인 java와 objective-c로 변경해 주겠습니다. 프로젝트를 생성한 후, android - app - build.gradle를 열어준 뒤 GradleException를 FileNotFoundException로 변경해줍니다. 전에 했던 기억을 되짚어보면 해당부분에.. 공감수 0 댓글수 0 2023. 2. 11.
Flutter | 간단 메모 앱 만들어보고 광고까지 달아서 배포하기 - 1. 기본 설치 및 간단한 위젯 이 내용은 CLASS 101+ 의 커니님이 강의하시는 용돈 벌어주는 나만의 앱 만들기 클래스를 보고 따라한 것입니다. 직접 강의를 보시고 하시면 더 쉽게 하실 수 있습니다. 우선 기본적인 메모앱을 만들어보기 위해서 세팅을 해봅시다. 안드로이드 스튜디오를 설치해 줍니다. 그 후 에뮬레이터를 Play Store 가 가능한 디바이스로 선택해서 설치를 해줍니다. 저는 pixel4를 선택했습니다. 그 후 자신이 원하는 안드로이드 버전을 선택해 줍니다. 저는 현재 최신 버전인 안드로이드 13을 선택했습니다. 설치가 끝난 후, 에뮬레이터를 실행한 뒤, 그대로 사용하셔도 좋지만 언어를 한글로 바꾸셔도 좋습니다. 저는 한글로 설정후 1순위로 바꿨습니다. 자 이제 기본 설정과 설치가 끝났으므로 새 프로젝트를 만들어 주겠습.. 공감수 0 댓글수 0 2023. 2. 9.
Flutter | 2023년 Flutter 다시 시작하기 - 기본 설치 잠시 쉬던 Flutter와 개발을 다시 시작해 보려 합니다. 그러려면 일단 설치부터 시작 해야겠죠? 2021.09.07 - [개발/Flutter] - Flutter 기본 세팅 이전글을 참조해서 설치해 보겠습니다. 1. Flutter 설치를 해줍니다. https://flutter.dev/docs/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. flutter.dev 위 사이트에 접속한 후 Flutter를 다운로드 받아 줍니다. 2. zip 파일 다운로드 후 압축 해제한 파일을 c:\flutter 에 옮겨주고.. 공감수 0 댓글수 0 2023. 2. 8.
안드로이드 스튜디오에서 플러터 실행시 JAVA_HOME PATH 에러 안드로이드 스튜디오는 Open JDK를 내장하고 있습니다. 따라서 별도의 자바 개발도구 (JDK; Java Development Kit)을 설치하지 않아도 됩니다. 그런데, 플러터 프로젝트에서 안드로이드 앱을 실행할 때 다음과 같은 오류가 발생하는 경우가 있습니다. ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. Please set the JAVA_HOME variable in your environment to match the location of your Java installation. 이는 플러터 개발 도구에서 안드로이드 스튜디오의 경로를 제대로 잡지 못했을 때 발생합니다. flutter doctor 명.. 공감수 1 댓글수 0 2023. 2. 8.
Flutter - 상태관리, riverpod 사용해 보기 Flutter의 상태관리는 Bloc, Provider, riverpod, GetX등이 있다. 각각으 장단점이 있겠지만 모두 한번씩은 사용해 봐야 한다는 생각이 있으므로, 우선 riverpod을 사용해 보려 한다. riverpod 과 Provider의 개발자는 같다. Provider의 부족한 부분과 단점을 보완해서 만든게 riverpod이지만 아직 Provider만큼의 기능은 하지 못한다고 한다. 그렇지만 나는 사용해볼 것이다! (flutter_hooks와 함께 사용하면 좋음) 우선 새 프로젝트를 만들어 주고 pubspec.yaml에 flutter_riverpod: ^1.0.3 를 추가해준다. riverpod은 Provider를 제공하는데 그 중 자주 사용하는 3가지를 알아 보자. dependencies:.. 공감수 0 댓글수 0 2022. 2. 8.
Flutter - 코딩마스터하기|추가강의 코멘트 맨 아래로 자동 스크롤하는 방법 코멘트 창을 열어서 댓글을 달면 현재 보이는 상태에서 새로 생성되서 안 보이는 밑에 쌓이는 것을 볼 수 있다. 맨 밑인 최신으로 이동되지 않는데 이 부분을 수정을 해보자. statefulWidget에서 setState는 되지만 여기선 stateless이므로 할 수 있는 방법을 써보자. 우선 comment_screen에서 ListView.separated에 reverse옵션을 true로 해준다. 이렇게 실행하면 가장 최신이 위로 올라가게 되는데 코멘트를 불러오는 comment_network.repository로 가서 orderby부분의 descending를 true로 바꿔준 뒤 재실행하고 코멘트를 달면 방금 단 댓글이 보이는 것을 알 수 있다. 로그아웃을 깔끔하게! .. 공감수 0 댓글수 0 2021. 11. 23.
Flutter - 코딩마스터하기|코멘트 레이아웃 create comment model 코멘트 레이아웃을 만들기 위해 코멘트 모델을 만들자. models - firestore 에 comment_model.dart를 생성해주고 다른 model을 복사해온다. 그리고 class명을 CommentModel로 바꿔준다. comment에 들어간 부분들은 String username; String userKey; String comment; DateTime commentTime; String commentKey; DocumentReference reference; 로 생성해주면 된다. 그리고 fromMap에는 username, userKey, comment, commentTime로 만들어 준다. fromSnapshot는 똑같이 두면 된다. 그리고 가장 하단의 메소드.. 공감수 0 댓글수 0 2021. 11. 23.
Flutter - 코딩마스터하기|피드페이지도 파이어스토어에 연결하기2 get followings from user model feed_screen에서 consumer와 streamprovider를 해줬던 부분에 이어서 그 값을 주는 home_page의 FeedScreen에도 Consumer로 감싸준다. builder: (BuildContext context, UserModelState userModelState, Widget child)을 생성해 주고 if문에 userModelState에서 null에 대한 부분을 지정해줘서 null이면 MyProgressIndicator를 보여주고 else 일때 FeedScreen()을 보여준다. 그리고 지난 강의에서 followings에서 대한 부분을 받았는데 FeedScreen(userModelState.userModel.followi.. 공감수 0 댓글수 0 2021. 11. 22.
Flutter - 코딩마스터하기|피드페이지도 파이어스토어에 연결하기 fetch posts from specific user 해당 유저키를 가지고 Post에 그 유저키를 가지고 해당하는 글만 가져오게 해보자. 우선 post_network_repository 로 가서 Stream getPostsFromSpecificUser(String userKey)의 메소드를 만들어 준다. return Firestore.instance.collection(COLLECTION_POSTS)으로 Post 콜렉션으로 들어가고 .where()를 추가도 달아준다. where는 sql에서 where와 같이 ()안의 조건에 따라 검색하는 것이다. 우리는 팔로우하는 유저키에 따른 포스트를 가져오고 싶으므로 .where(KYE_USERSKEY, isEqualTo: userKey) 로 해주면된다. 그리고 ... 공감수 0 댓글수 0 2021. 11. 19.
Flutter - 코딩마스터하기|파이어스토어를 통한 팔로/언팔로 fetch all users except me 팔로우한 유저의 포스트를 봐야한다. 그래서 나를 제외한 유저를 불러오는 메소드를 만들 것이다. 일단 user_network_repository.dart에서 Stream으로 Firestore.instance를 통해 받아오는 코드를 만들어 준다. Stream getAllUsersWithoutMe(){ return Firestore.instance.collection(COLLECTION_USERS).snapshots().transform(toUsersExceptMe); } 이렇게 collection을 정해주고 snapshots를 하면 해당 콜렉션의 모든것을 다 불러온다. 거기서 toUsersExceptMe를 Transformers에 만들어 준다. 기존 toUser.. 공감수 0 댓글수 0 2021. 11. 17.
Flutter - 코딩마스터하기|사진 업로드,게시하기3 , storage에 저장한 Post의 데이터를 database에 저장하기 create post model post도 모델을 생성하기 위해서 models - firestore 에 post_model.dart를 생성해준다. 그리고 user_model을 복사해와서 똑같이 만들어 주고 class 명을 PostModel로 바꿔준다. 그리고 상단에 상수들을 선언해 준다. final String postKey; final String userKey; final String username; final String postImg; final List numOfLikes; final String caption; final String lastCommentor; final String lastComment; final DateTime lastCommentTime; final int numOfC.. 공감수 0 댓글수 0 2021. 11. 16.
Flutter - 코딩마스터하기|사진 업로드,게시하기2 horizontal scroll tags 여기서 태그들은 라이브러리를 사용할 것이다. pub.dev에서 flutter_tags를 사용해보자. 강의는 0.4.8+2이고 나는 최신 버전인 flutter_tags: ^0.4.9+1 를 사용하였다. 그리고 share_post_screen으로 가서 Tags()를 만들어 준다. 우리는 가로 스크롤이 되게 할 것이므로 horizontalScroll을 true로 해준다. 그리고 우선 여기에 사용할 List를 상단에 만들어 준다. List _tagItems로 []에 아무 단어 30개 정도를 넣어준다. 그리고 Tags에서 itemCount에 _tagItems.length를 해준다. 그리고 이 Tags의 높이 부분인 heightHorizontalScroll은 30으로 해준다.. 공감수 0 댓글수 0 2021. 11. 16.
Flutter - 코딩마스터하기|사진 업로드,게시하기1 unique post key 만들기 firebase에 collection에 post와 uniqui한 키도 만들어 줄 것이다. 이미지는 firebase에 storage를 이용할 것이다. 우선 repo - helper 폴더에 generate_post_key.dart를 만들어 준다. 그리고 키를 가져오는 메소드를 만들어 주자. String getNewPostKey를 만들어주고 (UserModel userModel)을 받아온다. 그리고 파일이름 부분을 정해주는데 "${DateTime.now().millisecondsSinceEpoch}_${userModel.userKey}";로 만들어서 시간과 유저의 유니크 아이디로 조합해준다. String getNewPostKey(UserModel userModel).. 공감수 0 댓글수 0 2021. 11. 15.
Flutter - 코딩마스터하기|Firebase Firestore 사용하기2 how to cancel stream 해당 stream을 로그아웃시 취소를 해줘야 기존 로그인 유저의 데이터를 변경해도 변경이 안됨. 이작업을 해야함. 이를 위해서 main.dart에서 signin에 만들었던 부분을 메소드로 만들어 준다. _initUserModel이란 메소드로 만들어 주고 UserModelState userModelState = Provider.of(context, listen: false); 이렇게 먼저 생성해 준 다음 기존 userNetworkRepository 뒷부분을 userModelState.currentStreamSub = 에 넣어 준다. 그리고 listen의 부분을 userModelState.userModel = userModel; 이렇게 줄여준다. 그러면 userModel.. 공감수 0 댓글수 0 2021. 11. 15.
Flutter - 코딩마스터하기|Firebase Firestore 사용하기 create firestore keys constants에 firestore_keys.dart 파일을 만들어 준다. 아래에 올려준 부분을 작성해준다. 여기서 COLLECTION은 firestroe에서 collection에 해당하는 부분이 될 것이고 KEY는 collection 안에 key value에서 key의 해당하는 부분이 될 것이다. 그외에 강의는 다 어떻게 이렇게 선택하게 된건지 만드는 과정임. const COLLECTION_POSTS = 'Posts'; //COLLECTION은 firestore 의 collection부분 const COLLECTION_USERS = 'Users'; const KEY_USERSKEY ='user_key'; //KEY는 field의 key 값들 const KEY_P.. 공감수 0 댓글수 0 2021. 11. 11.
Flutter - 코딩마스터하기|페이스북 로그인 페이스북 로그인 일단 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.. 공감수 0 댓글수 0 2021. 11. 9.
Flutter - 코딩마스터하기|서치 페이지 대신 팔로/언팔로 페이지 만들기, 파이어베이스 팔로 언팔로 페이지 만들기 우선 screens 폴더에 search_screen.dart를 만든다. 그리고 이번에 팔로/언팔로를 위해서 ListView.separated를 사용해 볼 것이다. 우선 SafeArea를 해주고 그안에 ListView.seperated를 넣어준다. 그 안에는 itemBuilder과 separatorBuilder, itemCount를 넣어주면 된다. itemBuilder은 칸의 아이템을 넣을 수 있는 부분이고 separatorBuilder는 각 item을 나눠주는 부분이다. 우선 itemBuilder와 separatorBuilder에 (context, index){}를 해주고 itemBuilder에는 return ListTile을 해준다. leading에는 RoundedAvatar.. 공감수 0 댓글수 0 2021. 11. 8.
Flutter - 코딩마스터하기|갤러리 레이아웃 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.. 공감수 0 댓글수 0 2021. 11. 4.
Flutter - 코딩마스터하기|Provider, 카메라 페이지 만들기2 프로바이더 프로바이더를 통해서 데이터를 전달해줄때 프로바이더는 상위에서 하나 만들어 두면 그 아래에서는 모두 접근이 가능. 예로 탈것이라는것이 있고 차,배,비행이가 있고 각 부분에 부품들이 있으면 차에 프로바이더를 주면 차의 부품들은 접근이 가능하단거임. 배 비행기는 접근 불가. 탈것에 프로바이더를 줘서 데이터를 주면 차,배,비행기 그아래 모든 부품들도 데이터 접근 가능. 주로 사용하는 것은 ChangeNotifierProvider. 사용하기 위해서 pub.dev에서 provider를 찾아서 설치해준다. Consumer와 Provider.of 로 사용함. 데이터를 가져오기 위해서 Consumer는 context가 필요없음. context를 제공해준다. Provider.of는 context가 필요하다. 이.. 공감수 0 댓글수 0 2021. 11. 4.
Flutter - 코딩마스터하기|카메라 페이지 만들기 카메라 스크린 만들기 카메라 페이지 만들고, 새창으로 띄우기 우선 screens 폴더에 camera_screen.dart 파일을 만들고 stf로 생성해준다. bottom navigation에서 가운데 버튼을 누르면 카메라 스크린이 윗부분에 뜨는게 아닌 새로 카메라 페이지를 생성되게 해줄것이기 때문에, _onBtnItemClick에서 카메라 index인 2일때 새창을 띄워 주도록 하자. 전에 배웠던 Navigator.of(context).push(MaterialPageRoute(builder: (context) => CameraScreen(),),) 을 이용해서 새창으로 CameraScreen을 불러오자. 여기서는 push를 이용하자. 그리고 이 Navigator 부분을 method 로 refactor해주.. 공감수 0 댓글수 0 2021. 11. 3.
Flutter - 코딩마스터하기|인증페이지 만들기2 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.. 공감수 0 댓글수 0 2021. 11. 2.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.