DEV Community: Salami

Building a Flutter Mobile App with Supabase Integration

Salami — Sun, 27 Aug 2023 23:41:54 +0000

Introduction to Supabase

Supabase is an open-source alternative to Firebase that provides a suite of backend services, including databases, authentication, and real-time capabilities. In this article, we'll explore how to create a Flutter mobile app with null safety and integrate it with Supabase for seamless data storage and authentication.

Setting Up Your Flutter Null Safety Project

Create a new Flutter project with null safety enabled:

   flutter create my_supabase_app

Navigate to the project directory:

   cd my_supabase_app

Open the pubspec.yaml file and add the necessary dependencies:

   dependencies:
     flutter:
       sdk: flutter
     supabase_flutter: ^0.4.1 # Supabase SDK for Flutter

Run flutter pub get to install the dependencies.

Initializing Supabase

In your main.dart file, initialize Supabase with your Supabase URL and API key:

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SupabaseProvider(
      url: 'YOUR_SUPABASE_URL',
      anonKey: 'YOUR_SUPABASE_ANON_KEY',
      child: MaterialApp(
        title: 'Supabase App',
        home: HomeScreen(),
      ),
    );
  }
}

Authenticating with Supabase

Implement user authentication using Supabase in your HomeScreen:

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final supabase = Supabase.instance.client;
    final session = supabase.auth.currentSession;

    return Scaffold(
      appBar: AppBar(
        title: Text('Supabase App'),
      ),
      body: Center(
        child: session?.accessToken != null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('You are logged in!'),
                  ElevatedButton(
                    onPressed: () async {
                      await supabase.auth.signOut();
                    },
                    child: Text('Sign Out'),
                  ),
                ],
              )
            : ElevatedButton(
                onPressed: () async {
                  final response = await supabase.auth.signIn(
                    ProviderCredentials.anonymous(),
                  );
                  if (response.error == null) {
                    print('Logged in anonymously');
                  } else {
                    print('Error: ${response.error?.message}');
                  }
                },
                child: Text('Log In Anonymously'),
              ),
      ),
    );
  }
}

Storing Data with Supabase

You can easily interact with Supabase's database using the supabase_flutter package. Here's an example of how to insert data into a table:

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

class DataScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final supabase = Supabase.instance.client;

    Future<void> insertData() async {
      final response = await supabase.from('data').upsert([
        {
          'id': 1,
          'name': 'John Doe',
          'email': 'john@example.com',
        },
      ]).execute();
      if (response.error == null) {
        print('Data inserted successfully');
      } else {
        print('Error: ${response.error?.message}');
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Data Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await insertData();
          },
          child: Text('Insert Data'),
        ),
      ),
    );
  }
}

Conclusion: Empower Your Flutter App with Supabase

Integrating Supabase with your Flutter null safety mobile app empowers you to build robust and feature-rich applications. By utilizing Supabase's authentication and database capabilities, you can create user-friendly and efficient apps that store data securely and provide a seamless user experience.

This article merely scratches the surface of what you can achieve with Supabase and Flutter. Dive deeper into Supabase's features, including real-time capabilities, triggers, and more, to further enhance your app's functionality.

Feel free to reach out to me on Twitter @gideonsalamii for more insights into building powerful Flutter apps with Supabase.

Happy coding!

Exploring Firebase Integration with Flutter using FlutterFire

Salami — Sun, 27 Aug 2023 23:28:24 +0000

Introduction to FlutterFire

FlutterFire is a collection of officially supported Flutter plugins that enable developers to seamlessly integrate Firebase services into their Flutter applications. Firebase offers a comprehensive suite of backend services that empower developers to build scalable, secure, and feature-rich applications. In this article, we will explore how to leverage FlutterFire to connect your Flutter app to Firebase services and make the most of its offerings.

Getting Started with FlutterFire

Before diving into specific Firebase services, let's set up FlutterFire in your Flutter project. FlutterFire plugins are available on pub.dev, making it easy to integrate them into your app.

Open your pubspec.yaml file and add the desired FlutterFire plugins to your dependencies:

   dependencies:
     flutter:
       sdk: flutter
     firebase_core: ^1.10.0 # Required for Firebase initialization
     firebase_auth: ^3.3.3   # Firebase Authentication
     cloud_firestore: ^2.5.4 # Cloud Firestore

Run flutter pub get to install the dependencies.
Import the necessary packages in your Dart files:

   import 'package:flutter/material.dart';
   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_auth/firebase_auth.dart';
   import 'package:cloud_firestore/cloud_firestore.dart';

Initialize Firebase in your main.dart:

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     runApp(MyApp());
   }

Exploring Firebase Authentication

Firebase Authentication provides a seamless way to add user authentication to your app. Let's integrate Firebase Authentication using FlutterFire:

class AuthExample extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Sign in with email and password
  Future<void> signInWithEmailAndPassword() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: 'example@example.com',
        password: 'password',
      );
      print('User signed in: ${userCredential.user?.uid}');
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => signInWithEmailAndPassword(),
      child: Text('Sign In'),
    );
  }
}

Utilizing Cloud Firestore

Cloud Firestore is a flexible NoSQL cloud database that enables real-time synchronization and seamless data storage. Let's see how you can use Cloud Firestore in your Flutter app:

class FirestoreExample extends StatelessWidget {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  // Read data from a Firestore collection
  Future<void> readData() async {
    try {
      QuerySnapshot querySnapshot = await _firestore.collection('users').get();
      for (QueryDocumentSnapshot documentSnapshot in querySnapshot.docs) {
        print('User: ${documentSnapshot.data()}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => readData(),
      child: Text('Read Data'),
    );
  }
}

Conclusion: Empowering Flutter Apps with Firebase

FlutterFire simplifies the integration of powerful Firebase services into your Flutter apps. Whether you're adding user authentication, storing and retrieving data, or leveraging other Firebase capabilities, FlutterFire provides a cohesive experience that boosts your app's functionality and performance.

In this article, we've barely scratched the surface of what FlutterFire and Firebase have to offer. Explore other plugins such as Firebase Cloud Messaging for push notifications, Firebase Storage for handling files, and Firebase Functions for serverless computing.

Connect with me on Twitter @gideonsalamii for more insights into Flutter and Firebase integration. Happy coding!

Connecting Flutter Mobile and Web to Firebase

Salami — Sun, 27 Aug 2023 23:06:56 +0000

Title: Connecting Flutter Mobile and Web to Firebase
Introduction: Firebase Integration with Flutter
Firebase, Google's comprehensive platform, offers a variety of services that empower developers to build high-quality apps quickly. In this article, we'll explore how to seamlessly connect both Flutter mobile and web applications to Firebase services. We'll cover Firebase setup, authentication, and database integration, providing code snippets along the way to facilitate your integration process.
Setting Up Firebase:

Begin by creating a Firebase project through the Firebase Console.
For mobile, add your Android and iOS apps to the project. For web, configure the web app.
Download the configuration files for each platform and add them to your respective Flutter projects. Authentication Integration: Firebase offers various authentication methods, including email/password, Google Sign-In, and more. Let's implement Google Sign-In authentication in both mobile and web apps. Mobile App Authentication (Google Sign-In):

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
Future<User?> signInWithGoogle() async {
 try {
 final GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
 if (googleSignInAccount != null) {
 final GoogleSignInAuthentication googleSignInAuth = await googleSignInAccount.authentication;
 final AuthCredential credential = GoogleAuthProvider.credential(
 accessToken: googleSignInAuth.accessToken,
 idToken: googleSignInAuth.idToken,
 );
 final UserCredential authResult = await _auth.signInWithCredential(credential);
 final User? user = authResult.user;
 return user;
 }
 } catch (error) {
 print("Google Sign-In Error: $error");
 return null;
 }
}

Web App Authentication (Google Sign-In):

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:google_sign_in/google_sign_in.dart';
void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp();
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Firebase Web Demo',
 home: MyHomePage(),
 );
 }
}
class MyHomePage extends StatelessWidget {
 final FirebaseAuth _auth = FirebaseAuth.instance;
 final GoogleSignIn googleSignIn = GoogleSignIn(scopes: ['email']);
Future<User?> signInWithGoogle() async {
 try {
 final GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
 if (googleSignInAccount != null) {
 final GoogleSignInAuthentication googleSignInAuth = await googleSignInAccount.authentication;
 final AuthCredential credential = GoogleAuthProvider.credential(
 accessToken: googleSignInAuth.accessToken,
 idToken: googleSignInAuth.idToken,
 );
 final UserCredential authResult = await _auth.signInWithCredential(credential);
 final User? user = authResult.user;
 return user;
 }
 } catch (error) {
 print("Google Sign-In Error: $error");
 return null;
 }
 }
@override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: Text('Firebase Web Demo')),
 body: Center(
 child: ElevatedButton(
 onPressed: () => signInWithGoogle(),
 child: Text('Sign In with Google'),
 ),
 ),
 );
 }
}

Realtime Database Integration:
Firebase Realtime Database provides a cloud-hosted NoSQL database that synchronizes data between clients in real-time.
Mobile and Web App Realtime Database Integration:

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
class DatabaseExample extends StatelessWidget {
 final DatabaseReference _databaseReference = FirebaseDatabase.instance.reference();
@override
 Widget build(BuildContext context) {
 return StreamBuilder<Event>(
 stream: _databaseReference.child('messages').onValue,
 builder: (context, snapshot) {
 if (snapshot.hasData) {
 final DataSnapshot data = snapshot.data!.snapshot;
 final Map<dynamic, dynamic>? messageMap = data.value;
 final List<String> messages = [];
if (messageMap != null) {
 messageMap.forEach((key, value) {
 messages.add(value);
 });
 }
return ListView.builder(
 itemCount: messages.length,
 itemBuilder: (context, index) {
 return ListTile(title: Text(messages[index]));
 },
 );
 } else {
 return CircularProgressIndicator();
 }
 },
 );
 }
}

Conclusion: Seamless Firebase Integration
Connecting Flutter mobile and web apps to Firebase services enhances app functionality and user experience. By following these steps and utilizing the provided code snippets, you'll streamline authentication and integrate a realtime database into both platforms. Firebase's versatility and ease of use empower developers to create dynamic and feature-rich applications.

Feel free to explore other Firebase services, such as Cloud Firestore, Cloud Functions, and Cloud Storage, to further enrich your Flutter apps across platforms.
Connect with me on Twitter @gideonsalamii for more Flutter and Firebase insights.
Thank you for reading!

Tips for some best practices in Flutter

Salami — Sun, 27 Aug 2023 22:54:09 +0000

Introduction: What's Flutter? Flutter is a versatile framework used for creating native mobile, web, and desktop applications.

Background Story: When I began my journey with Flutter, I initially developed apps without adhering to any particular structure. This approach led to code that was hard to maintain and apps that lacked efficiency. Recognizing the need for change, I delved into Flutter's best practices. I learned about code organization, error handling, and performance optimization. Additionally, I grasped various state management patterns and their appropriate use cases. Implementing these best practices significantly enhanced my Flutter development skills, resulting in cleaner, more efficient code and more responsive apps.

Important Best Practices:

Use const Constructors: Utilize const constructors whenever possible. These create constant widgets, enhancing performance.

const Text('Hello, World!');

Avoid Global Variables: Refrain from using global variables to maintain code clarity and understandability.

Separate Theme and Routes: Define themes and routes in separate files for easy modification.

Internationalization (i18n): Avoid hardcoded strings by internationalizing your app with a localization library.

Externalize Styles and Decorations: Instead of hardcoded styles, use a styling library to manage styles and decorations from external sources.

Prefer Relative Imports: Enhance organization by using relative imports to access files from different app directories.

Stateless Widgets for Simplicity: When possible, use stateless widgets for simpler code that doesn't change its appearance or behavior over time.

`class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Static Content');
  }
}`

Use Flutter Lint: Run Flutter lint to identify errors and potential issues before publishing your code.

Cascade Operator (..): The cascade operator (..) lets you chain methods on a single object for concise and readable code.

final myList = List<int>.empty(growable: true)
  ..add(1)
  ..add(2)
  ..add(3);

Spread Operator (...): Spread operator (...) allows spreading an iterable into another iterable for concise list/map initialization.


final originalList = [1, 2, 3];
final extendedList = [...originalList, 4, 5];

Additional Best Practices:

Use Named Constructors for Clarity: In your custom widgets, use named constructors to provide clearer intentions.

Optimize Images for Performance: Optimize image assets for different screen densities to ensure faster loading times.

Implement Null Safety: Embrace Dart's null safety features to avoid null-related runtime errors.

Thoroughly Comment Your Code: Add explanatory comments to make your code more understandable for collaborators and future self.

Separate Logic from UI: Keep your business logic separate from UI components for improved code readability and maintainability.

Use Extensions for Utility Functions: Extend classes with utility functions to encapsulate reusable logic.

Unit Testing and Widgets Testing: Implement unit tests and widget tests to ensure your code behaves as expected.

Keep Packages Updated: Regularly update your packages to benefit from bug fixes and new features.

Conclusion: Elevating Your Flutter Development Adhering to Flutter's best practices results in more idiomatic, maintainable code. This makes your codebase more readable, understandable, and modifiable, saving you time and frustration in the long term.

Feel free to connect with me on Twitter @gideonsalamii.

Thank you for your time and interest!

How to get started with Flutter

Salami — Thu, 05 Jan 2023 15:22:05 +0000

One of the newest hot trends from Google is Flutter. Like me, you may have fallen in love with flutter as a result of periodic advancements from conference speakers, recent technological developments, rumors from friends or even coworkers, and you may be unsure of where to begin. Here are some guides on how to get started using Flutter.

1. Get a fundamental understanding of what flutter actually is as a first step.
Flutter is a Google-created open source mobile application development framework based on the Dart programming language. It enables developers to craft native interfaces for both iOS and Android.

Flutter uses a reactive, declarative style of programming that makes creating beautiful, fast, and reliable mobile apps easier than ever before. The framework also includes a variety of widgets that allow developers to customize the look and feel of their apps.

Why Flutter?

Because it offers cross-platform development, businesses can avoid having to hire separate -iOS and Android developers to create the same app.
Saves time by not having to create the same interface again and lets you use mobile applications that have a native look and feel.
Enables the creation of 2D effects, games, and animation
Hot reload functionality is provided by high velocity development.

2. Development Platforms.

You might be curious to learn about the development platforms to employ once you have a basic understanding of what flutter is. Xcode and Android Studio are certainly familiar to you if you are an iOS or Android user. Similar to how Android requires Android SDK, Flutter also needs Flutter SDK. The appropriate IDEs are:

Android Studio

VScode

Xcode

You could check this https://flutter.dev/docs/get-started/ editor on steps on how to set up your favourable editor.

3. Discover this lovely language — Dart.

Next, familiarize yourself with Dart before getting into flutter. Object-oriented programming concepts like variables, classes, methods, functions, operators, control flow statements, exceptions like throw, catch, and finally, and data types like Strings, Maps, and Lists among others will be covered in detail by Dart.

You could check []https://www.dartlang.org/) to get started on Dart Language.

You can also use this online editor https://dartpad.dartlang.org/ to practice on the Dart language.

4. Create your first Flutter app.

You are now comfortable enough to launch your first Flutter application after going through the fundamental OOP programming principles including looping, functions, variables, classes, and conditional expressions. Everything in Flutter, including displays, messages, visuals, containers, and more, is a widget. Making widgets is a part of the Flutter UI design process.

You can check out https://flutter.dev/docs/get-started/codelab to start up your first hello world flutter app. You can either use your phone or an emulator to run your app using the command flutter run.

5. Google Codelabs

This entails detailed instructions for solving coding problems. It is intriguing since it is quite practical; you can follow the codelabs and even modify them afterwards to suit your preferences.

You can check it out here: https://flutter.dev/docs/codelabs

6. Udacity Flutter Course

Moreover, Google provides a free Flutter Udacity course. This might be used to gain a sneak peek of how flutter apps operate. This could be done practically to improve your comprehension.

7. Flutter youtube videos.

To view flutter tutorials, you could visit Flutter Channel. These aid in expanding your knowledge base quickly.

https://www.youtube.com/@flutterdev

8. Attempt Code Challenges

You should be able to understand Dart syntax after completing the aforementioned stages. The capacity to break an issue down into manageable parts and find solutions is tested by taking on code challenges. To put your knowledge of the Dart language to the test, join up for CodeWars/Kata challenges at https://codewars.com. It increases your desire to complete challenges and get more points, which piques your interest in programming.

9. Flutter Community

You can connect with others who have used Flutter firsthand by joining the flutter community conversation. You can get informed answers to your queries concerning problems you are unable to solve by asking them.
https://github.com/fluttercommunity

10. Connect with SalamiTech (Flutter Developer)

https://www.linkedin.com/in/gideon-kofi-salami-44a206209/

Collaborating with team mates!

Salami — Sat, 04 Jun 2022 00:46:05 +0000

I start a project, I have a vision for it. I work with teams because I enjoy maximizing the synergy that comes from individuals from different backgrounds. When assembling my teams, I give people chances, I give everyone the benefit of the doubt.