Let’s build a Flutter app (fast!)

In this talk, we explore the powerful combination of Flutter, Google’s UI toolkit for building natively compiled applications, and Firebase, a comprehensive app development platform. This session is designed to demonstrate how quickly you can develop and deploy a full-featured app using Flutter and Firebase.

Transcript

1. Let’s build a Flutter app (fast!) Ian Oliveira Mobile Software Enginner Community Manager 18/04/2024
2. 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. 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 ✈
4. Flutter Google’s portable UI toolkit for building beautiful multi-platform applications
5. Portable Write once, run anywhere iOS Android Web Windows Mac OS Linux Embedded
6. 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
7. Architecture
8. Set up Firebase and Flutter projects 02
9. $ flutter create chatapp --empty $ cd chatapp $ flutterfire configure Initialize project on the command line
10. dependencies: flutter: sdk: flutter firebase_core: ^2.30.0 cloud_firestore: ^4.19.2 firebase_auth: ^4.17.0 pubspec.yaml
11. void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform ); runApp(const MyApp()); } Add project structure
12. 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
13. class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Chat App', home: const ChatPage(), ); } } Add project structure
14. Add Firebase Auth 03
15. 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
16. 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
17. class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder<User?>( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, authSnapshot) { // TODO: Add UI }, ); } } Add ChatView widget
18. class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder<User?>( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, authSnapshot) { // TODO: Add UI }, ); } } Add ChatView widget
19. Widget build(BuildContext context) { return StreamBuilder<User?>( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, snapshot) { return Column( children: [ Text('User id: ${authSnapshot.data?.uid}'), // rest of app ], ); }, ); } Add ChatView widget
20. Query Firestore 04
21. Create the Message class class Message { final String uid; final String message; final Timestamp? timestamp; Message({ required this.uid, required this.message, this.timestamp, }); }
22. class Message { // ... factory Message.fromFirestore(DocumentSnapshot data) { return Message( uid: data['uid'], message: data['message'], timestamp: data['timestamp'], ); } } Create the Message class
23. Create a class for Firestore data class Message { //... Map<String, dynamic> toFirestore() { return { 'uid': uid, 'message': message, 'timestamp': timestamp ?? Timestamp.now(), }; } }
24. Messages Firestore query final messagesQuery = FirebaseFirestore.instance.collection('messages') .orderBy('timestamp', descending: true);
25. Display Firestore data 05
26. class ChatView extends StatelessWidget { const ChatView({super.key}); @override Widget build(BuildContext context) { return StreamBuilder<User?>( stream: FirebaseAuth.instance.authStateChanges(), builder: (context, snapshot) { return Column( children: [ Text('User: ${snapshot.data?.uid}'), // rest of app ], ); // ... ChatView widget
27. Read Firestore Data return Column( children: [ // ... Expanded( child: StreamBuilder<QuerySnapshot>( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { // TODO: add ui }, ), ), // ...
28. Read Firestore data StreamBuilder<QuerySnapshot>( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { if (messagesSnapshot.connectionState == ConnectionState.waiting){ return const Center(child: CircularProgressIndicator()); }
29. Read Firestore data StreamBuilder<QuerySnapshot>( 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); } ); } );
30. Write to Firestore 06
31. 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(), ); }, ), ],
32. Deploy 06
33. Firebase Hosting $ firebase experiments:enable webframeworks $ firebase init hosting
34. { "hosting": { "source": "." } } firebase.json
35. firebase deploy Deploy
36. Demo via Firebase Hosting https://talkmeetup.web.app/ Demo
37. Thank you! Learn more about Flutter and Firebase! Ian Oliveira Mobile Software Enginner Community Manager @ianoliveira.dev Ian oliveira @ianoliveirag12