본문 바로가기

아카이브/Flutter

(8)
[Local Storage] SQFLite, Bloc Pattern활용 Flutter version 2.2.3 Dart version 2.13.4 0. 패키지 설치 Flutter 프로젝트를 진행할 때, 여러모로 편리하다. Flutter 프로젝트의 pubspec.yaml에서 command + shift + P에서 "add"를 입력한 다음, 패키지 명을 입력하면 패키지의 최신버전을 불러와준다. 이 프로젝트에서 사용한 패키지들 null-safety가 적용된 버전이다. get: ^4.1.4 // https://pub.dev/packages/get intl: ^0.17.0 // https://pub.dev/packages/intl path_provider: ^2.0.2 // https://pub.dev/packages/path_provider sqflite: ^2.0.0+3 // h..
[FCM] Firebase Cloud Messaging 설정 1. 프로젝트 생성 Command +. Shift + p Flutter: New Application Project 2. 패키지 주소 확인 및 변경 flutter 프로젝트에서 com.example.project_name ios/Runner -> Xcode com.example.projectName Target -> Runner -> Signing의 팀도 확인 3. Firebase 프로젝트 생성 4. 안드로이드 앱 등록 Firebase 프로젝트에 안드로이드 앱 등록 /android/app 로 google-services.json 이동 /build.gradle buildscript { ext.kotlin_version = '1.3.50' repositories { google() // 없으면 추가 jcent..
[Migration] FCM Null Safety 적용 Flutter 2.2로의 마이그레이션을 하게 되면서 기존의 방법으로는 FCM을 사용할 수 없게 되었다. 공식문서 Cloud Messaging | FlutterFire To start using the Cloud Messaging package within your project, import it at the top of your project files: firebase.flutter.dev 예제 FirebaseExtended/flutterfire 🔥 A collection of Firebase plugins for Flutter apps. - FirebaseExtended/flutterfire github.com main.dart 일부분 Future _firebaseMessagingBackground..
[Migration] Flutter 1.22.6에서 2.2.3으로 마이그레이션 하기 마이그레이션 가이드 공식문서 참조 ◆ Null Safety 업그레이드 가능한지 확인하기 1. Null Safety가 적용된 패키지 확인 dart pub outdated --mode=null-safety - 현재 사용중인 패키지들에 null-safety가 적용되어 있는지 확인이 필요합니다. - 사용 불가능한 패키지가 있다면, 대채가능한 다른 패키지로 교환하거나 포크를 하여 null-safety를 적용시켜야 됩니다. ◆ 마이그레이션 진행하기 1. 채널 확인 flutter channel - bash 창에 flutter channel 입력 후 현재 Flutter SDK의 채널 확인 Flutter channels: master dev beta * stable 1.1 Stable이 아닐경우 flutter chann..
[GetX] Obx로 Chip 활용하기 GetX : https://pub.dev/packages/get get | Flutter Package Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX. pub.dev GetX를 통해 상태 관리 // play_gound.dart import 'package:flutter/material.dart'; import 'package:frontend/components/custom_appbar.dart'; import 'package:get/get.dart'; class PlayGround extends StatefulWidget { @override _PlayGroundSta..
[위젯] Chip, shape Chip( backgroundColor: Colors.red[100], shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(defaultSize), side: BorderSide( color: Colors.red[300], width: 1.0, ), ), label: Padding( padding: EdgeInsets.symmetric( horizontal: (defaultSize * .4), vertical: (defaultSize * .2), ), child: Text( "Rounded Rectangle Border", style: TextStyle(fontSize: defaultSize), ), ), ), Chip( backgrou..
[위젯] Chip, 알약 Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Chip( padding: EdgeInsets.symmetric( horizontal: defaultSize * .2, vertical: defaultSize * .2, ), elevation: 6.0, shadowColor: Colors.purpleAccent[100], backgroundColor: Colors.purple[100], shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(defaultSize), bottomLeft: Radius.circular(defaultSize), )..
[위젯] Chip, 아바타 아이콘 Chip( padding: EdgeInsets.symmetric( horizontal: defaultSize * .2, vertical: defaultSize * .2, ), elevation: 6.0, shadowColor: Colors.purpleAccent[100], backgroundColor: Colors.purple[100], shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(defaultSize))), avatar: CircleAvatar( // 둥근 아이콘 태두리 radius: defaultSize, backgroundColor: Colors.white70, child: Icon( Icons.warni..