일정

우여곡절 끝에 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

 

 

요약

flutter 위젯은 immutable이다. 

 

 

정리

flutter 위젯은 immutable이다. 생성 된 후에는 변경할 수 없다 (케이크랑 같다고 비교)

 

1. 위젯 변경은 어떻게 처리하는가?

  케이크 모양을 바꾸려면 새 케이크를 만들듯이, flutter는 위젯을 다시 만드는 방식으로 이를 처리한다

2. 너무 무겁고 느리지 않나?

 위젯의 상태, 위치, 변경 여부 등을 추적해서 필요한 화면만 다시 그린다

 (flutter가 알아서 해줄테니 걱정하지 말아라 ㅋㅋㅋ)

 

댓글들 훑어보니 나처럼 initState, dispose 같은 걸 기대했던 사람들이 많구나 ㅋㅋㅋ

 

 

링크

Life of a Widget?! | Decoding Flutter

더코딩파파: 위젯(Widget)! 이해하셔야 쉬워요!!!

더코딩파파: Flutter vs Android

 

 

 

 

'dart' 카테고리의 다른 글

flutter 사이드 프로젝트 완료!  (0) 2022.01.29
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

 

 

요약

플러그인이 제대로 설치되어 있으면, 코드 저장만 해도 hot reload가 잘 동작한다

앱 state 초기화가 필요한 경우, 변경하는 사항이 build() 메서드 밖에 있는 경우에는 hot restart를 사용하자

코드 수정 내역 반영이 안 되면, hot reload > hot restart > full restart 순으로 해보자

 

 

정리

명령어

# flutter run
...

Flutter run key commands.
r Hot reload.
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

* hot reload, hot restart, full restart

hot reload

소스 코드를 실행 중인 dart vm(virtual machine)에 삽입해서 작동

vm이 새 버전의 필드와 함수로 클래스를 업데이트 한 후, 위젯 트리를 자동으로 재빌드

(web은 아직 지원하지 않음)

 

hot restart

hot reload에 추가로 앱 state가 초기화 됨

 

full restart

코드 재컴파일 후, 앱을 재시작 함

* hot reload 특수 상황 (동작하지 않거나 오동작하는 경우)

앱이 종료 된 경우

수정한 코드에 컴파일 오류가 발생 한 경우

CupertinoTabView (요놈은 수정 중)

enum을 class로, class를 enum으로 변경 한 경우

font 를 변경 한 경우 (대부분 asset은 지원하나 font는 지원 안 함. hot restart가 필요함)

generic을 변경 한 경우

네이티브 코드를 변경 한 경우

전역변수 또는 static변수를 변경 한 경우

main() 또는 initState()를 메서드를 변경 한 경우

 

 

링크

Hot reload?! | Decoding Flutter

Hot reload - Flutter

'dart' 카테고리의 다른 글

flutter 사이드 프로젝트 완료!  (0) 2022.01.29
Life of a Widget?! | 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

 

 

플러터에서는 무슨 일이 일어나고 있는가?? 어떻게 동작하는가??
를 정리해주나 보다~~가볍게 보기 좋은 듯!!

 

차차 다음과 같은 것을 알려준다고 함

왜 hot-reload가 동작하지 않는가?
위젯은 얼마나 오래 지속되는가?
'state'라고 하는 것에 무슨 일이 일어나고 있는가?

 

 

링크 

Introducing Decoding Flutter

 

 

 

 

일단 flutter web은 좀 더 봐야 할 것 같고,

android, ios쪽 앱 개발시에 쓸만 한 애들만 우선 정리

(dart, flutter 기본 플러그인은 제외)

 

 

플러그인 이름 누르시면 Visual Studio Marketplace로 연결됩니다~ (알파벳 순)

 

dart, flutter 전용 플러그인

 

Awesome Flutter Snippets

snippet 추가 제공. 필수 함수들도 한 번에 만들어줘서 타이핑량이 많이 줄어듬

 

Dart Data Class Generator

dart 클래스의 생성자, copyWith, toMap, fromMap, toJson, fromJson, == 등 자동 생성해줌

 

flutter-stylizer

flutter 클래스내의 생성자, 변수, 함수 등을 지정한대로 정렬해 줌

협업하거나 자신만의 스타일 유지할 때 좋음 (기본 설정 그래도사용해도 무방함)

 

Flutter Tree

emmet 같이 위젯트리를 한 번에 작성 가능하게 도와줌

 

 

 

dart, flutter 전용은 아니지만 도움 되는 플러그인

 

Better Comments

코멘트에 !, ? 등으로 시작하게 작성하면 색상이 다르게 출력 됨

(설명, 경고, 위험 등의 표시 가능)

 

Code Spell Checker

오타 잡아 줌!

 

Color Highlight

#ffffff의 rgb 코드 입력 시, 색상을 바로 확인 할 수 있음

 

Error Lens

에러 부분을 코드 위치에서 표시 해 줌

 

Git History

git history 보고 찾기, 비교 등 가능

 

Image preview

로컬 또는 리모트 파일 이미지를 바로 보여 줌

 

Paste JSON as Code

json 파일로 class 코드 만들 수 있음 (quicktype.io 에서 만듬)

 

Prettier - Code formatter

코드 포맷팅 (yaml 지원)

 

Pubspec Assist

pub.dev 가서 install 탭 내용 복붙하는 시간을 줄여줌

 

REST Client

rest 테스트를 vscode에서 할 수 있음 (요즘은 아래 thunder client 많이 쓰는 듯)

 

TabOut

tab키 입력하면 괄호를 빠져나감

(적응하는 데 시간이 필요하지만, 익숙해지면 아주 편함)

 

Todo Tree

todo 코멘트 달아놓은 것 좌측 트리메뉴에 표시해 줌

 

Thunder Client

postman의 vscode 플러그인 버전

 

Version Lens

pubspec.yaml에서 버전 정보를 확인하고, 관리도 할 수 있음 (최신 버전 표기 등)

 

vscode-faker

fake 데이터 만들어줌 (주소, 이름, 회사, 날짜, 전화번호 등등)

'dart' 카테고리의 다른 글

Hot reload? | Decoding Flutter  (0) 2021.05.16
Introducing Decoding Flutter  (0) 2021.05.16
flutter launcher icon  (0) 2021.05.10
flutter 앱 로딩 처리: splash (부제: 스플래시 with 그림판)  (0) 2021.05.09
flutter 상태 관리 뭘로 하지  (0) 2021.05.05

* 공식가이드

역시나 공식 가이드에 잘 나와있다. 아래와 같은 사이트에서 icon 만들고 공식가이드대로 추가하면 된다

appicon.co/#app-icon

 

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser

appicon.co

 

1. Android

flutter-ko.dev/docs/deployment/android#%EB%9F%B0%EC%B2%98-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

 

Android 앱 출시 준비하기

Flutter 앱을 개발하는 동안, 커멘드 라인에서의 `flutter run`을 실행하거나IDE에 있는 툴바 **Run** 과 **Debug**를 선택하여 앱을 테스트할 수 있습니다. Flutter는 기본적으로 앱의 _debug_ 버전을 빌드합니

flutter-ko.dev

2. IOS

flutter-ko.dev/docs/deployment/ios#%EC%95%B1-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

 

iOS 앱 출시 준비하기

이 문서는 [앱스토어][appstore]와 [TestFlight][testflight]에 Flutter 앱을 출시하는 방법을 단계별로 제공합니다.다트 코드 난독화에 대한 정보를 얻고 싶다면, [Obfuscating Dart Code]({{site.github}}/flutter/flutter/w

flutter-ko.dev


* 하지만 패키지를 이용하자 -_-a

pub.dev/packages/flutter_launcher_icons

 

flutter_launcher_icons | Dart Package

A package which simplifies the task of updating your Flutter app's launcher icon.

pub.dev

1. assets에 icon추가

- splash 이미지에서 글자 부분만 짤라서 재사용!!

2. pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.9.0
  
  assets:
    - assets/icons/  

3. flutter_launcher_icons.yaml

flutter_icons:
  android: "launcher_icon"
  ios: true
  remove_alpha_ios: true
  image_path: "assets/icons/icon.png"

4. 생성하기

# flutter pub run flutter_launcher_icons:main
  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.9.0)
  ════════════════════════════════════════════

• Creating default icons Android
• Adding a new Android launcher icon
• Overwriting default iOS launcher icon with new icon

✓ Successfully generated launcher icons

5. 결과

 

 

* 그림판으로 splash 이미지 만들기

그림판으로 splash 이미지 만들고 적용을 해보자

 

1. 그림을 넣기보다는 이쁜 폰트로 앱 이름만 적는 걸로 승부하자.

(눈금을 켜놓으면 그나마 가운데 정렬하기가 용이하다. 1024x1024 정도면 되겠지?)

- 요놈은 splash.png로 이름을 정해주자 (나중에 이름 그대로 사용)

 

2. 다 만들고 그림판 전체선택(ctrl+a) > 마우스 우 클릭 > 색 반전을 선택하면 dark 모드까지 만들 수 있다

- 요놈은 splash-invert.png로 이름 짓도록 하자

 

 


 

* 스플래시 적용하기

 

공식 가이드로 제공은 하지만...

flutter.dev/docs/development/ui/advanced/splash-screen

 

Adding a splash screen to your mobile app

Learn how to add a splash screen to your mobile app.

flutter.dev

 

역시나 위 가이드대로 처리해주는 패키지가 있다

pub.dev/packages/flutter_native_splash

 

flutter_native_splash | Dart Package

Generates native code to customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.

pub.dev

README에 너무 설명이 잘 나와있어서 간략하게만 정리하도록 하자

1. pubspec.yaml (pub get은 당연히 해주고)

dev_dependencies:
  flutter_test:
    sdk: flutter
  # 짜라란
  flutter_native_splash: ^1.1.8+4
  
  # To add assets to your application, add an assets section, like this:
  # assets에 splash 이미지들 넣을꺼니 아래 부분도 수정하자
  assets:
    - assets/  

2. 이전에 만들었던 splash.png, splash-invert.png 파일을 복사해오자

3. flutter_native_splash.yaml 파일을 만든다

- pubspec.yaml에 넣을수도 있지만 보기 편하게 따로 관리하자

- README.md 내용 그대로 복사해서 붙이고 아래 부분만 변경을 하자

flutter_native_splash:
  color: "#42a5f5"
  #background_image: "assets/background.png"
  image: assets/splash.png

  color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png

4. 이제 만들어주자

# flutter pub run flutter_native_splash:create

5. 다 됐을것 같지만 아직이다.

여기까지는 native 프로그램 실행까지의 splash라면

앱 시작 후 로딩 중에 표시 할 splash도 만들도록 하자

- 앱 시작 후 초기화, 리소스 불러오기 등을 처리하는 동안 보여 줄 화면

- 단순하게 CircularProgressIndicator정도만 추가해도, 사용자에게 처리 중을 알려주기에는 충분할 듯 하다

// 플러터 기본앱에 Splash 위젯처리하는 부분만 추가 한 예제

class Splash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.apartment_outlined,
          size: MediaQuery.of(context).size.width * 0.785,
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return MaterialApp(home: Splash());
        } else {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
      },
    );
  }
}

* 결과 (1차시도)

으으윽... 배경색을 맞추고, 스테이터스 바도 없애야겠다

 

* 결과 (2차시도)

1. 배경색 맞추기

flutter_native_splash:
  # white로 맞춤
  color: "#ffffff"  
  #background_image: "assets/background.png"
  image: assets/splash.png

  # black으로 맞춤
  color_dark: "#000000"
  #background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png

  # 요놈은 스테이터스바 사용 X
  fullscreen: true

2. 스테이터스바 없애려면 코드상에서도 처리가 필요하다

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays(
      [SystemUiOverlay.bottom, SystemUiOverlay.top]);
  runApp(MyApp());
}

3. 결과

- 네이티브 스플래시

좌: light, 우: dark

- 앱 구동 후 스플래시

(앱 시작 후 현재 테마 확인해서 light/dark 처리하면 되겠다)

'dart' 카테고리의 다른 글

dart, flutter(+a) vscode 플러그인  (0) 2021.05.16
flutter launcher icon  (0) 2021.05.10
flutter 상태 관리 뭘로 하지  (0) 2021.05.05
flutter vscode 설정  (0) 2021.05.05
flutter 폴더 구조 정리  (0) 2021.05.05

일단 여기저기 글 보면서, 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;
}

 

공식 홈 가이드에 있는 플러그인만 해도 snippet은 일단 충분해 보임

flutter.dev/docs/development/tools/vs-code

 

Visual Studio Code

How to develop Flutter apps in Visual Studio Code.

flutter.dev

* launch.json 추가

F5 키로 프로그램 실행

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "tistory",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
        }
    ]
}

 

* 추가로 widget이 늘어지니, color bracket 관련 된 거 정도만 설치하면 좋은 듯

1이 install 수도 많고, 2는 베타 버저닝이긴 한대 잘 돌긴 하는 듯 (1, 2 둘 다 archived 됐네)

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

Bracket Pair Colorizer 2 - Visual Studio Marketplace

Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

marketplace.visualstudio.com

indent-rainbow - Visual Studio Marketplace

 

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

 

Bracket Pair Colorizer 2 만 적용

 


 

* pubspec.yaml 선택

pub get, upgrade, outdated

 

* dart devtools

 

* snippet: tab 또는 선택

stless, stful

stful

 

* ctrl + .

 

stateless > stateful

안드로이드 스튜디오는 widget 제거하는 것도 있었던 것 같은데 아닌가...

wrap widget 및 extract

 

 

개발하면서 가장 어려운 것 2가지가

1. 네이밍

2. 폴더/디렉토리 구조 인 듯

 

그나마 배터리팩이나 큰 프레임워크 사용할 때는 폴더/디렉토리 시키는대로만 하면 되서 크게 상관이 없는 데 ㅠㅠ

플러터도 처음이고, 앱도 처음이고, 프론트앤드도 처음이고 이런 게 너무 어렵네 ㅠㅠ

 

일단 조금 훑어보고 대충 입맛에 맞는 구조 잡았음

flutter_create_project
├─lib
│  └─src
│      ├─constants
│      ├─controllers
│      ├─helpers
│      ├─models
│      ├─repositories
│      └─screens
│          ├─auth
│          └─components
├─test

constants: 전역변수 관리 (테마, 언어 등)

controllers

helpers: 공용 api (utils도 많이 보임)

models

repositories: 원격/로컬 저장소 관리

screens: pages 또는 ui로 하는 형태도 많이 보임

> auth: 화면 파일들이 많은 경우 디렉토리 분리

> components: 공용 위젯들

 

 

 

 

'dart' 카테고리의 다른 글

flutter 상태 관리 뭘로 하지  (0) 2021.05.05
flutter vscode 설정  (0) 2021.05.05
dart 네이밍 규칙 주요 항목만 간단 정리  (0) 2021.05.05
dart,flutter convention 및 linter  (0) 2021.05.05
flutter 유튜브 참고  (0) 2021.05.05

+ Recent posts