CodeWithMayank

Mayank Rane

Firebase Authentication Based on Email/password in Flutter

In this tutorial, We learn the process of implementing Firebase Authentication of Email & Password in a Flutter app using the GetX package. GetX is a lightweight and powerful state management library that simplifies code organization and enhances app performance. By the end of this guide, you’ll have a fully functional authentication system integrated with Firebase in your Flutter app. Step 1: Set Up Firebase Project : Before we start, make sure you have a Firebase project set up. If you haven’t done this already, head over to this Integrate Firebase Project in Flutter . Step 2: Add Dependencies : In your Flutter project’s pubspec.yaml file, add the necessary dependencies for Firebase Authentication and GetX: Run flutter pub get to install the dependencies. Step 3: Initialize Firebase In your Flutter app’s main.dart file, initialize Firebase in the main() function: Step 4: Create Authentication Service : Next, create an authentication Controller that will handle all authentication-related tasks. This Controller will use GetX’s reactive state management to notify listeners when the authentication state changes. Step 5: Implement Authentication Screens : Now, create your authentication screens using StatelessWidget . Here’s an example of a signup screen ( I used my custom made TextEditingField() you can use flutter TextFormField() ) : Login Screen : Registration Screen : Conclusion Congratulations! You successfully implemented Firebase Email & Password Authentication with GetX in your Flutter app.

Firebase Authentication Based on Email/password in Flutter Read Post »

firebase setup

Integrate Firebase Project in Flutter

In this tutorial, we will delve into the seamless integration of a Firebase project into a Flutter app. Firebase serves as backend platform offering a wide array of services essential for modern app development. By integrating Firebase into your Flutter app, you unlock many   functionalities, including real-time database management, user authentication, cloud storage, and more. Follow along as we guide you through the step-by-step process : Step 1: Create a Firebase Project: Navigate to the Firebase Console. Now enter Project name and accept all and Continue. Now continue this (You can disable Google analytics ). Now select your loction (this will show if you select google Analytics ) . Congratulations! Your project created successfully  , Just click on continue . Step 2: Add Your App to Firebase: Now click on Flutter icon you seeing. Now Click on Next . install Firebase CLI . now copy the first command and paste it on your project terminal . out put is like this : Now run Firebase Login : after login run the second command  : now use arrow keys & space to select and Selecte the platform you want to integrate with Firebase . I am Selecting Android only,  after selecting hit enter. Step 3: Install Firebase SDK Dependencies: Open your Flutter project’s pubspec.yaml file. and Add the Firebase SDK dependencies you want to use. For example, if you’re using Firebase Authentication and Cloud Firestore, add the following dependencies: Run flutter pub get in your terminal to install the dependencies. Step 4: Initialize Firebase in Your Flutter App: Import the Firebase Core package and initialize Firebase in your app’s main entry point (usually main.dart): Ensure that Firebase is initialized before your app starts by using await Firebase.initializeApp(). Congratulations! Your Firebase project has been successfully integrated with your app. Firebase Email/Password Authentication In Flutter

Integrate Firebase Project in Flutter Read Post »

Flutter Permissions in SDK 34 | Android 14

In the world of Flutter app development, navigating permissions can often feel like navigating a labyrinth. With the recent update to Flutter SDK 34, ensuring seamless access to media resources has become even more critical. Today, we embark on a journey to demystify the process of managing media permissions in your Flutter app, empowering you to wield this newfound knowledge with confidence. Media permissions are essential for any app that requires access to user data, such as images, videos, or audio files. In the past, developers could rely on broad permissions to access media resources. However, with the increasing focus on user privacy, modern operating systems have implemented more granular permission systems. Revamping the requestPermissions Method: Let’s start by revamping our trusty requestPermissions method. This cornerstone function, powered by the permission_handler package, lays the foundation for our permission-seeking endeavors. Here’s how we can enhance it to accommodate SDK 34: The requestPermissions method now checks for the manageExternalStorage permission, which is required for SDK 34. If the permission is granted, the app can proceed with accessing media resources. If the permission is denied, the app should provide a clear explanation of why it needs access and request the user to grant it. If the user has permanently denied the permission, the app should direct the user to the app settings page, where they can manually grant the permission. Crafting Your AndroidManifest.xml for SDK 34: Ah, the AndroidManifest.xml – the blueprint of our Android endeavors. For SDK 34 (Android 14), we must imbue it with the sacred incantation of android.permission.READ_MEDIA_VISUAL_USER_SELECTED. Let’s infuse our manifest with the magic it craves: This permission allows the app to access visual media selected by the user. By specifying this permission in the manifest, we ensure that our app complies with the latest Android guidelines and respects user privacy. Tending to Permissions of Yore: But what of the bygone SDKs, you ask? Fear not, for we shall not forsake them! For SDK 33 (Android 13) and its predecessors, we invoke the venerable permissions of READ_MEDIA_IMAGES and READ_MEDIA_VIDEO. Let us honor tradition and enshrine them in our AndroidManifest.xml:   These permissions allow the app to access images and videos, respectively. By specifying these permissions in the manifest, we ensure that our app can access media resources on older Android versions while respecting user privacy. Embark on the Odyssey of Testing: With our preparations complete, it is time to embark on the odyssey of testing. Navigate the labyrinth of scenarios, where permissions are both granted and denied. Be vigilant, for in the face of adversity lies the crucible of app resilience. Test your app on various Android versions and ensure that it handles permission requests gracefully. Direct users to the app settings page when necessary, and provide clear explanations

Flutter Permissions in SDK 34 | Android 14 Read Post »

Codewithmayank

Deploying Flutter Web With Node.js Server | Step-by-Step | 100% Working

Introduction: In this tutorial, we will learn how to deploy a Flutter web application using Node.js. Flutter provides a powerful framework for building cross-platform applications, and with the help of Node.js, we can host our Flutter web app on a server. Let’s get started with the deployment process: Copying Flutter Web Files To get started, we need to generate the web files for our Flutter application. Here’s how you can do it: Open your terminal or command prompt. Navigate to your Flutter project directory. Build the Flutter web application by running the following command This command compiles your Flutter code and generates the necessary web files in the build/web directory. Pasting Node.js Code Next, we’ll create a Node.js project and configure it to serve our Flutter web files. Follow these steps: Create a new directory for your Node.js project. Open your favorite text editor and create a new file named app.js. Copy and paste the following code into app.js: Save the file. In the same project directory, create a package.json file by running the following command: Open package.json and replace its content with the following: Running the Flutter Web Application We are now ready to run our Flutter web application using the Node.js server. Follow these steps: Open your terminal or command prompt. Navigate to the root directory of your Node.js project. Install the dependencies by running the following command: Copy the Flutter web files into the Node.js project’s public-flutter folder After successfully copying the Flutter web files into the Node.js project’s public-flutter folder, you are good to go. Now, run the following command in the terminal or command prompt window of your Node.js project to start the server: Congratulations! Your Flutter web application is now running on the Node.js server. Open your web browser and visit http://localhost:3000 to see your application in action. Conclusion In this blog post, we learned how to build a Flutter web application and host it using a Node.js server with Express. By combining the power of Flutter for the frontend and Node.js for the backend, we can create robust and performant web applications. We covered the steps of copying the Flutter web files, pasting the necessary code into a Node.js project, and running the application. Now you have the knowledge to create your own Flutter web applications and leverage the capabilities of Node.js for hosting and serving your application. Happy coding!  

Deploying Flutter Web With Node.js Server | Step-by-Step | 100% Working Read Post »

Scroll to Top