flutter 기록 - 001

개발환경 설정

• Flutter PC에 설치하기 위해 flutter 사이트 방문
  • Flutter SDK 다운로드
  • 원하는 위치에 압축풀기( C:\flutter )
  • flutter를 환경변수의 path 등록
  • flutter doctor 명령어 수행
    • 의존성 실패 등을 설치
  • IDE에 flutter 관련 plugin/extension 셋업
• 모바일 app 개발을 위해서, 아래가 필요함
  • iOS Simulator or an Android emulator
  • iOS or Android 장치 설정
  • web app 또는 desktop app으로 실행
• VS Code tips
  • flutter extensions 설치 후, 에디터에 새로줄이 생김 settings.json 주석 처리

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    ... "dart.flutterCreateOrganization": "com.aromit", "[dart]": { "editor.formatOnSave": true, "editor.formatOnType": true, // "editor.rulers": [ // 80 // ], "editor.selectionHighlight": false, "editor.suggest.snippetsPreventQuickSuggestions": false, "editor.suggestSelection": "first", "editor.tabCompletion": "onlySnippets", "editor.wordBasedSuggestions": false }, "dart.previewFlutterUiGuides": true, "dart.previewFlutterUiGuidesCustomTracking": true, ...

  • editor 설정 변경 file > preferences > settings에서 “flutter ui” 검색 후, 아래의 항목 check.

Dart language cheatsheet

• Dart language cheatsheet
• Dart Cheat Sheet & Quick Reference
• RW-Dart-Cheatsheet-1.0.2.pdf

  Dart Naming conventions

Dart는 일단 카멜케이스가 기본. 카멜케이스를 기본으로 클래스 관련 네이밍에는 파스칼케이스를 사용하고, 폴더/파일명에는 스네이크케이스를 사용한다.

snake_case

• folders/files
• 라이브러리, 패키지, 디렉토리, 소스파일 등

1
2
3
4

library peg_parser.source_scanner;

import 'file_system.dart';
import 'slider_menu.dart';

1
2
3

import 'dart:math' as math;
import 'package:angular_components/angular_components.dart' as angular_components;
import 'package:js/js.dart' as js;

camelCase

• functions
• variables
• constants

1
2
3
4
5
6
7

var count = 3;

HttpRequest httpRequest;

void align(bool clearItems) {
  // ...
}

PascalCase

• classes
• extensions
• mixins

1
2
3
4
5
6
7

class SliderMenu { ... }

class HttpRequest { ... }

typedef Predicate<T> = bool Function(T value);

extension MyFancyList<T> on List<T> { ... }

flutter library 추가 방법

1. 라이브러리 사이트 접속 –> https://pub.dev/
2. 라이브러리 검색

   사용하고자 하는 라이브러리를 검색하면, 여러게가 나올텐데 여기서 왼쪽에 보이는 [ LIKES / PUB POINTS / POPULARITY ] 가 가장 많고 100% 에 가까운 라이브러리를 사용하면 됨.

3. 라이브러리 추가 - 1 dependencies 를 복사
4. 라이브러리 추가 - 2 pubspec.yaml 에 dev_dependencies 에 추가
5. pub get 클릭! exit code 0으로 나오면 성공적으로 설치된 것임.
6. 라이브러리 import 사용하고자 하는 dart파일에 가서 import 를 해주고 사용하면 됨.

StatefulWidget lifecycle

1. createState()
2. mounted == true
3. initState()
4. didChangeDependencies()
5. build()
6. didUpdateWidget()
7. setState()
8. deactivate()
9. dispose()
10. mounted == false