코딩강의/chat_app(플러터-유데미)
~276. Adding User Logout
김마드
2023. 12. 6. 18:41
1. splash 화면을 만들어보자.
기존 구성의 문제는, 스냅샷 값을 받아오기전에 잠깐 auth화면을 보여준다. 때문에, 그 값을 받아오기전에 보여줄 수 있는 splash화면을 만들어보자.
2. 로그아웃 기능을 만들어보자.
로그아웃을 하게 되면 기기 값에 토큰값이 사라져, 기기를 다시 껐다 켜도 로그아웃된 상태가 된다.
- main.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:chat_app/screens/splash.dart';
import 'package:chat_app/screens/chat.dart';
import 'firebase_options.dart';
import 'package:chat_app/screens/auth.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FlutterChat',
theme: ThemeData().copyWith(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color.fromARGB(255, 63, 17, 177)),
),
home: StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (ctx, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const SplashScreen();
}
if (snapshot.hasData) {
return const ChatScreen();
}
return const AuthScreen();
}),
);
}
}
1) ConnectionState.wating 부분에 스플래쉬 화면을 넣는다.
- splash.dart
import 'package:flutter/material.dart';
class SplashScreen extends StatelessWidget {
const SplashScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FlutterChat'),
),
body: const Center(
child: Text('Loading...'),
),
);
}
}
1) 임의로 위와 같이 세팅
-chat.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
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!'),
),
);
}
}
1) signOut버튼을 앱바에 추가해주었고, 해당 버튼을 누르면 auth 화면으로 이동된다.
- 결과 화면
