Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let’s build a Flutter app (fast!)

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.

Ian Oliveira

April 18, 2024
Tweet

More Decks by Ian Oliveira

Other Decks in Programming

Transcript

  1. 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.
  2. 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 ✈
  3. 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
  4. $ flutter create chatapp --empty $ cd chatapp $ flutterfire

    configure Initialize project on the command line
  5. 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
  6. class MyApp extends StatelessWidget { Widget build(BuildContext context) { return

    MaterialApp( title: 'Chat App', home: const ChatPage(), ); } } Add project structure
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. Create the Message class class Message { final String uid;

    final String message; final Timestamp? timestamp; Message({ required this.uid, required this.message, this.timestamp, }); }
  13. class Message { // ... factory Message.fromFirestore(DocumentSnapshot data) { return

    Message( uid: data['uid'], message: data['message'], timestamp: data['timestamp'], ); } } Create the Message class
  14. Create a class for Firestore data class Message { //...

    Map<String, dynamic> toFirestore() { return { 'uid': uid, 'message': message, 'timestamp': timestamp ?? Timestamp.now(), }; } }
  15. 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
  16. Read Firestore Data return Column( children: [ // ... Expanded(

    child: StreamBuilder<QuerySnapshot>( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) { // TODO: add ui }, ), ), // ...
  17. Read Firestore data StreamBuilder<QuerySnapshot>( stream: messagesQuery.snapshots(), builder: (context, messagesSnapshot) {

    if (messagesSnapshot.connectionState == ConnectionState.waiting){ return const Center(child: CircularProgressIndicator()); }
  18. 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); } ); } );
  19. 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(), ); }, ), ],
  20. Thank you! Learn more about Flutter and Firebase! Ian Oliveira

    Mobile Software Enginner Community Manager @ianoliveira.dev Ian oliveira @ianoliveirag12