All

[Flutter] GridView, CustomScrollView

GridView로 만드는 격자 레이아웃 GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2 ), itemCount: list자료.length, itemBuilder: (c, i) { return Container(color : Colors.grey); } ), ListView와 똑같이 자동으로 스크롤바가 생기는 GridView grid가 몇개 생성될지 미리 알고 있으면 GridView.count 쓰고 grid가 몇개 생성될지 아직 모르겠으면 GridView.builder 쓰면 된다 ListView, GridView를 쓰는데 상단엔 다른 레이아웃이 필요해서 Column 쓰면 되는데 그럼 Lis..

[Flutter] MultiProvider

store는 여러개 만들어도 상관없다 state가 100개면 하나의 class에 보관하기는 힘들다 관련있는 staet들을 묶어서 각각 별개의 store로 만들면 나중에 편리하다 class Store1 extends ChangeNotifier { var name = 'john kim'; } class Store2 extends ChangeNotifier { var follower = 0; follower 변경함수들~~ } store가 많은 경우 store 등록하는 법 // provider가 하나일때 // runApp(ChangeNotifierProvider( // create: (c)=>Store1(), // child: MaterialApp( // theme: style.theme, // home: My..

[Flutter] Provider

Flutter에서 전역 상태 관리를 하거나 위젯간에 상태를 공유하기 위해 사용되는 Provider를 알아보자 provider | Flutter Package Provider란 만약에 부모 커스텀 위젯에 있던 state를 자식 커스텀 위젯으로 보내고 싶으면 3-step으로 보내야 한다. 하지만 부모 → 자식이 아니라 부모 → 자식 → 손자 위젯으로 보내고 싶으면 어떻게 할까? 2번 보내면 된다 하지만 상태를 표시하기 위해 불필요한 위젯들이 re-build 되면서 성능 이슈가 발생할 수 있고 커스텀 위젯이 많아지면 많아질 수록 끔찍해진다 Provider는 이 문제를 해결하기 위해 등장했으며, 이렇게 동일한 상태(데이터)를 전역적으로 다른 위젯들과 공유할 때 사용한다 전송 없이 모든 위젯이 state를 직접 ..

[Flutter] Shared preferences

Shared Preferences 앱을 껐다가 켜면 state는 초기화된다. 그래서 state 안에 있던 데이터를 어딘가 저장해 두고 싶으면 서버로 보내서 DB에 저장을 하든가 아니면 shared preferences라는 로컬 공간에 저장하면 된다. 이는 웹에서 로컬 스토리지처럼 앱 데이터 삭제를 누르지 않는 이상 영구적으로 남아있다. shared_preferences 설치 shared_preferences: ^2.0.11 import 'package:shared_preferences/shared_preferences.dart'; import 'dart:convert'; // 유용한 함수가 들어있는 기본 패키지 shared preferences에 데이터 저장하는 법 saveData(){ var stora..

[Flutter] GestureDetector

GestureDetector 유저가 위젯을 어떻게 만지는지 감지할 수 있다 onTap: (){ 한 번 누를시 실행할 코드 } onDoubleTap: (){ 더블탭시 실행할 코드 } onLongPress: (){ 길게누를시 실행할 코드 } onScaleStart: (){ 줌인시 실행할 코드 } onHorizontalDragStart: (){ 수평으로 드래그시 실행할 코드 } 등등 Navigator.push(context, PageRouteBuilder( pageBuilder: (c, a1, a2) => Upload(), transitionsBuilder: (c, a1, a2, child) => FadeTransition(opacity: a1, child: child), transitionDuration: ..

[Flutter] 내장 Image file

// pubspec.yaml dependencies: image_picker: ^0.8.4+4 ios/Runner/Info.plist NSPhotoLibraryUsageDescription 사진첩좀 써도 됩니까 NSCameraUsageDescription 카메라좀 써도 됩니까 NSMicrophoneUsageDescription 마이크 권한좀 제발 이런 코드를 하단에 추가. 사용자에게 허락팝업 띄울 때 보이는 글자. import 'package:image_picker/image_picker.dart'; import 'dart:io'; 파일 다루는 유용한 함수가 들어가 있는 기본 패키지 사용법 onPressed: () async { var picker = ImagePicker(); var image = aw..

[Flutter] Navigator

Flutter에서 페이지 이동 만드는 방법 웹 환경에서의 "다른 페이지로 이동" 기능은 지금 있는 페이지를 지우고 새로운 페이지를 로드하는 식으로 동작하는데 모바일 앱은 그럴 이유가 없다. 페이지 위에 페이지를 덮는 식으로 간단하게 페이지 이동을 구현할 수 있습니다. 카톡이나 다른 앱들도 뭔가를 누르면 페이지가 밑에서 부터 솟아오르면서 덮어진다. 앱은 이게 일반적인 방법 기본 문법 // Mavigator.push() IconButton( icon: Icon(Icons.add_box_outlined), onPressed: (){ Navigator.push( context, MaterialPageRoute(builder: (context){return Text('안녕'))}, ); }, ), return이 ..

[Flutter] DIO 사용 방법

Dio란? (A powerful http client for dart) http 라이브러리 처럼 서버와 통신을 하기 위해 필요한 패키지. http와 다르게 사용하기 쉽게 보다 많은 기능들을 제공하고 있으며 커스텀을 통해 사용하기 편하다. Rest API 통신에 가장 인기 많은 라이브러리 http와 다르게 응답 받은 JSON 파일을 dart:convert를 통해 디코딩 할 필요 없이 디코딩된 상태로 리턴된다 options, interceptor를 통해 다양한 기능을 한 번에 핸들링 할 수 있다 설정 // pubspec.yaml dependencies: dio: ^5.3.3 주요 기능 // 기초 Dio _dio = Dio(); // 첫번째 final response = await _dio.get('/test..

[Flutter] 앱 통신 방법 및 에러 처리

설정 // pubspec.yaml dependencies: http: ^0.13.4 // main.dart import 'package:http/http.dart' as http; import 'dart:convert'; // -> JSON 형태를 일반 자료형으로 변환해 주는 함수모음집 // android/app/src/main/AndroidManifest.xml 인터넷 사용 허락 코드 IOS는 필요 없다 Get 요청 void getData() async { var result = await http.get( Uri.parse('요청할url') ) print(result.body) } but… 가져온 데이터 대부분은 JSON 형태이다 서버랑 주고받는 데이터는 오직 문자만 가능 즉, 리스트나 객체 형태는 ..

[Angela Yu] Flutter Start

Flutter 강의를 듣기 시작했다. udemy에서 가장 유명한 Angela Yu님의 강의와 좀 더 쉽게 이해할려고 코딩애플 강의 2개를 들을려고 한다. 천천히 다른 언어를 배운다는게 까다롭지만 조금씩 이해하면서 하나씩 해볼려고 한다. What is Flutter? 개발자들이 다양한 화면 크기와 장치에 맞게 멋지 인터페이스를 쉽게 디자인할 수 있도록 해주는 도구 키트 앱을 쉽게 레이아웃 할 수 있도록 미리 빌드된 위젯도 함께 제공 예를들어, 앱을 행이나 열, 스택으로 배치 플러터가 하는 일은 빈 화면에 애니메이션, 상호 작용이든 변경이든 간단히 레고 블록 형태의 위젯들로 앱을 만들 수 있다 모든 디바이스와 플랫폼에 많은 위젯들을 커스터마이징 해서 쉽게 사용할 수 있다 why Flutter? 하나의 코드로..