일정

우여곡절 끝에 flutter 사이드 프로젝트 완료!

도중에 프로젝트 방향 자체가 바뀌어서 예상보다 더 늦어졌네 ㅠㅠ

05월: dart/flutter 기본 학습

06월: 프로젝트 설계

07월: 업무 크리!

08월: 개발 1차 완료

09월: 업무 크리!

10월: 백엔드 개발하시는 분의 의견으로, 프로젝트 재설계 (GUI도 당연히 새로~ ㅋㅋㅋ)

11월: 개발 완료

 

Flutter 총평

* 장점

너무 너무 만족스럽게 작업함.

핫리로드야 말 할 것도 없고,

pub 위젯들 퀄리티도 상당히 좋고,

커뮤니티도 활발함 (블로그/유튜브 등에 좋은 컨텐츠들이 많다!)

* 단점

앱 개발 자체로는 크게 불만인 부분이 없었음

굳이 꼽자면 앱 용량이 네이티브 보다 크다는 것 정도?

* 기타

웹은 아직 무리이다! (flutter가 아니고, 내가하기엔 무리...)

- 앱 완료 후, 삘받아서 레거시 백오피스 웹 프론트쪽 도전했다가....

- 대시보드까지는 어째저째 만들었는데, 스크롤/테이블 등 처리하다가 난항을 겪고 일단은 보류

 

GetX 총평

상태관리, 네비게이션, 다국어, 기타유틸(벨리데이터, 스낵바 등) 모두 만족스럽게 사용함

프로젝트 구조 잘 정해놓고 사용해야 함

- 자유도가 높아서 프로젝트 구조 잘 정해놓지 않으면, 엉망진창이 될 가능성이 아주 높다

좋은 구조 잘 모르겠다면 bloc 이용하는 것도 좋은 접근

 

참고한 사이트들

* 위젯

https://www.flutterclutter.dev/
https://flutter.syncfusion.com/#/
https://fluttergems.dev/
https://flutterarsenal.com/index.html
https://itsallwidgets.com/
https://flutterawesome.com/

* GetX

The Flutter GetX Ecosystem ~ State Management

The Flutter GetX Ecosystem ~ Dependency Injection

초보자 보일러 플레이트로 괜찮음

Flutter GetX Tutorial for Beginners | Full Course in 3 hours (유튜브 GetX 전반적인 부분 다 다룸)

* 기타

플러터 디자인 패턴

quicktype.io (json > dart 코드 변환, freezed도 지원 함)

Flutter tips and tricks

 

 

 

 

 

 

 

'dart' 카테고리의 다른 글

Life of a Widget?! | Decoding Flutter  (0) 2021.05.16
Hot reload? | Decoding Flutter  (0) 2021.05.16
Introducing Decoding Flutter  (0) 2021.05.16
dart, flutter(+a) vscode 플러그인  (0) 2021.05.16
flutter launcher icon  (0) 2021.05.10

일단 여기저기 글 보면서, null-safety 지원하는 4놈으로 압축~

 

1. bloc

pub.dev/packages/bloc

 

bloc | Dart Package

A predictable state management library that helps implement the BLoC (Business Logic Component) design pattern.

pub.dev

2. provider

pub.dev/packages/provider

 

provider | Flutter Package

A wrapper around InheritedWidget to make them easier to use and more reusable.

pub.dev

 

3. riverpod

pub.dev/packages/riverpod

 

riverpod | Dart Package

A simple way to access state from anywhere in your application while robust and testable.

pub.dev

 

4. getx

pub.dev/packages/get

 

get | Flutter Package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.

pub.dev

 


* 진행하는 프로젝트 특징

1. 토이프로젝트:  프로토타입(MVP), 필수 기능만 구현

2. 인원: 1명 (최대로 쥐어짜도 2명인대, 나머지 1명은 투입 여부/시기 모두 불명확)

3. 디자인: 포기 (어차피 신경써봐야 더 조잡해지는 것을 너무 잘 암)

어차피 협업해봐야 최대 2인일 것 같아서, 정형화 된 패턴이 크게 중요하지 않고

오히려 러닝커브 낮은게 더 이득이라고 판단함

provider가 쓰기도 편하고 구글에서도 좋아라해서 갈려고 하는 찰나 getx가 눈에 들어오네...

 

단순 상태관리 뿐 아니라 다른 기능도 다 맘에 듬

일단 기본적으로 context 신경쓰는 게 확연히 줄고,

언제 패키지 찾나... 없으면 언제 만드나...했던 기능들도 다수 포함되어 있음

(로케일, 테마 변경, http 유틸, validation 유틸, ...)

 

추가로 shared_preference 대신에 getx 패밀리 패키지인 get_storage도 같이 사용하면 좋을 듯

pub.dev/packages/get_storage

 

get_storage | Flutter Package

A fast, extra light and synchronous key-value storage written entirely in Dart

pub.dev

 


 

* GetX 사용할 때, 시작점으로 유용한 보일러플레이트

github.com/delay/flutter_starter

 

delay/flutter_starter

Contribute to delay/flutter_starter development by creating an account on GitHub.

github.com

 

* GetX 주요 기능

1. 상태관리

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // Instantiate your class using Get.put() to make it available for all "child" routes there.
    final Controller c = Get.put(Controller());

    return Scaffold(
      // Use Obx(()=> to update Text() whenever count is changed.
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // Replace the 8 lines Navigator.push by a simple Get.to(). You don't need context
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // You can ask Get to find a Controller that is being used by another page and redirect you to it.
  final Controller c = Get.find();

  @override
  Widget build(context){
     // Access the updated count variable
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

2. 네비게이션

Get.to(NextScreen());
Get.toNamed('/details');
Get.back();
Get.off(NextScreen());
Get.offAll(NextScreen());

3. 유틸

3.1. snackbar & dialog

Get.snackbar('hi', 'message');
Get.defaultDialog(title: 'Alert Alert Warning Warning!');

3.2. 로케일 설정

var locale = Locale('en', 'US');
Get.updateLocale(locale);

3.3. 테마 변경

Get.changeTheme(ThemeData.light());

// 테마 & 스낵바
Get.snackbar(title, message,
	snackPosition: SnackPosition.BOTTOM,
	duration: Duration(milliseconds: milliseconds),
	backgroundColor: Get.theme.snackBarTheme.backgroundColor,
	colorText: Get.theme.snackBarTheme.actionTextColor);

3.4. http

class UserProvider extends GetConnect {
  // Get request
  Future<Response> getUser(int id) => get('http://youapi/users/$id');
  // Post request
  Future<Response> postUser(Map data) => post('http://youapi/users', body: data);
  // Post request with File
  Future<Response<CasesModel>> postCases(List<int> image) {
    final form = FormData({
      'file': MultipartFile(image, filename: 'avatar.png'),
      'otherFile': MultipartFile(image, filename: 'cover.png'),
    });
    return post('http://youapi/users/upload', form);
  }

  GetSocket userMessages() {
    return socket('https://yourapi/users/socket');
  }
}

3.5. validation

class GetUtils {
  static bool isNull(dynamic value)
  // ... 계속 ...
  static bool isBool(String value)

  static bool isVideo(String filePath)
  // ... 계속 ...
  static bool isHTML(String filePath)

  static bool isUsername(String s)
  static bool isURL(String s)
  static bool isEmail(String s)
  static bool isPhoneNumber(String s)
  static bool isDateTime(String s)
  static bool isMD5(String s)
  static bool isSHA1(String s)
  static bool isSHA256(String s)
  static bool isSSN(String s)
  static bool isBinary(String s)
  static bool isIPv4(String s)
  static bool isIPv6(String s)
  static bool isHexadecimal(String s)
  // ... 계속 ...
}

 

3.6. platform

// 웹 체크 보통 이런식인대
import 'package:flutter/foundation.dart' show kIsWeb;
if (kIsWeb) {
  // running on the web!
} else {
  // NOT running on the web! You can check for additional platforms here.
}

// 아래와 같이 제공
class GetPlatform {
  static bool get isWeb => GeneralPlatform.isWeb;
  static bool get isMacOS => GeneralPlatform.isMacOS;
  static bool get isWindows => GeneralPlatform.isWindows;
  static bool get isLinux => GeneralPlatform.isLinux;
  static bool get isAndroid => GeneralPlatform.isAndroid;
  static bool get isIOS => GeneralPlatform.isIOS;
  static bool get isFuchsia => GeneralPlatform.isFuchsia;
  static bool get isMobile => GetPlatform.isIOS || GetPlatform.isAndroid;
  static bool get isDesktop =>
      GetPlatform.isMacOS || GetPlatform.isWindows || GetPlatform.isLinux;
}

+ Recent posts