비쥬얼코드 visual code 유용한 확장프로그램

비쥬얼코드
flutter extension

- flutter Dart Code : 플러터 실행환경
- Awesome Flutter Snippets : 빠른생산성
- dart-import : 서드파트,디벨로퍼 패키지 구분, shift+ctrl+p
- Pubspec Assist : vs내에서 extension을 바로 확인 : shift+ctrl+p -> pubspect 를 찾아서 모듈검색
- Dart Data Class Generator : dart클래스를 쉽게 만든다(제작자 recardo emerson)
- Error Lens
- Image preview : 
- Bracket Pair Colorizer 2 
- Gruvbox Concoctis : theme
- vscode-icons
- Freezed
- Flutter Riverpod Snippets
- Remove Comments    코멘트를 지워준다 : shift+ctrl+p  -> "Remove all comments" 입력후 엔터 
- Peacock : 메뉴영역색깔 변경
- indent-rainbow : 들여쓰기 영역 색깔 구분 지원
- Flutter UI guides
  Setting > search for 'preview flutter ui guides' > Dart > Preview Flutter UI Guides,Preview Flutter Ui guideds Custom Tracking 두개항목 체크
  에서 체크 하고 재시작

====================================
플러터 개발시 const 일일이 붙이기 싫을때
세팅
1. ctrl+shift+P  입력 또는 메뉴의 view - Command Pallet 선택 후
   입력창에 Preferences: Open User Setting(json)을 입력하여해당 메뉴를 선택하면 json 파일이 열림
setting.json 파일내
"[dart]": {
    "editor.codeActionsOnSave": {
        "source.fixAll": true   // vscode 가 업데이트 되면서  "explicit" 값으로 바뀜
    },
}

---
vs 코드에서 프로젝트 생성 command 명령 
flutter create 프로젝트명
---
vs 코드에서 에뮬레이터 실행환경 ( 안드로이드 스튜디오의 AVD MANAGER에서 Create Virtual Device 로 AVD를 설치해두어야함)
VSCode command palette 실행 : ctrl+shift+p 에서 flutterse 입력하 AVD 선택하면됨

====================================
vs 코드 라인정렬
shift + alt + F

vs 코드 위젯 Wrap 메뉴 나오기
ctrl + .

================================
pubspc.yaml
flutter pub add 패키지명
flutter pub get


설정
-개발시 귀찮은 lint룰 제거
  analysis_options.yaml 파일의 include: package:flutter_lints/flutter.yaml 라인 주석처리함
  
======================================
디버그 배너 제거
 메인의 MaterialApp 속성에서 debugShowCheckedModeBanner: false,
 
=======================================
리스트뷰 ListView
리스트뷰에서 컨텐츠가 Column 영역 의 중간으로 가려면 shrinkWrap: true로 주면 된다.
ListView(
            shrinkWrap: true,
            children: []
)

=======================================

다트 getter 샘플

enum AppState{ initial, loading, success, error,}  // 이넘

class Appprovider with ChangeNotifier{
 AppState _state = AppState.initial;
 AppState get state => _state;  // 게터
 notifyListeners();  // 리스너들에게 변경이되었다고 알려줌
}

//리스너 사용법 예제
context.read<클래스>().함수();  // changeNotifier를 믹스인한 클래스의 함수가 실행됨
final appState = context.watch<Appprovider>().state; // state값이 변경될때마다 appstate에 저장
==============================================================

Riverpod
패키지 
 - riverpod_lint : 개발자들의 실수를 줄여줌 
    -> development dependency에 추가, custom_lint 도 함께 설치되어야함
    -> analysis_options.yaml 파일 내 
      analyzer:
     plugins:
   - custom_lint  항목 추가
 
Riverpod 코드 제네레이션 사용하기 위한 dependencies
  dependencies:
    riverpod_annotation: ^2.2.1
  dev_dependencies:
    build_runner : ^2.4.6
riverpod_generator: ^2.4.4


==============================================================
구글 폰트
flutter pub add google_fonts

=============================================================
uuid 생성 (랜덤id)
flutter pub add uuid

import 'package:uuid/uuid.dart';

final uuid = Uuid();  

class Place {
   Place({required this.title }) : id = uuid.v4();  //id 생성
  final String id;
  final String title; 
}
=============================================================

플러터 로컬 장치에 데이터를 저장할때 사용하는 패키지

1. path_provider : 이미지를 저장해야할 경로에 쉽게 접근할수 있게해줌
  -  flutter pub add path_provider

2. path 1.8.3 : 파일 경로 작업 프로세스를 단순하게 해줌 ( 수동으로 잡는 경로를 이패키지는 단순히 경로를 쉽게 구성해 다양한 운영체제에서 작동하게 함)
  - flutter pub add path

- 장치에 DB를 저장하는 건 여러 방식이 있는데 둘중 하나 쓰면 됨 sqflite 또는 shared_preferences
3. sqflite : sql 명령을 이용해 장치에 데이터를 저장함

4. shared_preferences : 장치에 데이터를 저장할수있도록 도와줌, sqflite 보단 단순하며 key,value 로저장함

=======================================================
 플러터 포커스제거(키보드창 제거) 
FocusScope.of(context).unfocus();  //입력창에서 포커스를 제거 함으로써 키보드를 비활성화시키는 효과
=======================================================
 플러터 Form validation
 
 final _form = GlobalKey<FormState>();  // form 영역변수 선언  
  
  void _submit() { //버튼에서 해당 함수 실행
    final isValid = _form.currentState!.validate();  // 유효성 검사

    if(isValid){ // 정상이라면
      _form.currentState!.save(); //Form 영역의 onSaved 속성 실행
    }
  }
  
  child: Form(
  key: _form,  // Form form키 매핑
  child: Column(...)
  )
  

  TextFormField(
decoration: const InputDecoration(
  labelText: 'Password',
),
obscureText: true,
validator: (value) {
  if (value == null || value.trim().length < 6) {
return 'Password must be at least 6 characters long.';
  }

  return null;
},
onSaved: (value) {
  _enteredPassword = value!;
},
  ),
=======================================================   
파이어 베이스 설치
1.SDK 설치
 npm install -g firebase-tools
 get-executionpolicy
 set-ExecutionPolicy RemoteSigned
 firebase
 firebase login
 firebase projects:list
 dart pub global activate flutterfire_cli
2.모듈설치 
 flutter pub add firebase_core   <= 파이어베이스 코어
 flutter pub add firebase_auth   <= 파이어베이스 인증모듈
 flutterfire configure
 flutter pub add firebase_storage  <= 이미지저장용 스토리지 모듈
 flutter pub add firebase_messaging  <= FCM 플러그인 설치

=======================================================   
파이어 베이스 설치시 오류

1. 터미널 PSSecurityException 에러
    ->해당 에러는 powershell의 스크립트 실행 정책 오류 메시지로 powerShell의 Set-ExecutionPolicy 설정 변경이 필요 

Windows PowerShell 스크립트 실행 정책 옵션 설명
Restricted    : PowerShell 대화형 모드에서만 실행할 수 있고, 다른 곳에서는 스크립트 실행 불가 
AllSigned     : 신뢰한 사용자가 서명한 스크립트만 실행할 수 있습니다.
RemoteSigned  : 스크립트를 실행하기 전에는 신뢰할 수 있는 게시자가 먼저 서명을 해야합니다.
Unrestricted  : 제한 없음

해결방법
1. Windows PowerShell 관리자 모드 실행
2. get-executionpolicy 입력 (생략가능) = 현재 내 컴퓨터의 스크립트 실행 정책 확인
3. Set-ExecutionPolicy RemoteSigned 입력 후 엔터
4. Y 입력 
5. get-executionpolicy 입력 (변경 확인)
6. webStorm의 현재 실행 중인 터미널 종료 후 새로운 터미널 실행



2. Failed to list Firebase projects 오류
    -> firebase login --reauth 를 통해 해결


================================================================

플러터 이미지 선택 모듈
flutter pub add image_picker   <== 이미지 선택 라이브러리

================================================================
파이어베이스 스토리지 이미지 저장 : user_images라는 폴더를 만들고 아래 jpg파일을 생성
 FirebaseStorage.instance.ref().child('user_images').child('${userCredentials.user!.uid}.jpg');
 생성한 파일명에 파일 저장
 await storageRef.putFile(_selectedImage!);
 저장된 파일 경로 가져오기
 final imageUrl = await storageRef.getDownloadURL();

================================================================
파이어 베이스 접속한 ID 가져오기
final user = FirebaseAuth.instance.currentUser!;

================================================================
Firestore Database (파이어베이스 스토어드 데이터베이스)
  1. 파이어베이스 설정
!!! 데이터베이스 console에서 생성후 native 모드로 해서 파이어베이스 화면에서 규칙(rule 변경: 인증된사용자만)
=> allow read, write: if request.auth != null;
  2. 플러터 라이브러리 설치
flutter pub add cloud_firestore

  3. 데이터 저장 방법
     FirebaseFirestore.instance
            .collection('users')
            .doc(userCredentials.user!.uid)
            .set({
  'username': _enteredusername,
  'email': _enteredEmail,
  'image_url': imageUrl,
});

4. 데이터 가져와 사용하기
final user = FirebaseAuth.instance.currentUser!;
final userData = await FirebaseFirestore.instance
.collection('users')
.doc(user.uid)
.get();

print( userData.data()!['username'] );

5. 플러터에서 파이어베이서 문서 수신으로 UI 처리 ( StreamBuilder 위젯에서  FirebaseFirestore스냅샷하면 변경될때 문서수신받을수있음 )
 StreamBuilder(stream: FirebaseFirestore.instance.collection('chat').snapshots(), builder: builder)

6. 빌드시 오류 해결방법
android\app\build.gradle 파일을 열어 아래 부분을 추가 한다.
   defaultConfig {
applicationId "com.example.chat_app"
minSdkVersion 19   // minsdk버전 변경
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
multiDexEnabled true   //해당 부분 추가!!!!!!!!!!!!!
}


7. 샘플 목록 뿌리기
@override
  Widget build(BuildContext context) {
return StreamBuilder(
  stream: FirebaseFirestore.instance
  .collection('chat')
  .orderBy('createdAt', descending: false)
  .snapshots(),  //정렬해서 문서 수신 하기
  builder: (ctx, chatSnapshots) {
if (chatSnapshots.connectionState == ConnectionState.waiting) {
  return const Center(
child: CircularProgressIndicator(),
  );
}

if (!chatSnapshots.hasData || chatSnapshots.data!.docs.isEmpty) {
  return const Center(
child: Text('Nomessages found.'),
  );
}

if (chatSnapshots.hasError) {
  return const Center(
child: Text('Something went wrong...'),
  );
}

final loadedmessages = chatSnapshots.data!.docs;

return ListView.builder(
  itemCount: loadedmessages.length,
  itemBuilder: (ctx, index) =>
  Text(loadedmessages[index].data()['text']),  // 데이터 출력
);
  },
);
  }
  

================================================================
Firestore FMC (파이어베이스 스토어드 데이터베이스)

void setupPushNotification() async {
    final fcm = FirebaseMessaging.instance;
    await fcm.requestPermission();  // 권한확인
    final token = await fcm.getToken(); // 토큰 
    print(token);
  }