#Flutterfire

[flutteragency]

Use Firebase to Host Your Flutter App on the Web

Are you a Flutter developer and wish to launch the app on the web? Do you focus on the best solution to launch the app? Of course, you can utilize Firebase to host the app. You may also get help of developers and hire flutter developers to take every step without mistakes. The Flutter agency helps you in every step and hosts the app easily on the web.

Flutter web app works well on different platforms such as iOS, android, web, and desktop. Firebase is an effective tool for setting up and accessing an app on a browser. It is best practice to allocate the app to a tester and automate the release process. The updated version supports the web platform.

It is useful for the flutter developer to push code reusability to another level with the web platform. The new version comes with compatible UI frameworks to develop a stunning app experience on the platform.

With the advent of technology, you can search and find the best agency well-known in flutter and gain the perfect service to host the app easily. If you keep the project very handy, you must keep a web folder copy with inde.html. Creating a project after enabling the web will make a web/index.html file for the project.

Build Firebase project:

If you have a project already, you can use them. You can visit the Firebase console and add a new project when it comes to a new project. After that, you can give a name to the project and continue the process. Now, you can click on Create a Project and hit Continue. Flutter developers wait for a few minutes as the project is ready.

Some developers prefer something other than Google Analytics for this project and turn it off them to create a project. If you want Google Analytics, you can turn it on. An additional step is needed to enable Google Analytics. Once the project is ready, you can work with them.

Set up Firebase tools CLI:

If you have Firebase tools in your system, you can proceed with further steps. Whether you don’t have Firebase tools, you must install them in your system.

Node.js is mandatory to install for the Flutter project. Firebase CLI manages a different array of tools. With the help of the tool, one can view, manage and deploy a Firebase project.

After installing npm, you can run the required command to install Firebase tools. Developers run code like npm install –g firebase-tools. Firebase CLI reference is useful for people to access more information.

Start Firebase hosting for the project:

Developers must set up Firebase hosting for the Flutter project. After setting up Firebase hosting, you can go to the root directory for the Flutter app and run the necessary commands to log in.

Firebase login

It allows you to enter a web page where it is vital to include mandatory credentials to authenticate the system. Developers must allow all permissions. After accepting permissions, you can get a successful message. It tells you to get a good outcome for the operation.

Firebase logout

If you want to re-login with different accounts, you can log out of your existing account first. You can follow the command prompt and link. Then, flutter developers accept the permission and click on OK. When you return to the terminal, you can view your login. You can begin the project by running the command.

Firebase init

It allows you to choose the Firebase CLI attributes you wish to set up for the project. Individuals may also utilize the arrow key to navigate the cursor for hosting. The space button is vital to choosing Firebase hosting. After that, you can click on enter and confirm your choice. Next, you can set up a project for Firebase hosting. In that manner, you need to choose an existing project and click enter. Know more on how to add Firebase to A flutter app with flutterfire CLI.

Utilize existing project

When the terminal is raised for what you utilize as a public directory, you can include build web and hit the enter option.

Hosting setup:

At last, the message updates you on the operation outcome. Firebase initialization can finish.

Create and deploy the app:

Flutter building web is necessary for creating an app for the web. It makes files in <root-directory>/build/web.

When you discover an error like the experimental feature does not support stable branches, you must enable the dev channel and web. The build process can run easily. Firebase deploys let’s all files upload and host in Firebase URL. After deploying, you can pay attention to the link in the terminal to the project.

Configure domain:

Configuring the domain is a vital step for a Flutter developer after hosting an app on Firebase. Once the web application upload is over, the developer deploys the application to a custom domain. You may need to follow the basic steps for the custom domain.

First, move to the hosting section under the Firebase console and hit on adding a custom domain.

Now, input the domain name and click continue.

You must copy values and set out the domain provider.

Then, visit the DNS section on the domain provider’s web.

After, move to records and include copied value records on the ipv4 address text area.

You can check the copied value again and click the save button.

After configuration, flutter developers wait for twenty-four hours until Firebase confirms website ownership.

It takes some time, and developers wait for that.

You can receive a connected message in the status column.

Now, you can utilize a custom domain.

These steps are helpful for a flutter developer to host an app through Firebase hosting on the web. The internet is the best source to gather accurate details about web application hosting.

You may also use the official Firebase hosting document to get detailed information. You can understand a quick overview of the Flutter app on the web. Developers never make any mistakes when hosting. Initializing a project carefully is a major focus of a Flutter developer.

Conclusion:

The above steps are useful for developers to handle flutter projects and host apps easily without obstacles. With the help of hiring Flutter developers, you have perfect guidance for hosting web apps with Firebase hosting.

[pravaahconsultings]

20 Essential Flutter Tools to Know in 2024

Flutter has emerged as a leading framework for building cross-platform mobile applications, offering a rich set of tools and features to streamline the development process. As we step into 2024, mobile application development companies need to stay updated with the latest Flutter tools to enhance their development workflow and deliver high-quality apps.

In this blog, we'll explore 20 essential Flutter tools that every developer should know in 2024, helping you stay ahead in the rapidly evolving world of mobile app development.

Why Flutter?

Flutter is a popular choice for mobile app development due to its fast development cycle, hot reload feature for quick updates, and single codebase for both iOS and Android. It offers a rich set of customizable widgets, excellent performance, and robust community support, making it ideal for building high-quality apps efficiently.

1. Flutter Inspector

The Flutter Inspector is a powerful tool that allows developers to visualize and explore the widget tree of their Flutter app. It helps in debugging UI issues and optimizing the app's performance.

2. Dart DevTools

Dart DevTools is a suite of tools that help developers debug and analyze their Dart and Flutter code. It provides insights into memory usage, performance profiling, and more.

3. FlutterFire

FlutterFire is a set of Flutter plugins that enable Firebase services in Flutter apps. It provides easy integration with Firebase services such as Authentication, Cloud Firestore, and Cloud Messaging.

4. Flutter Localizations

Flutter Localizations is a package that provides tools for internationalizing Flutter apps, allowing developers to easily add support for multiple languages and locales.

5. RxDart

RxDart is a reactive programming library for Dart that provides developers with powerful tools for managing asynchronous data streams in Flutter apps.

6. Flutter Form Builder

The Flutter Form Builder package simplifies the process of building forms in Flutter apps, offering a variety of pre-built form fields and validation options.

7. Dio

Dio is a powerful HTTP client for Dart that simplifies the process of making HTTP requests in Flutter apps, offering features such as request cancellation and interceptors.

8. Hive

Hive is a lightweight and fast key-value database for Flutter apps, offering efficient data storage and retrieval capabilities.

9. Flutter Bloc

Flutter Bloc is a state management library for Flutter apps that helps in organizing code and managing app states using the BLoC (Business Logic Component) pattern.

10. Provider

Provider is a simple and flexible state management solution for Flutter apps that offers a lightweight and easy-to-use alternative to other state management libraries.

11. Fluro

Fluro is a Flutter routing library that provides a declarative way to define routes in Flutter apps, making it easy to navigate between screens.

12. VelocityX

VelocityX is a Flutter UI library that offers a collection of pre-built widgets and utilities for building beautiful and responsive user interfaces.

13. GetX

GetX is a powerful state management and navigation library for Flutter apps that offers a simple and intuitive API for managing app state and navigation.

14. Firebase Analytics

Firebase Analytics is a tool that helps developers track user engagement and app usage in Flutter apps, providing valuable insights for app optimization.

15. Flutter Launcher Icons

Flutter Launcher Icons is a tool that simplifies the process of generating app launcher icons for Flutter apps, ensuring consistent and high-quality icons across different platforms.

16. Flutter Secure Storage

Flutter Secure Storage is a package that provides a secure and encrypted storage solution for sensitive data in Flutter apps, ensuring that user data is protected.

17. Flutter SVG

Flutter SVG is a package that allows developers to easily render SVG images in Flutter apps, providing a scalable and flexible solution for vector graphics.

18. Firebase Performance Monitoring

Firebase Performance Monitoring is a tool that helps developers monitor and optimize the performance of their Flutter apps, ensuring a smooth and responsive user experience.

19. Flutter Screen Util

Flutter Screen Util is a package that helps developers design Flutter apps that are responsive and adaptable to different screen sizes and resolutions.

20. Flutter Hooks

Flutter Hooks is a library that provides a way to use stateful logic and side effects in Flutter apps, offering a more functional approach to building UI components.

These 20 essential Flutter tools are invaluable for mobile application development companies looking to create high-quality, feature-rich Flutter apps in 2024. By leveraging these tools, developers can streamline their development workflow, optimize app performance, and deliver exceptional user experiences. Stay updated with the latest Flutter tools and elevate your Flutter app development to new heights.

For additional information, get in touch with a mobile application development company that may help your business expand indirectly by providing better, more user-friendly functionalities that are simple to use.

[kodehashtechnology]

Cross-Platform Showdown: Flutter vs. Xamarin vs. React Native

In today's mobile-driven world, cross-platform development frameworks have become increasingly popular for building mobile applications that can run seamlessly across multiple platforms. Among the most prominent frameworks are Flutter, Xamarin, and React Native, each offering unique features and capabilities. In this article, we'll delve into a showdown between these cross-platform development giants—Flutter, Xamarin, and React Native—comparing their strengths, weaknesses, and suitability for various development scenarios.

Understanding Flutter:

Flutter, developed by Google, is an open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. Let's explore its key features:

Performance and Speed:

Flutter offers exceptional performance and fast rendering speeds by compiling Dart code directly to native machine code, resulting in smooth animations and responsive UIs.

Its "hot reload" feature allows developers to make changes to the code and see the results instantly, enhancing productivity and iteration speed.

Rich UI Experience:

Flutter provides a rich set of customizable widgets and UI components, enabling developers to create beautiful, native-like interfaces across platforms.

Its "widget-based" architecture allows for highly flexible and expressive UI design, with support for animations, gestures, and custom styling.

Growing Ecosystem:

Flutter has a rapidly growing ecosystem of packages, plugins, and community support, offering developers access to a wide range of tools and resources.

Frameworks like FlutterFire provide seamless integration with Firebase services for backend functionality, while plugins extend Flutter's capabilities for tasks like navigation, state management, and data persistence.

Exploring Xamarin:

Xamarin, acquired by Microsoft, is a cross-platform framework for building native mobile apps using C# and the .NET framework. Here are its key features:

Native Performance:

Xamarin allows developers to build fully native applications for iOS, Android, and Windows using a single codebase, leveraging the performance and capabilities of each platform.

Its architecture enables direct access to native APIs and platform-specific functionality, ensuring a high level of performance and user experience.

Unified Development Environment:

Xamarin provides a unified development environment with Visual Studio and Visual Studio for Mac, allowing developers to write, debug, and test code seamlessly across platforms.

Its integration with Microsoft's ecosystem, including Azure services and .NET libraries, simplifies backend integration, authentication, and cloud-based functionality.

Large Community and Support:

Xamarin has a large and active community of developers, contributors, and enthusiasts, providing valuable resources, documentation, and support forums.

Microsoft offers extensive documentation, tutorials, and training materials for Xamarin, as well as dedicated support channels for enterprise customers.

Comparing React Native:

React Native, developed by Facebook, is a JavaScript framework for building native mobile apps using React. Let's examine its key features:

Code Reusability:

React Native allows developers to write code once and deploy it across multiple platforms, including iOS, Android, and web, using a single codebase.

Its "learn once, write anywhere" approach leverages React's declarative UI paradigm and component-based architecture for efficient code reuse and maintainability.

Fast Development Iterations:

React Native offers a fast development cycle with its "hot reload" feature, allowing developers to see changes instantly and iterate quickly during the development process.

Its large ecosystem of third-party libraries, components, and plugins further accelerates development by providing pre-built solutions for common tasks and functionalities.

Community and Ecosystem:

React Native has a vibrant community of developers, contributors, and companies, with extensive documentation, tutorials, and resources available online.

The React Native community actively maintains a vast ecosystem of open-source libraries, tools, and plugins, enabling developers to extend and customize their applications with ease.

Cross-Platform Showdown:

Performance:

Flutter generally offers better performance compared to Xamarin and React Native due to its direct compilation to native machine code.

Xamarin provides native performance by accessing platform-specific APIs directly, while React Native may face occasional performance bottlenecks due to its JavaScript bridge.

Development Experience:

Flutter's "hot reload" feature and rich set of customizable widgets provide a smooth and efficient development experience.

Xamarin's unified development environment and strong integration with Microsoft's ecosystem offer a seamless experience for .NET developers.

React Native's fast development iterations and large ecosystem of third-party libraries enhance developer productivity and flexibility.

Ecosystem and Community Support:

Flutter and React Native have rapidly growing ecosystems and vibrant communities, offering extensive documentation, tutorials, and third-party libraries.

Xamarin benefits from strong support and resources from Microsoft, with dedicated documentation, training materials, and enterprise-level support.

Conclusion:

In conclusion, the showdown between Flutter, Xamarin, and React Native highlights the strengths, weaknesses, and unique features of each framework. Flutter excels in performance and rich UI experience, Xamarin offers native performance and strong integration with the .NET ecosystem, while React Native prioritizes fast development iterations and a large ecosystem of third-party libraries. The choice between these frameworks ultimately depends on your specific project requirements, development team's expertise, and long-term goals. By carefully evaluating these factors and comparing the features of Flutter, Xamarin, and React Native, you can choose the framework that best aligns with your needs and objectives, ensuring a successful and efficient cross-platform development process.

[ponyartistbrainiac]

I had this idea for a few years for a crackship story where Spitfire becomes a painter after retiring from the wonderbolts and she stars a relationship with fluttershy who she met because she was coming to shows to support her friend rainbow dash

It was going to be called yellow on yellow and it was going to be a rom drama slice of life with alot of wholesome moments

It never got off the ground and this is all thats really been done with it

[ask-rarity]

Camera totally faded her lower half but i'm up to drawing again! :3

[innoventixsolutions]

It is time to collect relevant data regarding the source and usage of FlutterFire and it is the set of the Fluttter plugins that can help in the better usage of the Flutter apps to make use in case of the Firebase services. At the juncture you should follow the examples that will help in exhibiting how to make use of the Plugins in the Firebase mode for the reason to flutter the codelab. Fluttter is eventually is the Google UI toolkit to help in the building of the natively beautiful and the compiled applications for the mobile, the desktop and the web from the single point of codebase.

More Flutter Details to Consider

Flutter is mostly used by the organizations and the developers from all parts of the world. It is the open and the free source. The structure of the FlutterFire is still under construction and this you can well understand when you go through the roadmap. In certain cases the APIs and the platforms are not yet available. You have the Google Analytics for the FlutterFire and in the case the Firebaase is sure to provide with the set of automatic captures along with the applicable key events and the right user properties.

Utility of the Firebase

With the help of the Flutter firebase you can easily define and create your personal custom events in particular. This will help in measuring things uniquely in respect to the application. The firebase of the Google analytics will be able to provide with the free and the kind of unlimited reporting based on the innumerable specialized events and the related user properties. With the use of the same you are able to define your personal custom events in the unique measuring of the things that can have an impact on your business as such.

Help from the Firebase

With the help of the Firebase Flutterfire one can easily measure the options that can have the best effect on your business. You even have the analytics surface data to tell in details about the user behavior in both cases of the Android and the iOS apps. This is something to help you make better and informed decisions in life about the specific product and marketing optimization. Here you can have a possible view of the crash data and the effectiveness of the notification. Here one can make use of the deep-link performance regarding the in-app purchasing data along with the rest of the details in offer.

Ads networking with flutter Firebase

The Flutter Firebase Google analytics has the ability to integrate with innumerable Ad networks and this makes things easy with the SDK. Now you can easily close the loop and keep sending the conversion details back to the previous network to track the attributed app campaigning performance in case of the sources with all the postbacks and this can better help in optimizing the performance of the campaign. This makes ad networking easy and perfect with the viable attributes in practice.

Defining the Custom Audience

It is important that you define the custom audiences a part of the Firebase console. The same is based on the devised data and the kind of user attitude with the perfect utilizing of the events along with the rest of the user properties. You even have the specific segments meant for notifications. You can even know about the A/B tests by means of the Firebase remote configuration and there is even the Google Ads remarketing. For the reason of custom analysis one can easily help in the exporting of the raw data in matters of the BigQuery.

Use of Firebase Flutter

There are real advantages of making use of Firebase Flutter. There is the flutter development framework and it functions faster when compared to the alternatives. In most of the cases you can expect the flutter app to have the requirement for at least two times in fewer man hours when compared to the similar app that is separately developed for both the Android and iOS. In the career of software development Firebase Flutter plays the most important role in choosing the best instrument to make use of the mobile cross-platform development in the applicable projects.

Expertise of Firebase Flutter

It is extremely enjoyable with Flutter and it can help in dominating the kind of cross-platform application augmentation in the impending years. The concept comes from the source of the native android development and it comes with the specific GameDev expertise. It is the cross-platform application development tool that you can bet use in your career. The same helps in combining the ease of development along with the native actions and at the same time maintaining the kind of visual consistency in all the platforms. Here lies the perfect essence of Firebase Flutter to help make things easy and achievable in life and career.

Source: https://innoventixsolutions.com/flutterfire-things-you-know/

[dedikahfi-blog]

Flutter Introduction

Setelah rilisnya bahasa pemrograman Dart yang di kembangkan oleh google pada tahun 2011 kini bahasa tersebut sudah memiliki framework yang bisa digunakan untuk membuat aplikasi moile yaitu untuk android dan ios sekaligus dalam satu waktu. Flutter juga digunakan sebagai framework utama dalam pengembangan aplikasi untuk OS Google Fuchsia.

Tentang Flutter :

Menggunakan Library Grafik Google Skia untuk mesin rendernya, alias tidak menggunakan bawan dari android atau iOS, dan ini yang membuat tampilan di android, iOS, atau desktop tetap sama.

Semua UI adalah Widget

Rendering Lebih Cepat

Tidak hanya untuk membuat UI Flutter juga untuk menangani aliran data dan status data yang rumit dengan cara yang elegan dengan model Reactive.

Dalam acara Google I/O 2018 menyatakan bahwa sekarang sudah menyediakan dokumentasi yang lengkap di flutter.io dan anda bisa langsung belajar framework ini dari dokumentasi tersebut atau bisa mengambil courses di udacity atau tempat courses lainnya seperti di https://codelabs.developers.google.com/codelabs/flutter/#0

Flutter di tulis menggunakan bahasa pemrograman Dart

adalah berita baik bagi programmer karena dengan framework ini anda bisa membangun aplikasi untuk android dan ios sekaligus, dan ini akan membuat produk anda akan lebih cepat untuk di pasarkan.

Selain itu, telah di tambahkan plugin baru dengan fitur lengkap untuk Remote Config, Cloud Firestore, dan Performance Monitoring. Untuk ikhtisar dukungan Firebase, silakan lihat halaman FlutterFire

Seperti yang disebutkan pengumuman I / O , Flutter adalah toolkit kelas-satu untuk Material, yang berarti tim Material dan Flutter telah bekerja sama untuk memberikan lebih banyak dukungan untuk Desain Material, untuk lebih jelasnya anda bisa membaca nya di https://flutter.io/widgets/material/

Jika anda ingin membuat aplikasi pertama anda menggunakan framework ini anda bisa menggukan IDE Android Studio atau IntelIJ, para pengembang Flutter sudah menyediakan plugin untuk kedua IDE ini namun jika anda ingin menulis kode flutter menggunakan tools lain itu tidak masalah.

Flutter di buat menggunakan bahasa pemrograman dart yang diamana jika anda ingin mempelajari pembuatan aplikasi menggunakan ini anda tentu harus menguasai bahasa pemrograman dart terlebih dahulu, namun tidak menutup kemungkinan untuk anda yang sudah mempelajari bahasa pemrogrman lainnya karena konsep pemrograman tidak jauh berbeda tergantung paradigma pemrograman yang anda pelajari sebelumnya.

[davidpoal]

Flutter 3.0 Release : The Latest Features & Updates

Finally, the wait for new technology in development is over. The new Flutter 3.0 is released and every developer is excited to use this latest technology feature in their mobile app development projects. Many exciting features have been added in Flutter 3.0 & support for Android, iOS, Windows, Linux, and web apps are extended.

Since Flutter is a widely used, most popular mobile app development framework. It is useful to know what Flutter 3.0 has brought for developers and business persons who want to create powerful apps.

If you are trying to hire flutter app developers or use flutter in your tech field you must understand what is Flutter 3. Here is a blog that provides a complete guide about the features and updates of the latest release Flutter 3.0.

What is  Flutter 3.0?

Flutter 3.0 is the latest version of Flutter. It is a framework or a google UI SDK for developing cross-platform mobile apps. Using the flutter framework developers can create a unique mobile experience for up to 6 OS platforms with a single code base. It provides unbeaten productivity to developers and empowers startups to turn their innovative app ideas into fully-functional mobile applications at ease.

The previous version of Flutter 2.10 supported Android, iOS, and Windows. But the Flutter 3.0 provide stable and extensive support for Android, iOS, Windows, macOS, Linux desktop apps, and web apps.

It has features like compilation and builds support, input and interaction models, platform-specific integration,  better accessibility, and multi-lingual support. Flutter 3 is an enhanced version that has come with many improvements to existing features.

Latest features in Flutter 3.0

Support for Foldable Phones

The latest version of  Flutter 3.0 provides support for folded mobile devices. It has the latest features and widgets which allow developers to build responsive and dynamic mobile apps for folder mobile phones. This feature is added after the collaboration with Microsoft.

Flutter 3 has a list of MediaQuery which consists of a range of DisplayFeatures that tells the bounds and states of device elements. It has a widget called DisplayfeatureS subScreen, it displays the positions of screens without overlapping the bounds of DisplayFeatures.

These were not available in the previous version of flutter. Now it is very interesting to see how developers will use this feature in developing apps for foldable phones that are still evolving.

Menu Cascading & Support for MacOS System

It has fresh inputs for platform-specific integration. It provides better accessibility and interactive models for compilation. The purpose of this update is it allows better flexibility to developers so they can efficiently utilize the operating system.

Improvements in Firebase Integration

In the latest version of Flutter 3.0, there is a new widget called [FlutterFire UI] it provides developers a reusable user interface for profile screens and authentications. This feature of improvement in Firebase support with flutter was already in demand for a long time.

Web and mobile application services are provided by Firebase. Around 62% of Flutter app developers use Firebase in their mobile app development projects. This integration of a new feature in the form of the widget will give more capability for user interface reusability.

Flutter Casual Games Toolkit

Flusteris one of the most popular cross-platform mobile app development frameworks. Developers use Flutter for creating business and customer-centric features. But now they can create mobile games using flutter technology.

Flutter 3 has a casual games toolkit.  This kit has a wide range of templates, best practices, and dedicated support for creating lightweight mobile games for multiple operating systems. However, this games toolkit allows developers to build high-power or 3D games like PUBG. For casual game lovers, there is an option of creating game-like paintball or angry bird.

Dart 2.17

Flutter 3 has a new Dart SDK called version 2.17with some new updates and add-ons. The Dart 2.17 offers new language features which contain [enums], better flexibility for defined parameters, and enhanced parameters forwarding to superclasses.

It has updated tools with a new version of the [package:lints]. This tool offers to check Dart code against Flutter’s conventional development practices and also it comes with many updates in its core tools focusing on improving the productivity and speed of the flutter developers.

Material 3 Support in Material You

Flutter 3 provides n new support in the [Material You] feature with the enhanced version of material 3.0. It has new visual effects and design elements that offer developers and flutter app development companies to take good advantage of the Material You feature of Flutter.

using Flutter 3 developers can get better adaptability and a cross-platform design system that provides them with dynamic color schemes and improved visual components.

Enhanced Performance in Flutter 3.0

The performance speed of Flutter 3 is faster than the previous version. It has suitable changes in opacity animation performance for simple case scenarios which will be used in creating simple animation-based UI elements. These updates give advantages for both developers and businesses.

For instance, when an Opacity gadget contains a solitary delivering crude, its save layer technique is rejected.

This capacity was not accessible in the past Flutter version. However, in the most recent version, there is a component that predicts the delivery trouble of pictures according to the executed tasks.

Aside from this, the Flutter group is planning to execute this streamlining technique in more case situations in the forthcoming deliveries. It implies it will additionally work on the speed and execution of Flutter application advancement in not so distant future.

Variable refresh rate support for IOS

It has improved rendering capacity. It provides support for variable refresh rates and ProMotion displays on iOS platforms with improved refresh rates. In the previous version, Flutter 2.10 has a 60Hz refresh rate, But in Flutter 3, the rendering capacity has increased up to 120Hz. This update help developer with a seamless scrolling experience while watching fast animations.

Web Image Decoding

Flutter 3 includes new APIs that automatically detect images from the main thread asynchronously. It is executed through the in-constructed picture codecs of the program which improves the picture translating speed by 2x and furthermore guarantees the fundamental string is rarely obstructed and eliminates all garbage documents made up before.

Exciting Features in Flutter 3.0

Theme Extension

Flutter 3 comes with rich theme extensions. Allows developers to combine anything with the ThemeData material library using theme extensions. If you have custom widgets outside of the [MatrialThemeDat] property that require custom attributes, you can use this updated feature to simplify the complexities of creating custom theme attributes for your widgets.

Material You 3.0

Material You is one of Flutter’s best features. Now offers more visual effects and design elements for text and typography. The Flutter development team has tried to provide an adaptive cross-platform theme system that can help you turn a simple-looking Flutter application into an attractive Flutter application.

Flutter Casual Mobile Game Toolkit

In previous versions of Flutter, there was no support for developing mobile games in the Flutter app. In addition to this latest version, Google has provided special support for the creation of mobile games. The Flutter Casual Mobile Game Toolkit provides many templates and techniques for developing mobile games and useful tutorials for creating the next generation of everyday games with Flutter app development.

[thriveyourbusinessnow-blog]

How to build a chat application in Flutter with Firebase

Today, we will create a straightforward yet complex chat application in Flutter with Firebase at its backend. Our primary focus is on working the application and connecting it with Firebase services like Cloud Firestore, Firebase Storage, and Firebase Authentication.

What are we going to cover in the article?

We will understand the basic functionality of a chat application so that enthusiasts like you and me can learn from it. Of course, this demo app is not as complex as WhatsApp or Telegram, but after reading this article, you will understand how other famous chat applications work.

Creating a new Flutter application

Android Studio has been updated to Bumblebee, and it’s pretty colorful now on its main screen. Just click on the New Flutter Project button, and it will confirm the Flutter SDK path; click Next.

Then, enter your desired project name — make sure that it is in small letters. Choose your directory correctly and make sure you have selected all the desired platforms like Android, iOS, and the web.

With that done, you will have your Flutter starter project, famously known as the counter application, created.

Connecting to Firebase Services (the new and updated method)

If you plan to use Firebase as your backend, I recommend connecting your project to Firebase before programming your application any further.

Go to and create a new Firebase project. Enter your project name, disable Google Analytics for now, and click on the Create Project button.

According to the Flutter Fire documentation, you can now initialize Firebase directly from Dart. It’s straightforward, so cheers to the Flutter team.

Run this command from the root of your project in the terminal window to add the Firebase core plugin:

flutter pub add firebase_core

Next, you have to run the FlutterFire CLI command, which depends on the Firebase CLI command. If you are not familiar with the Firebase CLI command, please go through this document to understand and install it on your system.

Run this command to activate FlutterFire CLI:

dart pub global activate flutterfire_cli

Next, run this command and choose the Firebase project you just created:

flutterfire configure

After running this command and connecting to your Firebase project, you will see that the firebase_options.dart file has been created in your project structure, containing all the necessary information.

N.B., now you no longer need to manually add the google-services.json file to Android and the GoogleService-Info.plist file to the iOS runner directory.

In your main.dart file, you need to edit the main() function and ensure WidgetFlutterBinding is initialized and then initialize Firebase like this:

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

Once initialized, you are now ready to use Flutter Fire and all its services.

Since we will use Google Sign-In for our chat application, Firebase requires SHA-1 and SHA-256 certificates to be added to our Android app inside the Firebase project. Again, you can go through this document to read all about it.

In Android Studio, right click on /gradlew and open with the terminal. Then run this command:

./gradlew signingReport

With this, the signing report generates for your application. Copy the SHA-1 and SHA-256 certificate fingerprints and add them to the project settings inside your Firebase project, under Android App.

Inside your Firebase project, click on the Authentication tab, click on the Sign-in method, and under Sign-in providers, add Google.

Click on the Firestore Database and Create a database under Test mode.

This is optional, but recommended: to improve iOS and Mac build time, add this line to your iOS/Podfile under Runner:

pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '8.11.0'

N.B., here it is assumed you have CocoaPods installed on your system.

Click on Firebase Storage and Create new storage under Test Mode.

Go to Firebase project settings, click on Apple Apps, and download the GoogleServices-Info.plist file.

I know I mentioned earlier that you do not need to add the GoogleServices file to the iOS app. But since we will use the Google Sign-In package, iOS integration documentation on the pub.dev website says otherwise. You have to add CFBundleURLTypes attributes given below in the ios/Runner/Info.plist file:

!-- Put me in the [my_project]/ios/Runner/Info.plist file --> <!-- Google Sign-in Section --> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <!-- TODO Replace this value: --> <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID --> <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string> </array> </dict> </array> <!-- End of the Google Sign-in Section -->

Now you have successfully configured your Android and iOS application with Firebase. We are creating a Flutter chat application, but platform-specific integrations are required for the Google Sign-In to work correctly.

Let’s talk about web integration before uploading our completed application to Firebase Hosting.

Building a basic UI for the chat application

We have a total of five screens given below in order.

Splash page

Login page

Homepage

Profile page (settings screen)

Chat page

I’m not going into too many details about each screen because that is unimportant. So instead, I will give an overview for each screen.

Splash Page: It has two text widgets and an image at its center

Login Page: Two text widgets again, an image, and a Google Sign-In button

Home Page: Scaffold, AppBar with two action buttons for a profile page and logging out. It has a search bar for searching users. ListTile consists of the user’s name and Google profile image

Profile Page: Here, users can change their display name and add a few details of themselves. Also, upload an image of themselves

Chat Page: A very similar screen to most prominent chat applications. Message portion at the top of the screen and text field with image and send button at the bottom of the screen

Now, let us start programming the application. I will post only the vital parts of the application code, and the rest is available on the GitHub repository, for which I will leave links as we move along further in this article.

Add required dependencies in the pubspec.yaml file

firebase_core: ^1.12.0 firebase_auth: ^3.3.7 cloud_firestore: ^3.1.8 firebase_storage: ^10.2.7 google_sign_in: ^5.2.4 fluttertoast: ^8.0.8 image_picker: ^0.8.4+9 shared_preferences: ^2.0.13 intl: ^0.17.0 photo_view: ^0.13.0 provider: ^6.0.2 country_code_picker: ^2.0.2 url_launcher: ^6.0.20 equatable: ^2.0.3 google_sign_in_web: ^0.10.0+5

Please check for the latest versions on the pub.dev website.

Uncomment assets to add images to the assets of the application:

- assets/images/

Building a login page with Firebase Authentication

Step 1: The ChatUser model

Before we get into the authentication part, we need a user model class. I have named it as ChatUser, which has five string variables: id, photoURL, displayName, phoneNumber, and aboutMe.

Our two functions inside our ChatUser class toJson() consist of a Map and a factory method to read data from the snapshot that Firebase Firestore returns:

class ChatUser extends Equatable { final String id; final String photoUrl; final String displayName; final String phoneNumber; final String aboutMe; const ChatUser( {required this.id, required this.photoUrl, required this.displayName, required this.phoneNumber, required this.aboutMe});

Step 2: The AuthProvider class

Next, we will add an AuthProvider class to our project to handle Google sign-in and sign-out methods. This is also to check whether the user is logged in or not:

class AuthProvider extends ChangeNotifier { final GoogleSignIn googleSignIn; final FirebaseAuth firebaseAuth; final FirebaseFirestore firebaseFirestore; final SharedPreferences prefs; Status _status = Status.uninitialized; Status get status => _status; AuthProvider( {required this.googleSignIn, required this.firebaseAuth, required this.firebaseFirestore, required this.prefs}); String? getFirebaseUserId() { return prefs.getString(FirestoreConstants.id); } Future<bool> isLoggedIn() async { bool isLoggedIn = await googleSignIn.isSignedIn(); if (isLoggedIn && prefs.getString(FirestoreConstants.id)?.isNotEmpty == true) { return true; } else { return false; } } Future<bool> handleGoogleSignIn() async { _status = Status.authenticating; notifyListeners(); GoogleSignInAccount? googleUser = await googleSignIn.signIn(); if (googleUser != null) { GoogleSignInAuthentication? googleAuth = await googleUser.authentication; final AuthCredential credential = GoogleAuthProvider.credential( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); User? firebaseUser = (await firebaseAuth.signInWithCredential(credential)).user; if (firebaseUser != null) { final QuerySnapshot result = await firebaseFirestore .collection(FirestoreConstants.pathUserCollection) .where(FirestoreConstants.id, isEqualTo: firebaseUser.uid) .get(); final List<DocumentSnapshot> document = result.docs; if (document.isEmpty) { firebaseFirestore .collection(FirestoreConstants.pathUserCollection) .doc(firebaseUser.uid) .set({ FirestoreConstants.displayName: firebaseUser.displayName, FirestoreConstants.photoUrl: firebaseUser.photoURL, FirestoreConstants.id: firebaseUser.uid, "createdAt: ": DateTime.now().millisecondsSinceEpoch.toString(), FirestoreConstants.chattingWith: null });}

Step 3: Splash page

We will create the splash page and check whether the user is logged in using our method from the authProvider class.

If the user has already signed in with the Google Sign-In method, the user will be redirected to the home page. Otherwise, the user will be directed to the login page.

Step 4: Login page

Next, we will now create our login page.

Since we are using Provider state management in our application, we are going to create an instance of our authProvider like this:

final authProvider = Provider.of<AuthProvider>(context);

Next, we will check the status of our application if it is authenticated:

class _LoginPageState extends State<LoginPage> { @override Widget build(BuildContext context) { final authProvider = Provider.of<AuthProvider>(context); switch (authProvider.status) { case Status.authenticateError: Fluttertoast.showToast(msg: 'Sign in failed'); break; case Status.authenticateCanceled: Fluttertoast.showToast(msg: 'Sign in cancelled'); break; case Status.authenticated: Fluttertoast.showToast(msg: 'Sign in successful'); break; default: break; }

Step 5: Sign-in function

We will now add our Google Sign-In method to our onTap function for the Google Sign-In button:

GestureDetector( onTap: () async { bool isSuccess = await authProvider.handleGoogleSignIn(); if (isSuccess) { Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => const HomePage())); } }, child: Image.asset('assets/images/google_login.jpg'), ),

Creating a homepage with user contacts

Step 1: The HomeProvider class

This class contains two functions:

To update data on the Cloud Firestore database:

Future<void> updateFirestoreData( String collectionPath, String path, Map<String, dynamic> updateData) { return firebaseFirestore .collection(collectionPath) .doc(path) .update(updateData); }

To receive a snapshot of data from the Cloud Firestore database:

Stream<QuerySnapshot> getFirestoreData( String collectionPath, int limit, String? textSearch) { if (textSearch?.isNotEmpty == true) { return firebaseFirestore .collection(collectionPath) .limit(limit) .where(FirestoreConstants.displayName, isEqualTo: textSearch) .snapshots(); } else { return firebaseFirestore .collection(collectionPath) .limit(limit) .snapshots(); } }

Step 2: Homepage

The homepage is divided into three sections.

The AppBar — it consists of two buttons, the sign-out button and profile page button:

Scaffold( appBar: AppBar( centerTitle: true, title: const Text('Smart Talk'), actions: [ IconButton( onPressed: () => googleSignOut(), icon: const Icon(Icons.logout)), IconButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => const ProfilePage())); }, icon: const Icon(Icons.person)), ]),);

The search bar — for searching the logged-in users inside the application. If you have a long list of users, it comes in handy. We will use a StreamBuilder to build our search bar like this:

Widget buildSearchBar() { return Container( margin: const EdgeInsets.all(Sizes.dimen_10), height: Sizes.dimen_50, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox( width: Sizes.dimen_10, ), const Icon( Icons.person_search, color: AppColors.white, size: Sizes.dimen_24, ), const SizedBox( width: 5, ), Expanded( child: TextFormField( textInputAction: TextInputAction.search, controller: searchTextEditingController, onChanged: (value) { if (value.isNotEmpty) { buttonClearController.add(true); setState(() { _textSearch = value; }); } else { buttonClearController.add(false); setState(() { _textSearch = ""; }); } }, decoration: const InputDecoration.collapsed( hintText: 'Search here...', hintStyle: TextStyle(color: AppColors.white), ), ), ), StreamBuilder( stream: buttonClearController.stream, builder: (context, snapshot) { return snapshot.data == true ? GestureDetector( onTap: () { searchTextEditingController.clear(); buttonClearController.add(false); setState(() { _textSearch = ''; }); }, child: const Icon( Icons.clear_rounded, color: AppColors.greyColor, size: 20, ), ) : const SizedBox.shrink(); }) ], ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(Sizes.dimen_30), color: AppColors.spaceLight, ), ); }

Users — with StreamBuilder, we will show all logged-in users here. Using the ListTile widget inside the ListView separated builder method, we display the user’s profile image and the user’s name:

Widget buildItem(BuildContext context, DocumentSnapshot? documentSnapshot) { final firebaseAuth = FirebaseAuth.instance; if (documentSnapshot != null) { ChatUser userChat = ChatUser.fromDocument(documentSnapshot); if (userChat.id == currentUserId) { return const SizedBox.shrink(); } else { return TextButton( onPressed: () { if (KeyboardUtils.isKeyboardShowing()) { KeyboardUtils.closeKeyboard(context); } Navigator.push( context, MaterialPageRoute( builder: (context) => ChatPage( peerId: userChat.id, peerAvatar: userChat.photoUrl, peerNickname: userChat.displayName, userAvatar: firebaseAuth.currentUser!.photoURL!, ))); }, child: ListTile( leading: userChat.photoUrl.isNotEmpty ? ClipRRect( borderRadius: BorderRadius.circular(Sizes.dimen_30), child: Image.network( userChat.photoUrl, fit: BoxFit.cover, width: 50, height: 50, loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) { return child; } else { return SizedBox( width: 50, height: 50, child: CircularProgressIndicator( color: Colors.grey, value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null), ); } }, errorBuilder: (context, object, stackTrace) { return const Icon(Icons.account_circle, size: 50); }, ), ) : const Icon( Icons.account_circle, size: 50, ), title: Text( userChat.displayName, style: const TextStyle(color: Colors.black), ), ), ); } } else { return const SizedBox.shrink(); } }

Making a profile page that updates Firebase Firestore information

Here, users can change their display names, write something about themselves, and add their contact information.

There are three TextFields and a dropdown to select a country code before entering the mobile number. Next, users click on the profile picture and choose another to replace it, then there’s a button to update the information onto the Firebase Firestore database. Let’s get to it.

Step 1: ProfileProvider class

We will add another class to our project structure and call it ProfileProvider. There are two main functions inside this class.

To upload the image file to Firebase Storage:

UploadTask uploadImageFile(File image, String fileName) { Reference reference = firebaseStorage.ref().child(fileName); UploadTask uploadTask = reference.putFile(image); return uploadTask; }

To upload updated information regarding the user to the Firestore database:

Future<void> updateFirestoreData(String collectionPath, String path, Map<String, dynamic> dataUpdateNeeded) { return firebaseFirestore .collection(collectionPath) .doc(path) .update(dataUpdateNeeded); }

Step 2: Profile page

There are three main methods inside this ProfilePage stateful widget.

An image picker method to pick a picture from the device and set it as a profile picture:

Future getImage() async { ImagePicker imagePicker = ImagePicker(); // PickedFile is not supported // Now use XFile? XFile? pickedFile = await imagePicker .pickImage(source: ImageSource.gallery) .catchError((onError) { Fluttertoast.showToast(msg: onError.toString()) }); File? image; if (pickedFile != null) { image = File(pickedFile.path); } if (image != null) { setState(() { avatarImageFile = image; isLoading = true; }); uploadFile(); } }

Upload that picture to Firebase Storage and save its photo URL information to the Firestore database under User Information:

Future uploadFile() async { String fileName = id; UploadTask uploadTask = profileProvider.uploadImageFile(avatarImageFile!, fileName); try { TaskSnapshot snapshot = await uploadTask; photoUrl = await snapshot.ref.getDownloadURL(); ChatUser updateInfo = ChatUser(id: id, photoUrl: photoUrl, displayName: displayName, phoneNumber: phoneNumber, aboutMe: aboutMe); profileProvider.updateFirestoreData( FirestoreConstants.pathUserCollection, id, updateInfo.toJson()) .then((value) async { await profileProvider.setPrefs(FirestoreConstants.photoUrl, photoUrl); setState(() { isLoading = false; }); }); } on FirebaseException catch (e) { setState(() { isLoading = false; }); Fluttertoast.showToast(msg: e.toString()); } }

Upload data to the Firestore database and update the data under User Information:

void updateFirestoreData() { focusNodeNickname.unfocus(); setState(() { isLoading = true; if (dialCodeDigits != "+00" && _phoneController.text != "") { phoneNumber = dialCodeDigits + _phoneController.text.toString(); } }); ChatUser updateInfo = ChatUser(id: id, photoUrl: photoUrl, displayName: displayName, phoneNumber: phoneNumber, aboutMe: aboutMe); profileProvider.updateFirestoreData( FirestoreConstants.pathUserCollection, id, updateInfo.toJson()) .then((value) async { await profileProvider.setPrefs( FirestoreConstants.displayName, displayName); await profileProvider.setPrefs( FirestoreConstants.phoneNumber, phoneNumber); await profileProvider.setPrefs( FirestoreConstants.photoUrl, photoUrl,); await profileProvider.setPrefs( FirestoreConstants.aboutMe,aboutMe ); setState(() { isLoading = false; }); Fluttertoast.showToast(msg: 'UpdateSuccess'); }).catchError((onError) { Fluttertoast.showToast(msg: onError.toString()); }); }

Building the chat message page

Let’s talk about the chat page’s functionalities step by step to better understand how this section will work.

Step 1: ChatMessage Model Class

First, we will create a new model class for ChatMessages, consisting of four string variables: idFrom, idTo, timestamp, content, and an integer type. Then, again, similar to our ChatUser model, we will add two functions to Json consisting of a Map and a factory method that returns DocumentSnapshot from the Firestore database. That’s it for our model class:

class ChatMessages { String idFrom; String idTo; String timestamp; String content; int type; ChatMessages( {required this.idFrom, required this.idTo, required this.timestamp, required this.content, required this.type}); Map<String, dynamic> toJson() { return { FirestoreConstants.idFrom: idFrom, FirestoreConstants.idTo: idTo, FirestoreConstants.timestamp: timestamp, FirestoreConstants.content: content, FirestoreConstants.type: type, }; } factory ChatMessages.fromDocument(DocumentSnapshot documentSnapshot) { String idFrom = documentSnapshot.get(FirestoreConstants.idFrom); String idTo = documentSnapshot.get(FirestoreConstants.idTo); String timestamp = documentSnapshot.get(FirestoreConstants.timestamp); String content = documentSnapshot.get(FirestoreConstants.content); int type = documentSnapshot.get(FirestoreConstants.type); return ChatMessages( idFrom: idFrom, idTo: idTo, timestamp: timestamp, content: content, type: type); } }

Step 2: ChatProvider Class

There are four main methods inside our ChatProvider class for sending and receiving text messages and images.

To upload an image file to Firebase Storage:

UploadTask uploadImageFile(File image, String filename) { Reference reference = firebaseStorage.ref().child(filename); UploadTask uploadTask = reference.putFile(image); return uploadTask; }

To update the Firestore database information regarding user IDs who will be chatting with each other:

Future<void> updateFirestoreData( String collectionPath, String docPath, Map<String, dynamic> dataUpdate) { return firebaseFirestore .collection(collectionPath) .doc(docPath) .update(dataUpdate); }

To get a stream of chat messages from the Firestore database while users chat with each other:

Stream<QuerySnapshot> getChatMessage(String groupChatId, int limit) { return firebaseFirestore .collection(FirestoreConstants.pathMessageCollection) .doc(groupChatId) .collection(groupChatId) .orderBy(FirestoreConstants.timestamp, descending: true) .limit(limit) .snapshots(); }

To send messages to other users with the help of the Firestore database and save those messages inside it:

void sendChatMessage(String content, int type, String groupChatId, String currentUserId, String peerId) { DocumentReference documentReference = firebaseFirestore .collection(FirestoreConstants.pathMessageCollection) .doc(groupChatId) .collection(groupChatId) .doc(DateTime.now().millisecondsSinceEpoch.toString()); ChatMessages chatMessages = ChatMessages( idFrom: currentUserId, idTo: peerId, timestamp: DateTime.now().millisecondsSinceEpoch.toString(), content: content, type: type); FirebaseFirestore.instance.runTransaction((transaction) async { transaction.set(documentReference, chatMessages.toJson()); }); }

Step 3: Chat page

First, we need to create two methods to check if:

A chat message was sent:

// checking if sent message bool isMessageSent(int index) { if ((index > 0 && listMessages[index - 1].get(FirestoreConstants.idFrom) != currentUserId) || index == 0) { return true; } else { return false; } }

A chat message was received:

// checking if received message bool isMessageReceived(int index) { if ((index > 0 && listMessages[index - 1].get(FirestoreConstants.idFrom) == currentUserId) || index == 0) { return true; } else { return false; } }

Second, we will create a method to send chat messages and execute our sendChatMessage function from our ChatProvider class:

void onSendMessage(String content, int type) { if (content.trim().isNotEmpty) { textEditingController.clear(); chatProvider.sendChatMessage( content, type, groupChatId, currentUserId, widget.peerId); scrollController.animateTo(0, duration: const Duration(milliseconds: 300), curve: Curves.easeOut); } else { Fluttertoast.showToast( msg: 'Nothing to send', backgroundColor: Colors.grey); } }

Third, we need two more methods to pick an image from the device folder and send that image to the user.

Pick image from device:

Future getImage() async { ImagePicker imagePicker = ImagePicker(); XFile? pickedFile; pickedFile = await imagePicker.pickImage(source: ImageSource.gallery); if (pickedFile != null) { imageFile = File(pickedFile.path); if (imageFile != null) { setState(() { isLoading = true; }); uploadImageFile(); } } }

Send the image to the user with whom we are chatting, save the image to Firebase Storage, and save its URL information to the Firestore database:

void uploadImageFile() async { String fileName = DateTime.now().millisecondsSinceEpoch.toString(); UploadTask uploadTask = chatProvider.uploadImageFile(imageFile!, fileName); try { TaskSnapshot snapshot = await uploadTask; imageUrl = await snapshot.ref.getDownloadURL(); setState(() { isLoading = false; onSendMessage(imageUrl, MessageType.image); }); } on FirebaseException catch (e) { setState(() { isLoading = false; }); Fluttertoast.showToast(msg: e.message ?? e.toString()); } }

Fourth, we need to create an input field where the user will type the text message and click on the Send button to send the message. Also, an image picker button so that when the user clicks on it, the file picker from the device will open up to pick an image and send it to the user:

Widget buildMessageInput() { return SizedBox( width: double.infinity, height: 50, child: Row( children: [ Container( margin: const EdgeInsets.only(right: Sizes.dimen_4), decoration: BoxDecoration( color: AppColors.burgundy, borderRadius: BorderRadius.circular(Sizes.dimen_30), ), child: IconButton( onPressed: getImage, icon: const Icon( Icons.camera_alt, size: Sizes.dimen_28, ), color: AppColors.white, ), ), Flexible( child: TextField( focusNode: focusNode, textInputAction: TextInputAction.send, keyboardType: TextInputType.text, textCapitalization: TextCapitalization.sentences, controller: textEditingController, decoration: kTextInputDecoration.copyWith(hintText: 'write here...'), onSubmitted: (value) { onSendMessage(textEditingController.text, MessageType.text); }, )), Container( margin: const EdgeInsets.only(left: Sizes.dimen_4), decoration: BoxDecoration( color: AppColors.burgundy, borderRadius: BorderRadius.circular(Sizes.dimen_30), ), child: IconButton( onPressed: () { onSendMessage(textEditingController.text, MessageType.text); }, icon: const Icon(Icons.send_rounded), color: AppColors.white, ), ), ], ), ); }

Fifth, we will create chat bubbles for the sent and received text messages with profile photos.

Widget buildItem(int index, DocumentSnapshot? documentSnapshot) { if (documentSnapshot != null) { ChatMessages chatMessages = ChatMessages.fromDocument(documentSnapshot); if (chatMessages.idFrom == currentUserId) { // right side (my message) return Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Row( mainAxisAlignment: MainAxisAlignment.end, children: [ chatMessages.type == MessageType.text ? messageBubble( chatContent: chatMessages.content, color: AppColors.spaceLight, textColor: AppColors.white, margin: const EdgeInsets.only(right: Sizes.dimen_10), ) : chatMessages.type == MessageType.image ? Container( margin: const EdgeInsets.only( right: Sizes.dimen_10, top: Sizes.dimen_10), child: chatImage( imageSrc: chatMessages.content, onTap: () {}), ) : const SizedBox.shrink(), isMessageSent(index) ? Container( clipBehavior: Clip.hardEdge, decoration: BoxDecoration( borderRadius: BorderRadius.circular(Sizes.dimen_20), ), child: Image.network( widget.userAvatar, width: Sizes.dimen_40, height: Sizes.dimen_40, fit: BoxFit.cover, loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) return child; return Center( child: CircularProgressIndicator( color: AppColors.burgundy, value: loadingProgress.expectedTotalBytes != null && loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null, ), ); }, errorBuilder: (context, object, stackTrace) { return const Icon( Icons.account_circle, size: 35, color: AppColors.greyColor, ); }, ), ) : Container( width: 35, ), ], ), isMessageSent(index) ? Container( margin: const EdgeInsets.only( right: Sizes.dimen_50, top: Sizes.dimen_6, bottom: Sizes.dimen_8), child: Text( DateFormat('dd MMM yyyy, hh:mm a').format( DateTime.fromMillisecondsSinceEpoch( int.parse(chatMessages.timestamp), ), ), style: const TextStyle( color: AppColors.lightGrey, fontSize: Sizes.dimen_12, fontStyle: FontStyle.italic), ), ) : const SizedBox.shrink(), ], ); } else { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.start, children: [ isMessageReceived(index) // left side (received message) ? Container( clipBehavior: Clip.hardEdge, decoration: BoxDecoration( borderRadius: BorderRadius.circular(Sizes.dimen_20), ), child: Image.network( widget.peerAvatar, width: Sizes.dimen_40, height: Sizes.dimen_40, fit: BoxFit.cover, loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) return child; return Center( child: CircularProgressIndicator( color: AppColors.burgundy, value: loadingProgress.expectedTotalBytes != null && loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null, ), ); }, errorBuilder: (context, object, stackTrace) { return const Icon( Icons.account_circle, size: 35, color: AppColors.greyColor, ); }, ), ) : Container( width: 35, ), chatMessages.type == MessageType.text ? messageBubble( color: AppColors.burgundy, textColor: AppColors.white, chatContent: chatMessages.content, margin: const EdgeInsets.only(left: Sizes.dimen_10), ) : chatMessages.type == MessageType.image ? Container( margin: const EdgeInsets.only( left: Sizes.dimen_10, top: Sizes.dimen_10), child: chatImage( imageSrc: chatMessages.content, onTap: () {}), ) : const SizedBox.shrink(), ], ), isMessageReceived(index) ? Container( margin: const EdgeInsets.only( left: Sizes.dimen_50, top: Sizes.dimen_6, bottom: Sizes.dimen_8), child: Text( DateFormat('dd MMM yyyy, hh:mm a').format( DateTime.fromMillisecondsSinceEpoch( int.parse(chatMessages.timestamp), ), ), style: const TextStyle( color: AppColors.lightGrey, fontSize: Sizes.dimen_12, fontStyle: FontStyle.italic), ), ) : const SizedBox.shrink(), ], ); } } else { return const SizedBox.shrink(); } }

Sixth, we will create a view where all the text messages and images will be shown separately for sender and receiver.

Widget buildListMessage() { return Flexible( child: groupChatId.isNotEmpty ? StreamBuilder<QuerySnapshot>( stream: chatProvider.getChatMessage(groupChatId, _limit), builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { if (snapshot.hasData) { listMessages = snapshot.data!.docs; if (listMessages.isNotEmpty) { return ListView.builder( padding: const EdgeInsets.all(10), itemCount: snapshot.data?.docs.length, reverse: true, controller: scrollController, itemBuilder: (context, index) => buildItem(index, snapshot.data?.docs[index])); } else { return const Center( child: Text('No messages...'), ); } } else { return const Center( child: CircularProgressIndicator( color: AppColors.burgundy, ), ); } }) : const Center( child: CircularProgressIndicator( color: AppColors.burgundy, ), ), ); } }

We have finished creating our chat application in Flutter with Firebase at its backend. There are still a lot of other Dart files and code involved in programming this application that I haven’t posted here in this article, but I have linked each page with GitHub links to view the complete code.

Conclusion

That is it! We are all done. Hope you enjoyed reading this as much as I did writing. I learned a lot when I created this application for the very first time. With FlutterFire and Dart CLI, things have become much easier to configure Flutter applications with Firebase services.

To further your learning with this application, you could configure it as a PWA. Here is a link to the PWA for this demo project, and a link to the whole project on GitHub for you to experiment.

The post How to build a chat application in Flutter with Firebase appeared first on LogRocket Blog.

This content was originally published here.

[kodytechnolab]

Nothing can go wrong when you combine the power of Firebase and Flutter. Flutterfire is high on-demand because of its exclusive offerings. However, there are certain facts that you might have missed out on. Check out this blog on Flutterfire facts that are left unexplored.

[t-baba]

15 Best Flutter Mobile App Templates for Communication

Do you want to build and deploy fast, beautiful social media or communication apps for both Android and iOS? 

Then you should consider creating a Flutter app. Using Flutter, you can write apps for both Android and iOS using a single codebase. And a Flutter app template makes it easy to get started.

What Is Flutter? 

Flutter allows developers to build  beautiful, natively compiled apps from a single codebase for both Android and iOS.

Flutter is now one of the most popular frameworks for developing cross-platform mobile apps. In addition to being a first-class platform for Material Design, developers consider it to be a great alternative to popular cross-platform frameworks like React Native, Ionic, and so on.

Flutter widgets abstract all critical platform differences such as scrolling, navigation, icons, and fonts to provide full native performance on both iOS and Android.

On CodeCanyon, you will find all the tools you need to start building your app with Flutter. With a Flutter app templates, all the coding has been done beforehand, you just need to concentrate on what makes your app unique. 

Best Flutter App Templates for Communication

Communication apps have become crucial in today's world. On CodeCanyon you will find templates that will help you build apps that meet every communication needs. 

Here are some of the best-selling Flutter mobile app templates to download on CodeCanyon for 2020.

15 Best Flutter Mobile App Templates for Communication

Let us have a look at some of the best Flutter mobile app templates for communication available on CodeCanyon.

I have divided them into the following categories: social media apps, video conferencing apps, dating apps, chat apps, and news apps. 

Flutter Social Media App Templates 

1. Trending: TikStar—TikTok Clone App UI in Flutter UI Template 

TikStar is a TikTok clone and short video streaming mobile app UI template. TikStar was developed using Flutter. That means that the UI is compatible for both Android and iOS. 

This social media Flutter mobile app has clean, well-formatted code that is easy to understand.

Features you will find in this amazing app include:

login, signup, and forgot password screens

login with phone number screen 

OTP verification screen 

carousel slider

animation

2. QVid—TikTok Clone App Flutter Template 

Qvid is a social media video app for creating and sharing quick short personal, musical, comedy, and talent videos. This awesome looking social media Flutter mobile app comes with over 30 screens to choose from. It is easy to customize and reskin. 

As a TikTok clone Flutter app template, it can also be used to build clones that closely resemble other popular apps.

3. Flutter Storyteller—Social Media Platform 

Flutter Storyteller is a social media platform Flutter template which can help you build your own social app. It has a beautiful UI that is easy to customize thanks to the clean and reliable code of this Flutter social app.  

Built using Flutter and with Laravel on the back-end, it comes with full, easy-to-use, step-by-step documentation.

4. HeyP—Flutter Social App 

HeyP is an elegant Flutter social app that to helps uses connect with family and friends. 

It comes with more than 16 screens and 40 widgets to help you customize your app. 

The back-end is based on Node.js, and uses Firebase for push notifications. The same code is used for both iOS and Android.

Flutter Video Conferencing App Templates

5. MeetAir—Video Conferencing App for Live Classes 

MeetAir is complete video meeting system that you can use to start your online meeting platform. You can use it for: video meetings, live classes, webinar, online training, web conferences, and more. It has a powerful admin panel to manage meetings, history, notification, analytics, and app configuration. 

Using this Flutter app template you can build your own web, Android, and iOS video conference apps. No coding is required to use this video conferencing Flutter app template. 

Other impressive features include:

lock-protected rooms to control access to your conferences with a password

schedule and add the meeting to your calendar.

chat and message with your team during meetings

high quality audio and video delivered with the clarity and richness of Opus and VP8

6. AeroMeet—Flutter Video Conference

AeroMeet is an online meeting platform to manage video conferences, live classes, meetings, webinars, and online training. It uses Agora SDK which is very popular for video calling and is a fast growing platform. 

Some features of this highly configurable platform include:

secure and encrypted call.

host and join meeting from mobile.

mandatory login enable/disable.

unauthorized meeting ID protection.

meetings history

7. Connect—Video Conferencing App

Connect is a secure video conference platform where anyone can create an account and get connected to their loved ones without worrying of data theft.

This Flutter video conference app supports up to 70 people in a single conference call. You can create meetings with extra secure passcodes provided by Google. In addition, you can receive feedback from users on your desired email account. 

Flutter Chat App Templates 

8. Flutter Firebase Chat

Flutter Firebase Chat is a real time chatting app with video calling support based on Flutter, Firebase, and Agora.io. This Flutter chat mobile app template integrates a chat functionality into any existing Flutter app. Also you can easily customize and refine it for yourself, since it uses the BLoC pattern.

Main features of this app include:

one-to-one chat and video calls via Agora.io

group chat

image sharing

email authentication

9. Flutter Chat App With Node and MongoDB 

This Flutter chat app is a versatile mobile chat system developed in the Dart language using Node.js for the back-end.

Admin accounts can delete posts and comments. They can also add and delete public chat rooms. Users can search for other users using email, read messages, and send text or images. 

This app template comes with full Flutter source code, full Node.js back-end code, and extensive documentation including screenshots. 

10. FlutterFire Social: Chat and Messenger

FlutterFire Social is a fully functional Flutter social messenger app with a Firebase back-end, You can post, like, comment and chat with people and more.

Other features include:

Firebase email authentication

realtime chat with online users

a group chat system including the ability to create and edit groups

admins can post, edit and delete

block and unblock users

Flutter Dating App Templates 

11. Hookup4U—Complete Flutter Dating App

Hookup4U is a complete Flutter dating app template. Admins can change usernames and passwords, and have a detailed user viewer to search users, block users, and more. In addition, admins can create packages that include free and paid subscriptions.

Other features include: 

authentication with Facebook and phone number (OTP based)

settings for profile visibility

like or unlike other profile pics based on settings 

show matches 

one-to-one text chat 

one-on-one audio and video chat (Agora based) 

12. Hookup4U—Tinderlike Flutter Dating UI kit

Hookup4u is a hybrid mobile dating app template in Flutter. It has all the UI you will find in a regular dating app. You can use this Flutter app template to create a fully functional dating app. 

Some screens you will find in this UI kit include:

welcome

splash screen

login using Facebook and phone 

verify OTP

Flutter News App Templates

13. Deco News Flutter App for WordPress 

News apps are very popular but not everybody has the time and resources to build their own news app from scratch. 

The Deco News Flutter Mobile App for WordPress converts your WordPress website into a native app that delivers news content on both Android and iOS. 

14. FluxNews—Flutter Mobile App for WordPress

FluxNews is an app converts your Wordpress website into a mobile true native app with customized contents. No coding skill is required. It comes with a very clean design that is easy to customize. You can build your own app by using over 50 resuable widgets.  

FluxNews maximizes your customer’s experience and usability through UX flow in both Android and iOS. 

Additional features include:

offline images caching to speed up the loading performance 

instant synchronization for smooth data update without downtime

support social login, SMS login by Facebook

15. News Hour—Flutter News App with Admin Panel 

News Hour is complete news app with admin panel that is developed in Flutter. 

It comes beautiful interactive user interface. There are 40 screen layouts to choose from. It has animation on every screen, making it one of the most user-friendly Flutter news app templates. 

Users can login using Google and Facebook, search news categories, bookmark content, and also leave comments. 

Build Your Flutter Mobile App Now! 

A complete app developed from scratch will have a lot of components, screens, and functionality representing many hundreds or thousands of hours of developer time. That's a lot of time and effort on your part! The Flutter mobile apps templates available on CodeCanyon will shortcut this process and greatly save on development cost.

Google Flutter From Scratch Series

If you want to get started coding apps with Flutter, check out the Google Flutter From Scratch series on Envato Tuts+: 

Android

Google Flutter From Scratch: Using Firebase Services

Ashraff Hathibelagal

Android SDK

Google Flutter From Scratch: Building Apps With Widgets

Ashraff Hathibelagal

Android SDK

Google Flutter From Scratch: Animating Widgets

Ashraff Hathibelagal

Android SDK

Google Flutter From Scratch: Grids, Lists, and Data Sources

Ashraff Hathibelagal

Android

Coding an Android App With Flutter and Dart

Ashraff Hathibelagal

And if you want even more Flutter app templates, check out my other post here on Envato Tuts+.

Flutter

23 Best Flutter Mobile App Templates on CodeCanyon

Franc Lucas

by Franc Lucas via Envato Tuts+ Code https://ift.tt/3cN311I

[flutteragency]

How To Add Firebase To A Flutter App With Flutterfire CLI?

Firebase is a cloud-based platform that allows developers to focus on creating user-friendly applications for Flutterfire CLI. It functions without having to manage servers or write APIs. It is a Backend-as-a-Service that was initially created as a YC11 startup.

It has since grown into a comprehensive app-development service on the Google Cloud Platform for which companies hire Flutter mobile app developer. Firebase simplifies the development process by providing a generic framework. It can easily be tailored to suit the needs of any application.

Firebase is a comprehensive suite of tools from Google that enables you to create, monitor, and improve your knowledge of mobile application development. It provides various services, including real-time database, authentication, crash tracking, and analytics. In addition, it functions with push notifications and more. It helps to concentrate on developing the core features of your app.

Features Of Flutterfire CLI

The FlutterFire CLI is an invaluable resource that provides commands to facilitate the installation of FlutterFire. It functions across all supported platforms. This official collection of plugins enables you to incorporate Firebase services into your Flutter application. It already contains a range of essential plugins, with even more planned to be released soon. Below are some of the features:

1. Rapid Fast Build, Without Infrastructure Management

Firebase provides messaging, analytics, crash and databases, and messaging features. It enables reporting that move quickly and focus on your customers.

2. Trusted Through Top Applications, And Google Sponsorship

Firebase is built on a reliable and robust Google platform. It allows for expansion and accommodates the needs of even the most expansive applications without manual intervention.

3. Single Platform, With Better Collective Functioning Products

Firebase products are highly effective when used independently. They reach even more incredible performance when combined and used to share data and insights.

Adding Firebase to a Flutter App:

FlutterFire is a collection of plugins that allow a Flutter application development to communicate with Firebase. The FlutterFire CLI is a useful utility that provides helpful commands. It is to simplify setting up FlutterFire on all compatible platforms. Below are the steps to add the Firebase to the flutter app:

Stage 1: Installing Firebase CLI

Firstly, we will need to install Node.js. Go to the website and download the latest Long-Term Support (LTS) version. Carefully follow the installation process and do not make any changes. Install the nodejs folder in the directory (C:\Program Files\nodejs). After completion of the installation, open the Environment Variables and add two directories to the Path.

C:\Users\{Your_Username}\AppData\Roaming\npm

C:\Program Files\nodejs

Here, Install the Firebase CLI through npm by running the below-mentioned code:

> npm install -g firebase-tools

You can use the directory:

C:\Users\{Your_Username}\AppData\Roaming\npm

Verify that the Firebase. cmd file is present in the installation directory. If not, try re-running the command prompt as an administrator. Log into Firebase using your Google account and run the command:

> firebase login

dart pub global activate flutterfire_cli

Stage 2: Creating And Configuring The Firebase Project

Secondly, the initial step is to set up a project on the Firebase console and get the Android/iOS native apps and Flutter app. It is ready to utilize the Firebase services. To build a Firebase console project, here is the process:

Move towards the Firebase console

Click to Add the project

Enter the project name and Continue

Continue Enabling Google Analytics and click on Continue

Choose Google Analytics and confirm on Create project

Stage 3: Configuration Of An Android

Once the project is set up, the project dashboard should be visible. For Android projects, below are the projects:

Connect with the Android icon.

Join the SHA-1 key and package name and connect the Registration application in the Register segment.

Download the google-services.json file and mark it on the Android application listing. Here is the pattern: android/app/google-services.json

Add Firebase dependency, mentioned while adding the Firebase SDK segment.

Click on Continue to console.

Stage 4: Configure The iOS

To create a native iOS app using Flutter, configure it to work with the iOS platform. It functions by following the instructions provided in the Flutter documentation:

Click the Add application button on the project dashboard,

Connect to the iOS icon

Register to bundle ID and click Register application in the Register segment

Explore Xcode, and move the GoogleService-Info.plist file by dragging and dropping it into the Runner subfolder

Follow the guidelines as defined in the “Add initialization code” and “Add Firebase SDK” segments

Click on Continue to console

Stage 5: Set Up The Flutter Project

To use any Firebase service, it is necessary to install the firebase_core plugin. This plugin enables communication between the app and the Firebase database system. To do this, add the firebase_core dependency to the file and run with a specific command. Below is the code:

Dependencies:

flutter:    sdk: flutter  cupertino_icons: ^1.0.2  firebase_core: ^1.0.1 flutter pub get

Stage 6: Verification

Ensuring the security of user data is paramount for any mobile app. Authentication is essential to guarantee that only authorized users can access and use the app. It can upload any personal or confidential information.

Firebase Authentication supplies backend services and straightforward-to-use software development kits (SDKs). It helps to verify the users of your app. It supports authentication through passwords, telephone numbers, and third-party platforms. It includes Google, Facebook, Twitter, GitHub, and Apple. We will employ the firebase_auth plugin to implement authentication in our app.

Stage 7: Facilitating Validation In The Firebase Console for Flutterfire CLI

Before incorporating the firebase_auth plugin in the application, it enables the validation in the Firebase console:

Connect to the Authentication option in the left-hand set of choices.

Choose the Sign-in approach tab.

Connect Google, and switch on the Enable button. Then choose the help email from the listing. You can select any login technique.

Click Next

Stage 8: Add Dependency

Combine the google_sign_in dependencies and firebase_auth within the code. Therefore, When you take the help of a Flutter developer, they use the code:

dependencies:  Flutter:    sdk: flutter  cupertino_icons: ^1.0.2  firebase_core: ^1.0.1  firebase_auth: ^1.0.1 #new  google_sign_in: ^5.0.0 #new

Conclusion

This tutorial integrated the FlutterFire plugin Authentication into a Flutter app. Additionally, when Flutter experts use the above code examples, it will quickly demonstrate how the FlutterFire plugins operate in the real world. You can use the debugging tools to identify any issues with the FlutterFire plugins. In addition, it can also use the data gathered to improve the user experience.

Suppose you want to integrate the Firebase into your Flutter app development. In that case, you can contact the leading Flutter app development company that will give you support and maintenance for your projects. Hence, it makes your app runs seamlessly with their efforts and skills.

Frequently Asked Questions (FAQs)

1. How to access the Firebase data in the Flutter app?

To use Firebase with Flutter, you must set dependencies in the pubspec file. After that, you must import firestore, i.e., a database provided by Firebase for data handling. After that, import Firebase dependencies into the dart file. import. ‘package:cloud_firestore/coud_firestore.

2. What is Firebase Flutterfire CLI?

The Fiebase CLI is a utility used to administer Firebase projects and perform real-time database management tasks from a command line of the terminal or command-prompt window. Hence, the Firebase cloud functions deploy and manage the Firebase CLI method.

3. What should I use, Firebase SDK or REST API?

Selecting between both of them is dependent on your application requirements. If you want your app to have a real-time database, you should go with a firebase. But, if you need more efficient queries during development, you should pick REST APIs. Hence, you can combine the two by attaching the Firebase database to the REST API.

Source:  https://flutteragency.com/add-firebase-flutter-app-flutterfire-cli/

[szlolla]

HTTYD TAG!

I was tagged by @joy-mcl and @novalliez-mcl <3

I won’t tag anyone because as far as i know, everyone who likes httyd already was tagged xD

The apprentice

What’s your character’s name? What is the meaning? Her name is Laumė, originated from the Baltic mythology. In some stories, Laumés are woodland faes, and guardian spirits of children.

How old is she? She is 13 years old (HTTYD2)

Is your OC a boy or girl? She’s a Girl.

Is your character part of a rider team? No, she prefers to have very small dragons as pets and co-workers at her mom’s store.

What is your character’s dragon? Laume has a red and yellow Flutterfire. It’s so small that she can’t decide if its a male or female, so she just call it “Honey”, because of their favorite food: bees.

Why does your character have this dragon? She found their egg in a walk at the forest, hidden between two petals of wild flowers. Laume likes dragons, unlike her mom, so she keeps Honey hidden on a pocket of her tool belt. She’s working to be a great jewelcrafter, and it is a art that requires delicacy and patience, but with the size of her dragon and the perfect temperature of their fire, she can make incredible jewels.

What is your character’s appearance? She’s small and skinny, light toned skin with freckles on her back. The black hair is curly and long, almost under her hip, but always in a ponytail or unique braid. Her eyes are round and big, shining in a leaf-green color, with a single dot on left one. The nose is snub, upturned and blushes often when she is embarrassed.

Her clothes are simple, but different from “normal” style. Laume don’t like skulls or “violent” stuff (she thinks it’s ridiculous), she prefers fur and comfortable clothes. Usually, the girl uses big boots, brown pants and a red shirt under a black fur coat.

[piratedashmod]

Would you ship Fluttershy with Big Macintosh?

But that would kill my Flutterfire ship with her and a roaring fire.

I think I would.  Out of all of the mares, she seems to be the best fit for him.

[quanrel]

Flutter - Google SignIn from Scratch

https://www.quanrel.com/flutter-google-signin-from-scratch/ Flutter - Google SignIn from Scratch - https://www.quanrel.com/flutter-google-signin-from-scratch/ Build a Flutter 🐦 app that uses Firebase �� Google SignIn and Firestore for user authentication. Learn how to use both StatefulWidget and StreamBuilder to create a reactive UI. – Flutter – FlutterFire Check Price & Availability

[innoventixsolutions]

It is time to collect relevant data regarding the source and usage of FlutterFire and it is the set of […]