Let’s build a Flutter app (fast!) Ian Oliveira Mobile Software Enginner Community Manager 18/04/2024 

Agenda What is Flutter? What is Firebase? Set up Firebase and Flutter projects Add Firebase Auth Add Firestore query Display Firestore data Write to Firestore 01. 02. 03. 04. 05. 06. 07. 

3 Quem sou eu? 1. Parnaíba no Litoral do Piauí 1. Bacharel em Ciência da Computação pela UESPI - Parnaíba 2. Cursando especialização em Mobile pelo IFPI 3. Desenvolvedor Flutter Especialista na EXA 4. Fundador e organizador do GDG Parnaíba & Flutter Piauí 5. +12.5k de leituras no blog do Medium 6. (Travel lover) Amante de viagens ✈ 

Flutter Google’s portable UI toolkit for building beautiful multi-platform applications 

Portable Write once, run anywhere iOS Android Web Windows Mac OS Linux Embedded 

Firebase Remote Config A/B Testing Personalization Authentication Firestore Cloud Storage Hosting Realtime Database App Check Cloud Functions Extensions Machine Learning Crashlytics Test Lab Performance Monitoring App Distribution Analytics Cloud Messaging In-App Messaging Build your backend Improve app quality Engage users effectively 

Architecture 

Set up Firebase and Flutter projects 02 

$ flutter create chatapp --empty $ cd chatapp $ flutterfire configure Initialize project on the command line 

dependencies: flutter: sdk: flutter firebase_core: ^2.30.0 cloud_firestore: ^4.19.2 firebase_auth: ^4.17.0 pubspec.yaml 

void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform ); runApp(const MyApp()); } Add project structure 

static const FirebaseOptions web = FirebaseOptions( apiKey: 'AIzaSyCsdkfu d9 dfkj9 qiuODNUXmGnTdGk', appId: '1:12341234:-AppID:129038120983--', messagingSenderId: '1234', projectId: 'chat-app', authDomain: 'chat-app.firebaseapp.com', storageBucket: 'chat-app.appspot.com', ); firebase_options.dart 

class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Chat App', home: const ChatPage(), ); } } Add project structure 

Add Firebase Auth 03 

class ChatPage extends StatelessWidget { // ... Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Meetup Chat App"), centerTitle: false, actions: [ // TODO: add login Button ], ), body: ChatView(), ); } } Add ChatPage widget 

actions: [ ElevatedButton( onPressed: () async { final auth = FirebaseAuth.instance; if (auth.currentUser != null) { await auth.signOut(); } else { await auth.signInAnonymously(); } }, child: Text('Log In Or Out'), ), ], Add authentication to ChatPage widget 

class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, authSnapshot) { // TODO: Add UI }, ); } } Add ChatView widget 

class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, authSnapshot) { // TODO: Add UI }, ); } } Add ChatView widget 

Widget build(BuildContext context) { return StreamBuilder( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, snapshot) { return Column( children: [ Text('User id: ${authSnapshot.data?.uid}'), // rest of app ], ); }, ); } Add ChatView widget 

Query Firestore 04 

Create the Message class class Message { final String uid; final String message; final Timestamp? timestamp; Message({ required this.uid, required this.message, this.timestamp, }); } 

class Message { // ... factory Message.fromFirestore(DocumentSnapshot data) { return Message( uid: data['uid'], message: data['message'], timestamp: data['timestamp'], ); } } Create the Message class 

Create a class for Firestore data class Message { //... Map toFirestore() { return { 'uid': uid, 'message': message, 'timestamp': timestamp ?? Timestamp.now(), }; } } 

Messages Firestore query final messagesQuery = FirebaseFirestore.instance.collection('messages') .orderBy('timestamp', descending: true); 

Display Firestore data 05 

class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, snapshot) { return Column( children: [ Text('User: ${snapshot.data?.uid}'), // rest of app ], ); // ... ChatView widget 

Read Firestore Data return Column( children: [ // ... Expanded( child: StreamBuilder( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { // TODO: add ui }, ), ), // ... 

Read Firestore data StreamBuilder( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { if (messagesSnapshot.connectionState == ConnectionState.waiting){ return const Center(child: CircularProgressIndicator()); } 

Read Firestore data StreamBuilder( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { // ... if(authsnapshot.hasData) return ListView.builder( reverse: true, itemCount: messagesSnapshot.data!.size, itemBuilder: (BuildContext context, int idx) { final message = Message.fromFirestore(messagesSnapshots.data!.docs[idx]); return ChatBubble(text: message.message); } ); } ); 

Write to Firestore 06 

Read Firestore data return Column( children: [ //... if(authsnapshot.hasData) ChatTextInput( onSend: (message) { FirebaseFirestore.instance .collection('messages').add( Message( uid: authSnapshot.data!.uid, message: message, ).toFirestore(), ); }, ), ], 

Deploy 06 

Firebase Hosting $ firebase experiments:enable webframeworks $ firebase init hosting 

{ "hosting": { "source": "." } } firebase.json 

firebase deploy Deploy 

Demo via Firebase Hosting https://talkmeetup.web.app/ Demo 

Thank you! Learn more about Flutter and Firebase! Ian Oliveira Mobile Software Enginner Community Manager @ianoliveira.dev Ian oliveira @ianoliveirag12