[24-04-02]TIL Flutter Udemy

firebase에 유저의 이메일과 비밀번호 저장하는 법.

final userCredentials = await _firebase.createUserWithEmailAndPassword(
            email: _enteredEmail, password: _enteredPassword);

try catch문으로 에러 잡는 법.
ScaffoldMessenger로 SnackBar 설정하는 법.
?? 연산자 : 표현식의 결과가 null이 아닌 경우 해당 결과를 반환하고, 결과가 null인 경우 다른 값을 반환하도록 할 때 사용.

?? 연산자 사용 예시

기본 사용법: 변수에 null이 아닌 값을 할당하거나, 변수가 null일 때 기본값을 할당할 때 사용합니다.
예: var result = data ?? '기본값';
함수에서의 활용: 함수의 반환 값이 null일 경우 기본값을 반환하도록 설정할 수 있습니다. null 아닐 경우 data.
예: String getName(String? name) => name ?? '익명';

firebase 로그인 하는 법.

final userCredentials = await _firebase.signInWithEmailAndPassword(
            email: _enteredEmail, password: _enteredPassword);

로그인 되었을 때 나타낼 화면 파일(ChatScreen)을 만들고 main.dart파일 코드 수정.

home: StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (ctx, snapshot) {
          if (snapshot.hasData) {
            return const ChatScreen();
          }

          return const AuthScreen();
        },
      ),

streambuilder

StreamBuilder의 기본 개념

스트림 사용 이유: StreamBuilder는 데이터가 수시로 바뀔 때 사용됩니다. Future는 한 번만 데이터 변화를 알리지만, Stream을 사용하면 데이터가 지속적으로 변할 때마다 이를 감지하고 반응할 수 있습니다.

동작 방식: StreamBuilder는 지정된 스트림과의 최신 상호작용 스냅샷을 기반으로 자신을 빌드합니다. 이를 통해 비동기 데이터 스트림을 UI와 효과적으로 연결할 수 있습니다.

StreamBuilder와 FutureBuilder의 차이점

비동기 데이터 처리: StreamBuilder는 시간에 따라 변하는 값을 지속적으로 동기화하는 비동기 방식으로 작동합니다. 반면, FutureBuilder는 한 번의 비동기 작업 완료 후 결과를 반영합니다.

데이터 스트림 처리: StreamBuilder는 데이터를 스트림 형태로 지속적으로 가져와서 위젯을 추가하거나 삭제할 수 있습니다. 이는 FutureBuilder와 구별되는 주요 특징입니다.

StreamBuilder를 사용하면 Flutter 앱에서 실시간으로 데이터를 처리하고 반응하는 UI를 구현할 수 있습니다. 데이터가 변할 때마다 UI가 자동으로 업데이트되므로 사용자 경험을 크게 향상시킬 수 있어요!

SplashScreen 추가하는 법.

if (snapshot.connectionState == ConnectionState.waiting) {
            return const SplashScreen();
          }

Firebase logout하는 법.

class ChatScreen extends StatelessWidget {
  const ChatScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterChat'),
        actions: [
          IconButton(
            onPressed: () {
              FirebaseAuth.instance.signOut(); //⭐️로그아웃
            },
            icon: Icon(
              Icons.exit_to_app,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ],
      ),
      body: const Center(
        child: Text('Logged in!'),
      ),
    );
  }
}

firebase에 image 업로드하는 법.
firebase storage에

allow read, write: if request.auth != null;

코드 수정.

flutter pub add firebase_storage
flutter pub add image_picker

imagepicker 사용법.
작은 화면 파일을 만들고 다른 파일에서 import해서 사용.

auth.dart 파일

if (!_isLogin) const UserImagePicker(),

user_image_picker.dart파일

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class UserImagePicker extends StatefulWidget {
  const UserImagePicker({super.key});

  @override
  State<StatefulWidget> createState() {
    return _UserImagePicker();
  }
}

class _UserImagePicker extends State<UserImagePicker> {
  File? _pickedImageFile;

  void _pickImage() async {
    final pickedImage = await ImagePicker().pickImage(
      source: ImageSource.camera,
      imageQuality: 50,
      maxWidth: 150,
    );

    if (pickedImage == null) {
      return;
    }

    setState(() {
      _pickedImageFile = File(pickedImage.path);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CircleAvatar(
          radius: 40,
          backgroundColor: Colors.grey,
          foregroundImage:
              _pickedImageFile != null ? FileImage(_pickedImageFile!) : null,
        ),
        TextButton.icon(
          onPressed: _pickImage,
          icon: const Icon(Icons.image),
          label: Text(
            'Add Image',
            style: TextStyle(
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        )
      ],
    );
  }
}

selectedImage를 Authentication폼에 관리하는 법.