DEV Community: Odinachi David

Firebase Data Connect explained: Flutter perspective.

Odinachi David — Fri, 21 Mar 2025 13:01:48 +0000

NoSQL databases have been a great choice for many developers and companies due to their ease of use and quick setup. It has enabled the rapid development of products without requiring developers to have a deep understanding of SQL, which was not the case before the rise of NoSQL databases.

Over time, companies often consider migrating to a relational database in order to have structured data for scale, and with Data Connect, you can have everything your app needs both to start and scale in one platform.

About Data Connect

Data Connect is a relational database product from Firebase designed to offer top-notch performance, security, and an excellent developer experience. With Data Connect, all you need to do is define your schemas (table structures), queries, and mutations—Firebase takes care of the rest. It automatically creates tables, enforces security, and provides an SDK in your preferred language, allowing you to perform CRUD operations seamlessly without writing complex SQL commands.

Data Connect was announced at Google I/O 2024 and has been continuously evolving since then. In this guide, I’ll walk you through the basics of using Data Connect with Flutter.

Requirements:

Project setup

Here are the steps you need to follow to set up Data Connect locally for a Note app.

run firebase init on your terminal scroll down to data connect and press your spacebar then hit enter. Alternatively, run npx -y firebase-tools@latest init dataconnect and in whichever case you can follow the prompt. The default options are recommended.
A dataconnect folder will be generated for you that looks like this

* `connector.yaml` contains the configuration for the generated SDK.

* `mutations.gql` will contain all your mutation operations e.g. create, delete and update.

* `queries.gql` will contain all your queries a.k.a get method

* `schema.gql` will contain your table schemas or structure.

* `dataconnect.yaml` will contain the configurations for connecting to the database

Schema

For this sample app, we’d be dealing with just 2 tables, one for notes and another for users.

schema.gql:

type Users @table(name: "users", singular: "user", key: "uid") {
  id: UUID! @col(name: "id") @default(expr: "uuidV4()")
  name: String! @col(name: "name")
  uid: String! @unique @col(name: "uid")
  email: String! @col(name: "email")
  createdAt: Timestamp! @col(name: "created_at") @default(expr: "request.time")
}

type Notes @table(name: "notes", singular: "note", key: "id") {
  id: UUID! @col(name: "id") @default(expr: "uuidV4()")
  title: String! @col(name: "title")
  content: String! @col(name: "content")
  user: Users! @ref 
  createdAt: Timestamp! @col(name: "created_at") @default(expr: "request.time")
  updatedAt: Timestamp! @col(name: "updated_at") @default(expr: "request.time")
}

type keyword and the @table annotation is used to create a table.
name on the @table annotation is used to declare the name of the table.
singular on the @table annotation is used to specify what will be used to query one row from our table.
plural on the @table annotation is used to specify what will be used to filter from our table.
The key of each field inside the map represents a value.
the first declaration of the value is the data type and adding ! to it makes it required when adding a new row. e.g String!
name on the @col annotation is used to declare what the column of the table should be.
@default annotation is used to provide a default value, and a value with a default doesn’t have to be provided when creating a new row.
“uuidV4()“ is used to generate a unique id.
“request.time” is used to get the timestamp of the request

Queries

Here are our queries.

queries.gql:

query GetUsers @auth(level: PUBLIC){
  users {
    id
    name
    email
    uid
  }
}

query GetUser($uid: String!) @auth(level: PUBLIC) {
  user(key: {uid: $uid}) {
    id
    name
    email
    uid
  }
}

query GetNotes @auth(level: PUBLIC){
  notes {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
}

query GeUserNotes($id: UUID!)@auth(level: PUBLIC) {
  notes(where: { user: { id: { eq: $id } } }) {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
}


query GetNote ($id: UUID!)@auth(level: PUBLIC) {
  note (id: $id) {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
}

Every query starts with query and then the name of the variable along with the datatype
@auth annotation is used to set who should have access to a particular operation and the options are NO_ACCESS: Only the admin can perform the operation.

PUBLIC: This query can be performed without authentication.

USER_ANON: All users can perform the operation including those who logged in anonymously.

USER : All authenticated users except those who logged in anonymously.

USER_EMAIL_VERIFIED: only users with verified emails

you can get more information about database security here
We did a filter for GetUserNotes using where condition, you can find more information here
Also on the where condition we used a User object and this is because in our schemas, we used User reference for the user field, so for it to work we need to provide a valid user object with the foreign key which in our case is the id. Alternatively, we could just pass the user’s id as a string and that will still work but in that case, we will need another query to fetch the user’s information on each note.

Mutations

Here are our mutations.

mutations.gql:

mutation CreateUser($uid: String!, $email:String!, $name: String! )@auth(level: PUBLIC){
    user_insert(data: {uid: $uid, email: $email, name: $name})
}

mutation CreateNote($title: String!, $content: String!, $userId:String!)@auth(level: PUBLIC){
    note_insert(data: {title: $title, content: $content, user: {uid:  $userId}})
}

mutation DeleteNote($id: UUID!)@auth(level: PUBLIC){
    note_delete(id: $id)
}

mutation UpdateNote($id: UUID!, $title: String!, $content: String!)@auth(level: PUBLIC){
    note_update(id: $id,  data: {title: $title, content: $content})
}

To mutate your data you have to accept the required or optional parameters then call the singular item name then an underscore with the operator eg. user_insert and note_insert e.t.c

Connector

This is the configuration of our outputted SDK.

connector.yaml:

connectorId: note
generate:
  dartSdk:
    outputDir: ../../lib/dataconnect-generated/dart/note_connector
    package: note_connector

outputDir is where we want the generated SDK to be located, you can set it to your preferred location on the project.

You don’t need to change anything on your dataconnect.yaml

for more on schemas, queries and mutations Firebase documentation

Generating the SDK

To generate our SDK we need to ensure that the correct firebase.json is selected and if it is we need to click on Add SDK to App, this will prompt us to select the location of the generated SDK and then we can choose where we want it to be, note that this location will be updated on the connector.yaml.

After the SDK is generated we can click on Start emulators to start testing out our connection on both the app and Firebase emulator.

Testing

Before we test we need to make sure that our Firebase emulator is running and then we can have a test folder inside our dataconnect folder which will have mutation_test.gql and queries_test.gql

mutation_test.gql:

mutation CreateUser {
    user_insert(data: {uid: "uniqe id", email: "mail@mail.com", name: "fumilayo opeyemi"})
}

mutation CreateNote{
    note_insert(data: {title: "second title", content: "second content", user: {uid:  "1F6ot3W3QAaeIrOmB564piyUJfQ2"} })
}

mutation DeleteNote {
    note_delete(id: "e94f39561d2d42bf957a9212686a80d6")
}

mutation UpdateNote{
    note_update(id:  "5980bd5d33c54792844d0ee365f6e06c", data: {title: "New title", content: "New content"})
}

queries_test.gql:

query GetUsers {
  users {
    id
    name
    email
    uid
  }
}


query GetUser {
  user(key: {uid:"fSK3JA9kOXPP8r7jKoZQRRQektB2"}) {
    id
    name
    email
    uid
  }
}


query GetNote  {
  note (id: "e09150f653aa4f7abfb81f0c9cd9ed87") {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
}

query GetNotes {
  notes {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
} 

 query GeUserNotes{
  notes(where: { user: { id: { eq: "cbe1b7a742584a3892e9519f9a238ff7" } } }) {
    id
    title
    content
    createdAt
    updatedAt
    user {
      id
      name
      email
      uid
    }
  }
}

Note that the IDs I used are actual values from my test.

For each query, you should see two options of either running it locally or in production, we’d choose locally for this test and see what we get.

For each operation, you can choose your authentication level to test your db security as well.

Flutter Integration

A readme is generated alongside the SDK detailing how the SDK can be used and you’ll find this inside your generated folder.

Firstly, connect the app to the emulator database by calling NoteConnector.instance.dataConnect.useDataConnectEmulator(host, port); and the values for these can be gotten from the emulator when it is running, like this.

Interacting with our database

Here’s what my service class for Data Connect looks like

class DataConnectService {
  final _noteConnector = NoteConnector.instance;

  Future<({Note? note, String? error})> createNote(
      {required String title,
      required String content,
      required String userId}) async {
    try {
      final call = await _noteConnector
          .createNote(title: title, content: content, userId: userId)
          .execute();
      return (
        note: Note(
          id: call.data.note_insert.id,
          title: title,
          content: content,
        ),
        error: null
      );
    } catch (e) {
      if (e is DataConnectError) {
        return (note: null, error: e.message);
      }
      return (note: null, error: e.toString());
    }
  }

  Future<void> deleleteNote(String noteId) async {
   await _noteConnector.deleteNote(
      id: noteId
    ).execute();
  }
 Future< void> updateNote(Note note) async{
    await _noteConnector.updateNote(id: note.id??"", title: note.title??"", content: note.content??"").execute();
  }
  Future<({List<Note>? notes, String? error})> fetchNotes(String id) async {
    try {
      final call = await _noteConnector.geUserNotes(id: id).execute();
      final notes = call.data.notes;
      return (
        notes: List<Note>.from(notes.map((e) => Note.fromMap(e.toJson()))),
        error: null
      );
    } catch (e) {
      if (e is DataConnectError) {
        return (notes: null, error: e.message);
      }
      return (notes: null, error: e.toString());
    }
  }


  Future<({GetUserUser? user, String? error})> fetchUser(
      ) async {
    try {
      final call = await _noteConnector
          .getUser(uid: FirebaseAuth.instance.currentUser?.uid??"")
          .execute();
      return (user: call.data.user, error: null);
    } catch (e) {
      if (e is DataConnectError) {
        return (user: null, error: e.message);
      }
      return (user: null, error: e.toString());
    }
  }
}

The complete code can be found here

Disclaimer:

What I did in this tutorial is completely experimental and not suitable for a production environment. this is because you need to make sure your database is as secure as possible and also Data Connect is still in an experimental phase.

Data Connect is new, so you might have difficulty finding help online.

If you ever get stuck, I strongly recommend going through their documentation here.

I am open to your questions and Happy coding 🎉

Localization in Flutter with ChatGPT

Odinachi David — Tue, 24 Sep 2024 14:43:28 +0000

What is an App if everybody can’t get to use it or even more because of language barriers?

Here’s how you can bridge that gap in your Flutter app.

Before we start we need to ensure all our strings are in a single class and accessed using getters.

1. Install Packages

we need to first install flutter_translate and flutter_localization packages

flutter_translate: ^4.0.4 
flutter_localization: ^0.2.1

2. Initializing Localization

This is where we set the languages we want to support and we do this by initializing our delegate and providing LocalizedApp on the topmost widget.

Future<void> main() async {
  var delegate = await LocalizationDelegate.create(
      fallbackLocale: 'en', supportedLocales: ['en', 'es', 'fr', 'de']);

  runApp(LocalizedApp(delegate, const MyApp()));
}

What we did here was initialize our app with the delegate and the delegate supports Spanish, French and German, also note that the locale code has to be correct so you can check here and pick the first characters before the underscore(two or three).

3. Add Delegate to MaterialApp

We need to set the supported locale for the app.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var localizationDelegate = LocalizedApp.of(context).delegate;
    return MaterialApp(
      title: AppString.flutterDemo,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        localizationDelegate
      ],
      supportedLocales: localizationDelegate.supportedLocales,
      locale: localizationDelegate.currentLocale,
      home: const MyHomePage(),
    );
  }
}

4. Set up iOS

We need to provide iOS with our supported locale.

   <key>CFBundleLocalizations</key>
        <array>
            <string>en</string>
            <string>es</string>
            <string>fr</string>
            <string>de</string>
        </array>

5. Setup Assets

Firstly we need to create an i18n folder in the assets folder, so this folder will contain all our json translations that were set in our supported locale and add it to our pubspec.

assets:
  - assets/i18n/

Then we need to ask chatGPT to generate the json translations for each of the words in our AppString class, here’s a sample prompt

generate the translation for this class using this example

class AppString { static String get keyName => translate(key) }

and the json should be

{ key: translated_text }

generate for english, spanish, french and german

this is the class

class AppString { static String get selectLanguage => 'Select Language';

static String get flutterDemo => 'Flutter Demo';

static String get interestingStories => 'Interesting Stories';

static String get story1 => "Once upon a time, in a faraway land, a young prince was cursed to live as a beast until he learned to love.";

static String get story2 => "A group of explorers discovered an ancient city hidden beneath the ice of Antarctica.";

static String get story3 => "A boy found a mysterious key that opened a door to another dimension.";

static String get story4 => "A scientist accidentally created a potion that made him invisible, but the effects were irreversible.";

static String get story5 => "During a space mission, an astronaut encountered a strange, glowing object that gave him superpowers.";

static String get story6 => "A small village in Japan has a forest where it is said people can communicate with spirits.";

static String get story7 => "In a world where time stops for everyone except for one person, that person becomes the guardian of time.";

static String get story8 => "A magical library exists where the books write themselves, containing stories of people’s dreams.";

static String get story9 => "A pirate ship sailing through the Caribbean found a map leading to the legendary lost city of gold.";

static String get story10 => "A woman wakes up every day with no memory of her past, but she leaves herself clues hidden around the house.";

}

now copy and past the respective json in into the file on asset

Change your locale Changing your locale will automatically change the language automatically

  Widget _languageOption(String language) {
    return RadioListTile<String>(
      title: Text(language),
      value: language,
      groupValue: langNotifier.value,
      onChanged: (String? value) {
        langNotifier.value = value!;
        changeLocale(context, getLangString(value)); // Chnage the locale
        Navigator.of(context).pop(); // Close the modal after selection
      },
    );
  }

here’s the complete code

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:language_app/app/app_string.dart';

Future<void> main() async {
  var delegate = await LocalizationDelegate.create(
      fallbackLocale: 'en', supportedLocales: ['en', 'es', 'fr', 'de']);

  runApp(LocalizedApp(delegate, const MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var localizationDelegate = LocalizedApp.of(context).delegate;
    return MaterialApp(
      title: AppString.flutterDemo,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        localizationDelegate
      ],
      supportedLocales: localizationDelegate.supportedLocales,
      locale: localizationDelegate.currentLocale,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<String> langNotifier = ValueNotifier('en');

  @override
  void initState() {
    super.initState();
  }

  void _showLanguageModal() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(AppString.selectLanguage),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              _languageOption('English'),
              _languageOption('Español'),
              _languageOption('Français'),
              _languageOption('Deutsch'),
            ],
          ),
        );
      },
    );
  }

  Widget _languageOption(String language) {
    return RadioListTile<String>(
      title: Text(language),
      value: language,
      groupValue: langNotifier.value,
      onChanged: (String? value) {
        langNotifier.value = value!;
        changeLocale(context, getLangString(value));
        Navigator.of(context).pop(); // Close the modal after selection
      },
    );
  }

  String getLangString(String value) {
    switch (value) {
      case "English":
        return 'en';
      case 'Español':
        return 'es';

      case 'Français':
        return 'fr';

      case 'Deutsch':
        return 'de';
      default:
        return 'en';
    }
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: langNotifier,
      builder: (_, value, child) {
        List<String> allStories = [
          AppString.story1,
          AppString.story2,
          AppString.story3,
          AppString.story4,
          AppString.story5,
          AppString.story6,
          AppString.story7,
          AppString.story8,
          AppString.story9,
          AppString.story10,
        ];
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(AppString.interestingStories),
            actions: [
              IconButton(
                icon: const Icon(Icons.language),
                onPressed: _showLanguageModal,
              ),
            ],
          ),
          body: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  '${AppString.selectLanguage}: ${langNotifier.value}',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: allStories.length,
                  itemBuilder: (context, index) {
                    String story = allStories[index];
                    return ListTile(
                      title: Text(story),
                    );
                  },
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _showLanguageModal,
            tooltip: AppString.selectLanguage,
            child: const Icon(Icons.language),
          ),
        );
      },
    );
  }
}

Here’s the repo: https://github.com/Odinachi/flutter-localization

Here’s the video explaining it better: https://www.youtube.com/watch?v=xerUWn_s-xs

Happy coding!!

Dart CookBook: Keywords and their usage.

Odinachi David — Fri, 12 Apr 2024 18:40:21 +0000

abstract: Used to declare abstract classes. Abstract classes cannot be instantiated directly.

//Declaration
abstract class SubClass {}

//Usage
class MainClass extends SubClass{}

as: Used for typecasting to a type.

dynamic dynamicInt = 0;

//Usage 
int realInt = (dynamicInt as int);

assert: Used for validation purposes to check the truthfulness of a boolean expression. If the expression is false, an AssertionError is thrown.
```
int x = 10;

// Asserts that the value of x is greater than 0.
assert(x > 0);
```
async: Used to define asynchronous functions. An asynchronous function returns a Future or Stream object and can use the await keyword inside it.

await: Used inside asynchronous functions to pause execution until a Future completes.

  //function of future
  Future<void> delayFunc() async {

    //this future will be awaited
    await Future.delayed(Duration(seconds: 1));

    return null;
  }

break: Used to exit the innermost loop or switch statement.

  List<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  // Iterating through the list of numbers
  for (int number in numbers) {
    print('Current number: $number');

    // If the number is greater than 5, exit the loop
    if (number > 5) {
      print('Number is greater than 5. Exiting loop.');
      break; // Exiting the loop
    }

    // This line will be executed for numbers less than or equal to 5
    print('Number is less than or equal to 5.');
  }

case: Used in switch statements to specify different cases for comparison.

 String fruit = 'apple';

  switch (fruit) {
    case 'apple':
      break;
    case 'banana':
      break;
    default:
      print('Selected fruit is not in the list.');
  }

catch: Used to catch exceptions in try-catch blocks.

try {
//perform your actions here
} catch (error){
//do anything with the error here
}

class: Used to declare a class.
```
class ClassName {}
```
const: Used to define compile-time constant values.
```
const int value = 0;
```

continue: Used to skip the rest of the loop body and continue to the next iteration of the loop.

List<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  // Iterating through the list of numbers
  for (int number in numbers) {
    // If the number is even, skip it and continue with the next iteration
    if (number % 2 == 0) {
      continue; // Skip to the next iteration
    }

    // This line will be executed only for odd numbers
    print('Processing odd number: $number');
  }

covariant: Used to declare that a subclass can override a method with a parameter of a different type.
default: Used in switch statements to specify the default case.

Example can be seen in item 7 (case).

deferred: this is used in combination with the import statement to lazily load a library when it's first accessed. This can be useful for optimizing performance by deferring the loading of large libraries until they are needed.

import 'dart:async';
import 'dart:math' deferred as math;

Future<void> loadMathLibrary() async {
  await math.loadLibrary();
  print('Math library loaded.');

  double squareRoot = math.sqrt(25);
  print('Square root of 25: $squareRoot');
}

void main() {
  print('Before loading math library.');

  loadMathLibrary();

  print('After loading math library.');
}

do: Used to start a do-while loop.

 int count = 0;

  //This loop will continue until count is 5
  do {
    count++;
  } while (count < 5);

dynamic: Used to declare variables with dynamic type, where the type is determined at runtime.
```
//dynamic represents any datatype including null
dynamic value = "Odinachi";
```

else: Used in if-else statements to specify the block of code to execute if the condition is false.

bool value = false;
//else block will be executed because value is equal to false
if (value){
  print("value is true");
} else {
   print("value is is false");
}

enum: Used to declare enumerated types.

//Declaration
enum Weekday {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}

//usage
Weekday today = Weekday.Tuesday;

extends: Used to create a subclass that inherits from a superclass.

// Define a superclass called 'Animal'
class Animal {
  String name;

  // Constructor
  Animal(this.name);

  // Method to make sound
  void makeSound() {
    print('Animal $name makes a sound');
  }
}

// Define a subclass called 'Dog' that extends 'Animal'
class Dog extends Animal {
 /* 
    we can get what parameters we need for the Dog class and also
    pass the required parameters for Animal class as well inside the super 
    implementation
  */
  Dog(String name) : super(name);

  // We want to chnage what sound dog makes
  @override
  void makeSound() {
    print('Dog $name barks');
  }

  // Method specific to Dog class
  void wagTail() {
    print('Dog $name wags its tail');
  }
}

extension: Used to add new functionality to existing classes without modifying their source code.

extension StringExtensions on String {
  // Method to convert a string to title case
  String toTitleCase() {
    return this.split(' ')
        .map((word) => word.isEmpty
            ? '' // Handle empty strings
            : word[0].toUpperCase() + word.substring(1).toLowerCase())
        .join(' ');
  }
}

//usage
String message = 'hello world';
String titleCaseMessage = message.toTitleCase();

factory: constructor is a special type of constructor used to create objects. Unlike a regular constructor, a factory constructor does not always create a new instance of its class. It may return an existing instance, a subclass instance, or even an instance of a different class altogether. This flexibility makes factory constructors useful for implementing object creation logic that cannot be achieved with regular constructors alone.

//Example one
class Point {
  final int x;
  final int y;

  // Private constructor
  Point._(this.x, this.y);

  // Factory constructor to create Point objects
  factory Point(int x, int y) {
    // Check if the coordinates are valid
    if (x >= 0 && y >= 0) {
      // If valid, return a new Point object
      return Point._(x, y);
    } else {
      // If invalid, return a default Point object
      return Point._(0, 0);
    }
  }

  @override
  String toString() {
    return 'Point(x: $x, y: $y)';
  }
}

//Example two 
class Point {
  final int x;
  final int y;

  Point(this.x, this.y);

  factory Point.fromJson(Map<String, dynamic> json) {
    return Point(
      json['x'] as int ?? 0, // If 'x' is not present or not an integer, default to 0
      json['y'] as int ?? 0, // If 'y' is not present or not an integer, default to 0
    );
  }

  @override
  String toString() {
    return 'Point(x: $x, y: $y)';
  }
}

false: Boolean literal representing the false value.
final: Used to declare variables whose values cannot be changed once initialized.
```
final int value = 10;
```

finally: Used in try-catch-finally blocks to specify code that should always be executed, regardless of whether an exception is thrown.

try {
    // Perform some operation that may throw an exception
  } catch (e) {
    // Handle the exception
  } finally {
    // This will always be executed
  }

for: Used to start a for loop.

 for (int i = 0; i < 5; i++) {
    print('Iteration $i');
  }

Function: Used as a type annotation for function types.

//int here represents the return type
int functionName(){
   return 0;
}

get: Used to define getter methods for retrieving the value of a class property. Getters are used to access the value of a property without directly accessing the underlying data member.

class Rectangle {
  double _width; 
  double _height;

  // Constructor
  Rectangle(this._width, this._height);

  // Getter for the width property
  double get width => _width;

  // Getter for the height property
  double get height => _height;

  // Getter for the area property
  double get area => _width * _height;
}

hide: Used in combination with the import directive to specify that certain members of a library should not be made available to the importing code.
```
import 'package:flutter/material.dart' hide MaterialApp;
```
if: Used to start an if statement.

Example can be seen in item 17 (else).

implements: Used to declare that a class implements a set of methods specified by an abstract class.

// Define an abstract calss called 'Shape'
abstract class Shape {
  double area(); // Abstract method
}

// Define a class called 'Rectangle' that implements the 'Shape' interface
class Rectangle implements Shape {
  double width;
  double height;

  // Constructor
  Rectangle(this.width, this.height);

  // Implement the 'area' method required by the 'Shape' interface
  @override
  double area() {
    return width * height;
  }
}

import: Used to import libraries into the current Dart file.
```
import 'package:flutter/material.dart';
```

in: Used within collection literals (such as lists, sets, and maps) to check if an element exists in the collection. This is often used in conjunction with the for loop to iterate over the elements of a collection.

//Checking if an element exist
List<int> numbers = [1, 2, 3, 4, 5];
  // Check if an element exists in the list
  if (3 in numbers) {
    print('3 is present in the list');
  } else {
    print('3 is not present in the list');
  }

//Control flow
List<String> fruits = ['Apple', 'Banana', 'Orange'];
  // Iterate over the elements of the list using for-in loop
for (String fruit in fruits) {
   print('Fruit: $fruit');
 }

is: to check whether an object is an instance of a particular class or implements a particular abstract class.

dynamic value = 0;

//we're check if value is an integer
if(value is int){
  print(value);
}

//can also be used for error handling
try{
//operations
} catch (error) { 
//you can check what type of error it is.
if(error is TypeError){
//perform some operations
    } 
}

late: Used to declare variables that are initialized at a later point, allowing you to defer initialization until it's needed. This is particularly useful for non-nullable variables that can't be assigned null initially but are initialized before being accessed
```
class className {
  late final String value;

  void getVal() {
    //value must be assisgned before being referenced
    value = "Odinachi";
    print(value);
  }
}
```
mixin: Used to define mixins, which are a way to reuse a class's code in multiple class hierarchies.
```
mixin MixinName {
  //Methods
}
class ClassName with MixinName {}
```
null: Represents the null object.
```
int? value = null;
```

on: Used in catch clauses to specify the types of exceptions to catch in a try-catch block.

try {
    //operation
  } on IntegerDivisionByZeroException {
    //IntegerDivisionByZeroException can be any exception type
  } catch (e) {
    // Catching any other type of exception
  }

part: to split a library into multiple files. This allows you to organize and manage large codebases more effectively by dividing them into smaller, more manageable parts.

 part 'file_name.dart';

// NB: the corresponding file must have:
part of "filename_above.dart";

/* part must come after the import statement and the "part of" file
doesn't contain any imports as all the imports are done on the 
part file */

rethrow: Used in catch blocks to rethrow the caught exception.

try {
    // operations
  } catch (e) {
    // Catching any exception thrown during the division operation

    // Rethrowing the caught exception
    rethrow;
  }

return: Used to return a value from a function/method.

int value(int a, int b){
   return a + b;
}

set: Used to define setter methods.

class ClassName {
  String _name; // Private instance variable

  // Setter for the 'name' property
  set name(String value) {
   _name = value; // Assign value to '_name' if it's not null or empty
  }

  // Getter for the 'name' property
  String get name => _name;
}

show: Used in import statements to only import specific members of a library.

This is the opposite of hide in item 28 (hide)

static: Used to declare static variables or methods in a class.

class ClassName {
   static int value = 0;
   void call(){}
}

//usage
int number = ClassName.value;
ClassName.call();
//NB: classed do not have to be instantiated to access their static variables

super: Used to refer to the superclass of the current class.

Example can be seen on item 19 (extends)
switch: Used to start a switch statement.

Example can be seen on item 7 (case)
this: Used to refer to the current instance of a class from within its methods or constructors. It is commonly used to access instance variables, invoke other methods, or pass the current instance to other functions.
```
class ClassName {
    final value = 0;

    int getVal(){
//0 will be returned because the value of value on this instance of class name is 0
        return this.value;
    }
}
```

throw: Used to throw exceptions.

void validateAge(int age) {
  if (age < 0) {
    throw ArgumentError('Age cannot be negative');
  }
}

true: Boolean literal representing the true value.
try: Used to start a try block for exception handling.

Example can be seen on item 8 (catch)

typedef: Used to define function type aliases.

// Define a typedef for a function that takes two integers and returns an integer
typedef MathOperation = int Function(int a, int b);

// Function to perform addition
int add(int a, int b) {
  return a + b;
}

// Declare a variable of type MathOperation and assign the 'add' function
MathOperation operation = add;

// Use the variable to perform addition
int result = operation(5, 3);
print('Result of addition: $result'); // Output: Result of addition: 8

var: Used to declare variables without specifying their type explicitly.
```
var value = "Odinachi";
```

void: Used to specify that a function does not return any value.

void doSomething{
    //perform some operations
    return null;
}

while: Used to start a while loop.

 int count = 0;
  // While loop to print numbers from 1 to 5
  while (count < 5) {
    count++;
    print('Number: $count');
  }
//NB: the loop won't break for as long as the condition is true

with: Used to specify mixins that a class uses.

Example can be seen on item 35 (mixins)

yield: Used inside generator functions to produce a value for each iteration.

Iterable<int> generateNumbers(int n) sync* {
  for (int i = 1; i <= n; i++) {
    yield i; // Yielding values from 1 to n
  }
}

 var numbers = generateNumbers(5);

Firebase Alternatives for your flutter apps

Odinachi David — Mon, 14 Aug 2023 02:29:45 +0000

Firebase has emerged as one of the most commonly employed Backend as a Service (BaaS) platforms in Flutter applications. This is due to its capacity to streamline development, encompassing nearly all the requisite functionalities for your application, and its user-friendly nature.

Before we proceed, let's establish a definition for Backend as a Service (BaaS).

Understanding Backend as a Service (BaaS)

Backend as a Service (BaaS), also known as "mobile backend as a service" (MBaaS), is a cloud computing service model that provides developers with pre-built backend infrastructure to support the front-end development of applications. BaaS platforms offer a range of services and functionalities, such as databases, authentication, storage, serverless computing, and more. By utilizing BaaS, developers can streamline the development process, as they don't need to build and manage backend components from scratch. This allows them to focus more on creating engaging user experiences and frontend features while relying on the ready-made backend services provided by the BaaS provider.

Now that we've established what Backend as a Service (BaaS) means, let's explore the other Firebase alternatives with the pros, cons and peaks and pricing.

Certainly, here's the extended list of Backend as a Service (BaaS) platforms for Flutter applications, along with their pros, cons, standout features, links to their pricing pages, and links to their documentation:

Firebase:

Pros:

1. Comprehensive feature set

2. Real-time database

3. Easy authentication

4. Cloud functions,

5. Scalable hosting.

6. Push Notifications

Cons:

1. Vendor lock-in,

2. May become costly for high usage,

3. Limited customizability.

Standout Feature:

1. Tight integration with Flutter,

2. Rapid development with ready-to-use services.

Pricing

Documentation
AWS Amplify:

Pros:

1. Integration with AWS services,

2. customizable

3. Authentication

4. APIs, scalable,

5. Serverless functions.

Cons:

1. AWS learning curve might be overwhelming for small projects,

2. Cost management.

Standout Feature:

1. Seamless connection with Amazon's vast array of cloud services.

Pricing

Documentation
Back4App:

Pros:

1. Built on Parse Server

2. User-friendly

3. Real-time capabilities,

4. Scalable,

5. File storage.

Cons:

1. Limited free tier

2. Pricing can increase with usage,

3. Limited control for advanced users.

Standout Feature:

1. Provides a managed platform based on Parse Server

2. Simplifying backend setup.

Pricing

Documentation
Supabase:

Pros:

1. Open-source

2. PostgreSQL-powered

3. Customizable

4. Real-time features

5. User authentication.

Cons:

1. Still in active development,

2. Might lack some advanced features.

Standout Feature:

1. Offers control and customization while leveraging PostgreSQL's capabilities.

Pricing

Documentation
Parse Platform:

Pros:

1. Open-source

2. Self-hosting option

3. Adaptable

4. User authentication

5. Cloud functions.

Cons:

1. Maintenance required for self-hosting

2. Might not be as feature-rich as other options.

Standout Feature:

1. Open-source nature and self-hosting possibility provide flexibility.

Documentation
Kuzzle:

Pros:

1. Open-source

2. Real-time capabilities

3. Advanced search

4. Geofencing

5. Extensible

Cons:

1. Might require more setup compared to managed platforms

2. Community support.

Standout Feature:

1. Focused on real-time capabilities

2. Extensibility.

Pricing

Documentation
Backendless:

Pros:

1. User management

2. APIs

3. Real-time capabilities

4. Serverless functions.

Cons:

1. Pricing may increase with usage,

2. Might not be as customizable as other platforms.

Standout Feature:

1. Provides a range of backend services

2. Including real-time functionality.

Pricing

Documentation
Appwrite:

Pros:
1. Open-source

2. User authentication

3. Databases

4. File storage

5. Cloud functions.

Cons:

1. Still evolving,

2. Might have a smaller community compared to larger platforms.

Standout Feature:

1. Modern interface and open-source nature for building custom backend solutions.

Pricing

Documentation

Each of these BaaS platforms comes with its own set of advantages, disadvantages, unique features, pricing considerations, and comprehensive documentation. When choosing a platform for your Flutter app, consider factors such as your project's complexity, scalability needs, familiarity with the platform, and the specific services it offers. A well-informed decision will contribute to a successful backend integration for your Flutter application.

Your suggestions are welcomed. Happy coding!!!🎉🎉

Testing Flutter Plugins: A Step-by-Step Guide

Odinachi David — Wed, 02 Aug 2023 23:42:25 +0000

Testing is a critical aspect of Flutter development, and comprehensive test coverage is essential to ensure the reliability of your application. Although unit testing methods, packages, and widgets are relatively straightforward, unit testing a plugin demands some additional steps. It's important to meticulously test plugins to ensure they function correctly and integrate seamlessly with your project. By following a thorough testing process, you can identify and address any potential issues, providing a smoother user experience for your app.

before we move any further I'll like to explain the difference between a package and a plugin for a better understanding

Package: A package is a collection of Dart code, resources, and configurations that can be easily shared and reused across multiple projects. Packages can provide various features, utilities, UI components, or integrations with third-party services, making them a powerful tool for enhancing your Flutter app without reinventing the wheel (your regular unit test works as expected for this since they're all Dart code).

Plugins: plugins are packages that provide a way to access native platform functionality and APIs from your Dart code. Flutter itself offers a rich set of UI components and features, but there are instances where you may need to interact with native code or leverage platform-specific capabilities that are not available through Flutter's framework alone.

NB: I am assuming you understand the basics of flutter development and how test works as this is not a beginner's guide.

Here are the steps to testing your plugins

for this test, we'll be testing two plugins Flutter Lib phone Number and Geolocator

We have a class with two methods: one for retrieving the location and another for validating phone numbers. The first method allows us to obtain the user's current location, while the second method is responsible for validating whether a given phone number is in the correct format or meets specific criteria. These methods are designed to enhance our application with location-based services and ensure the accuracy and validity of phone numbers entered by users, so we'll be testing both to ensure it keeps on working as expected.

class DemoClass {
  // This method gets us our current location
  static Future<Position?> getLocation() async {
    //This will throw an exception if it fails to get the location
    try {
      return Geolocator.getCurrentPosition();
    } catch (e) {
      return null;
    }
  }

//this method Validates the phone number
  static Future<String?> validatePhone(String phone) async {
    if (phone.isEmpty) {
      return "Phone number cannot be empty";
    }
    //This will throw an exception if the phone number is not a valid one
    try {
      await parse(phone);
      return null;
    } catch (e) {
      return "Phone number is invalid";
    }
  }
}

To thoroughly test a plugin, follow these steps:

Ensure Flutter Widget Binding is Initialized: Before testing, make sure the Flutter widget binding is properly initialized to ensure that widgets can function as expected during the tests.

Initialize the Channel with the Correct Name: Ensure that the communication channel used by the plugin is initialized with the correct channel name, as specified in the plugin's implementation.
Verify Proper Implementation of Methods: Check that the methods provided by the plugin are correctly implemented and handle the expected scenarios and edge cases.
Initialize Your Method on the Test Default Binary Messenger: Initialize the test method on the Test Default Binary Messenger to simulate communication with the native platform and facilitate testing.
Write Exhaustive Tests: Design comprehensive tests that cover various scenarios and edge cases related to the plugin's functionality. Test different inputs, error cases, and expected outcomes to ensure robustness.

Here's the test for our validatePhone method:

group('Demo class test', () {
  //this will enter our plugin is initialize pperly before we fire the test
  TestWidgetsFlutterBinding.ensureInitialized();

  //`com.bottlepay/flutter_libphonenumber` is the name of the channel and can be seen when you dig into the implementation of any plugin
  const MethodChannel libChannel =
      MethodChannel('com.bottlepay/flutter_libphonenumber');

  Future handler(MethodCall methodCall) async {
    //we're only interested in the `parse` method for this tutorial
    if (methodCall.method == 'parse') {
      //we checking if the method was called with a phone property
      final phone = (methodCall.arguments as Map)["phone"] as String?;
      //our condition for a valid phone number is that the the phone number length must be equal to 10
      if (phone == null || phone.isEmpty || phone.length != 10) {
        throw Exception('Error occurred');
      } else {
        return <String, dynamic>{};
      }
    }

    return null;
  }

  group("Parse phone number", () {
    setUpAll(() {
      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
          .setMockMethodCallHandler(libChannel, handler);
    });

    test('check empty number throws error', () async {
      //this will return a warning string from our DemoClass implementation since it is empty
      expect(
          await DemoClass.validatePhone(''), "Phone number cannot be empty");
    });
    test('check invalid number throws error', () async {
      //this will throw an exception from our channel implementation since the length is not equal to 10
      expect(await DemoClass.validatePhone("0123456"),
          "Phone number is invalid");
    });
    test('check valid number is successful', () async {
      //This will pass because the length of the characters is equal to 10
      expect(await DemoClass.validatePhone("0123456789"), isNull);
    });
  });
});

After the explanation, the code provided above becomes clearer. Here's the test for the getLocation method:

group('Demo class test', () {
  final testPosition = Position(
      longitude: 100.0,
      latitude: 100.0,
      timestamp: DateTime.now(),
      accuracy: 50.6,
      altitude: 20.0,
      heading: 120,
      speed: 150.9,
      speedAccuracy: 10.0);
  //this will enter our plugin is initialize pperly before we fire the test
  TestWidgetsFlutterBinding.ensureInitialized();

  const MethodChannel locationChannel =
      MethodChannel('flutter.baseflow.com/geolocator');


    Future locationHandler(MethodCall methodCall) async {
      //whenever `getCurrentPosition` method is called we want to return a testPosition
      if (methodCall.method == 'getCurrentPosition') {
        return testPosition.toJson();
      }
      // this is the check that's supposed to happend
      // on the Device before you try to get user's
      //location, so I set it to true
      if (methodCall.method == 'isLocationServiceEnabled') {
        return true;
      }
      //Here's another check that's happens on the user's device, we defaulted
      //it to authorized, and this is simulating when the user grants
      //access to their location
      if (methodCall.method == 'checkPermission') {
        return 3;
      }
    }


  group("Test Location", () {
    setUpAll(() {
      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
          .setMockMethodCallHandler(locationChannel, locationHandler);
    });

    test('get location', () async {
      final res = await DemoClass.getLocation();
      //we're testing to be sure that what we get a datatype of Position.
      expect(res, isA<Position>());
    });
  });
});

You have the flexibility to set the return type of any method based on what the method channel is expected to return, ensuring that you can work with the results as expected.

Here's the full code

//DemoClass
class DemoClass {
  // This method gets us our current location
  static Future<Position?> getLocation() async {
    //This will throw an exception if it fails to get the location
    try {
      return Geolocator.getCurrentPosition();
    } catch (e) {
      return null;
    }
  }

//this method Validates the phone number
  static Future<String?> validatePhone(String phone) async {
    if (phone.isEmpty) {
      return "Phone number cannot be empty";
    }
    //This will throw an exception if the phone number is not a valid one
    try {
      await parse(phone);
      return null;
    } catch (e) {
      return "Phone number is invalid";
    }
  }
}


//Test
void main() {
  group('Demo class test', () {
    final testPosition = Position(
        longitude: 100.0,
        latitude: 100.0,
        timestamp: DateTime.now(),
        accuracy: 50.6,
        altitude: 20.0,
        heading: 120,
        speed: 150.9,
        speedAccuracy: 10.0);
    //this will enter our plugin is initialize pperly before we fire the test
    TestWidgetsFlutterBinding.ensureInitialized();

    //`com.bottlepay/flutter_libphonenumber` is the name of the channel and can be seen when you dig into the implementation of any plugin
    const MethodChannel libChannel =
        MethodChannel('com.bottlepay/flutter_libphonenumber');
    const MethodChannel locationChannel =
        MethodChannel('flutter.baseflow.com/geolocator');

    Future parseHandler(MethodCall methodCall) async {
      //we're only interested in the `parse` method for this tutorial
      if (methodCall.method == 'parse') {
        //we checking if the method was called with a phone property
        final phone = (methodCall.arguments as Map)["phone"] as String?;
        //our condition for a valid phone number is that the the phone number length must be equal to 10
        if (phone == null || phone.isEmpty || phone.length != 10) {
          throw Exception('Error occurred');
        } else {
          return <String, dynamic>{};
        }
      }

      return null;
    }

    Future locationHandler(MethodCall methodCall) async {
      //whenever `getCurrentPosition` method is called we want to return a testPosition
      if (methodCall.method == 'getCurrentPosition') {
        return testPosition.toJson();
      }
      // this is the check that's supposed to happend
      // on the Device before you try to get user's
      //location, so I set it to true
      if (methodCall.method == 'isLocationServiceEnabled') {
        return true;
      }
      //Here's another check that's happens on the user's device, we defaulted
      //it to authorized, and this is simulating when the user grants
      //access to their location
      if (methodCall.method == 'checkPermission') {
        return 3;
      }
    }

    group("Test phone number", () {
      setUpAll(() {
        TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
            .setMockMethodCallHandler(libChannel, parseHandler);
      });

      test('check empty number throws error', () async {
        //this will return a warning string from our DemoClass implementation since it is empty
        expect(
            await DemoClass.validatePhone(''), "Phone number cannot be empty");
      });
      test('check invalid number throws error', () async {
        //this will throw an exception from our channel implementation since the length is not equal to 10
        expect(await DemoClass.validatePhone("0123456"),
            "Phone number is invalid");
      });
      test('check valid number is successful', () async {
        //This will pass
        expect(await DemoClass.validatePhone("0123456789"), isNull);
      });
    });
    group("Test Location", () {
      setUpAll(() {
        TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
            .setMockMethodCallHandler(locationChannel, locationHandler);
      });

      test('get location', () async {
        final res = await DemoClass.getLocation();
        //we're testing to be sure that what we get a datatype of Position.
        expect(res, isA<Position>());
      });
    });
  });
}

Happy Testing!! 🎉🎉🎉

How to block Screenshots in your flutter app

Odinachi David — Tue, 20 Sep 2022 14:12:27 +0000

when building highly secured apps, it can be essential to stop the user from taking screenshots, while this is quite straightforward on Android, it gets a little bit tricky on the iOS part. I remember facing this challenge some months ago and I scanned through a couple of StackOverflow answers for hours, I was at the point of getting frustrated when I stumbled on one that was the solution for the iOS part:

For Android:

inside your mainActivity.(java/tk), import the following:

import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import android.view.WindowManager.LayoutParams

and you replace the content with:

class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        window.addFlags(LayoutParams.FLAG_SECURE)
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

this does it for Android.

For iOS:

in your AppDelegate.swift you should create a window extension just like below:

  extension UIWindow {
  func makeSecure() {
      let field = UITextField()
        let view = UIView(frame: CGRect(x: 0, y: 0, width: field.frame.self.width, height: field.frame.self.height))
        field.isSecureTextEntry = true
        self.addSubview(field)
        self.layer.superlayer?.addSublayer(field.layer)
        field.layer.sublayers?.last!.addSublayer(self.layer)
        field.leftView = view
        field.leftViewMode = .always
    }
  }

then call the new window extension in your application function:

self.window.makeSecure()

your AppDelegate.swift should look like this:

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    self.window.makeSecure()
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

  extension UIWindow {
  func makeSecure() {
      let field = UITextField()
      field.isSecureTextEntry = true
      self.addSubview(field)
      field.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
      field.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
      self.layer.superlayer?.addSublayer(field.layer)
      field.layer.sublayers?.first?.addSublayer(self.layer)
    }
  }

Source: stackoverflow answer

thank you for reading, I hope this was helpful.

Unit Testing in Flutter: Services, Blocs and Sqflite

Odinachi David — Sat, 20 Aug 2022 14:19:00 +0000

A simple google search of "Unit testing" will say:

Unit testing is a software development process in which the smallest testable parts of an application, called units, are individually and independently scrutinised for proper operation

well, the quote above is quite self-explanatory, to add to it I'll share a few benefits of testing.

It helps you find bugs even before actual users find them.
it helps you maintain a scalable code.
it helps you ensure that an updated code doesn't break any existing functionality.
it helps you become a better developer👌

Overview

we'll be using a simple note app for the testing, the app uses cubit for state management and Sqflite for storage.

sqlflite is a structured cache database that helps us perform SQL queries on the device cache.

so we'll be writing unit tests for our sqflite, CRUD service and bloc implementations to be sure nothing unexpected is happening on our app.

Dependancies:

install the following dependancies:

dependencies:
  sqflite:
  bloc_test:

dev_dependencies:
  mockito: ^5.2.0
  build_runner: ^2.2.0
  sqflite_common_ffi: ^2.1.1+1

Implementation:

we have two screens on the app and as good practice, each of those screens has to have it's own cubit, so we'll have two cubits one for the home screen which will display all our tasks and another one for the edit screen, where we can edit, delete and create a new task. we also have a service class that manages the entire CRUD operations.

app_service.dart

class TaskService {
  late Database db;

  TaskService._privateConstructor();
  static final TaskService instance = TaskService._privateConstructor();

  Future initialize(String path) async {
    db = await openDatabase(path, version: 1,
        onCreate: (Database db, int version) async {
      return await db.execute(databaseRules);
    });
  }

  Future<Task> insert(Task task) async {
    task.id = await db.insert(tableTodo, task.toMap());
    return task;
  }

  Future<List<Task>?> getAllTask() async {
    await Future.delayed(const Duration(milliseconds: 1000));
    var p = await db.rawQuery('SELECT * FROM $tableTodo');
    var list;
    list = List<Task>.from(p.map((e) => Task.fromMap(e)));
    return list;
  }

  Future<Task?> getTask(int id) async {
    List<Map> maps = await db.query(tableTodo,
        columns: [columnId, columnDone, columnTitle, columnDesc],
        where: '$columnId = ?',
        whereArgs: [id]);
    if (maps.isNotEmpty) {
      return Task.fromMap(maps.first as Map<String, dynamic>);
    }
    return null;
  }

  Future<int?> delete(int id) async {
    return await db.delete(tableTodo, where: '$columnId = ?', whereArgs: [id]);
  }

  Future<int?> update(Task task) async {
    return await db.update(tableTodo, task.toMap(),
        where: '$columnId = ?', whereArgs: [task.id]);
  }

  Future close() async => db.close();
}

home_cubit.dart

class HomeScreenCubit extends Cubit<HomeScreenState> {
  late final TaskService taskService;

  HomeScreenCubit(TaskService service) : super(InitialState()) {
    taskService = service;
  }

  void fetchAllTask() async {
    emit(OnLoading());
    var p = await this.taskService.getAllTask();
    if (p != null) {
      if (p.isNotEmpty) {
        List<Task> _com = [];
        List<Task> _unCom = [];
        for (var element in p) {
          if (element.done == true) {
            _com.add(element);
          } else {
            _unCom.add(element);
          }
        }
        emit(OnSuccess(completedTasks: _com, unCompletedTasks: _unCom));
      } else {
        emit(OnEmpty());
      }
    } else {
      emit(OnFailure(error: ""));
    }
  }

  void updateTask(Task task) async {
    var p = await this.taskService.update(task);
    if (p != null) {
      var p = await this.taskService.getAllTask();
      if (p != null) {
        if (p.isNotEmpty) {
          List<Task> _com = [];
          List<Task> _unCom = [];
          for (var element in p) {
            if (element.done == true) {
              _com.add(element);
            } else {
              _unCom.add(element);
            }
          }
          emit(OnSuccess(completedTasks: _com, unCompletedTasks: _unCom));
        } else {
          emit(OnEmpty());
        }
      }
    } else {
      emit(OnUpdateFailure(error: ""));
    }
  }

  void updateList() async {
    var p = await this.taskService.getAllTask();
    if (p != null) {
      if (p.isNotEmpty) {
        List<Task> _com = [];
        List<Task> _unCom = [];
        for (var element in p) {
          if (element.done == true) {
            _com.add(element);
          } else {
            _unCom.add(element);
          }
        }
        emit(OnSuccess(completedTasks: _com, unCompletedTasks: _unCom));
      } else {
        emit(OnEmpty());
      }
    } else {
      emit(OnFailure(error: ""));
    }
  }
}

edit_screen_cubit.dart

class EditScreenCubit extends Cubit<EditScreenState> {
  late final TaskService taskService;

  EditScreenCubit(TaskService service) : super(InitialEditState()) {
    taskService = service;
  }

  void createTask(
      {TaskService? taskService, required String title, String? desc}) async {
    emit(OnEditLoading());
    Task _t = Task(title: title, desc: desc, done: false);
    await this.taskService.insert(_t);
    emit(
      OnEditSuccess(),
    );
  }

  void updateTask(
      {TaskService? taskService,
      required int id,
      required String title,
      String? desc,
      required bool done}) async {
    emit(
      OnEditLoading(),
    );
    Task _t = Task(title: title, desc: desc, done: done, id: id);
    var p = await this.taskService.update(_t);
    if (p != null) {
      emit(
        OnEditUpdateSuccess(),
      );
    } else {
      emit(
        OnEditUpdateFailure(error: ""),
      );
    }
  }

  void deleteTask({TaskService? taskService, required int taskId}) async {
    emit(
      OnEditLoading(),
    );
    var p = await this.taskService.delete(taskId);
    if (p != null) {
      emit(
        OnEditDeleteSuccess(),
      );
    } else {
      emit(
        OnEditDeleteFailure(error: ""),
      );
    }
  }
}

so we'll first set up the mock services inside your test folder and be sure it works before we begin testing our cubit with the mock service so firstly, let's create a mock TaskService by annotating your app_service_test.dart main function like this:

@GenerateMocks([TaskService])
void main() {}

and then run:

flutter packages pub run build_runner build --delete-conflicting-outputs

this should generate a MockTaskService class on the same directory as your app_service_test.dart

let's set up our dependencies for testing.

  late Database database;
  late MockTaskService taskService;
  Task testTask = Task(id: 1, title: "first ", done: false, desc: "yes");
  List<Task> taskList = List.generate(10, (index) => testTask);
  setUpAll(() async {
    sqfliteFfiInit();
    database = await databaseFactoryFfi.openDatabase(inMemoryDatabasePath);
    await database.execute(databaseRules);
    taskService = MockTaskService();
    taskService.db = database;
    when(taskService.insert(any)).thenAnswer((_) async => testTask);
    when(taskService.update(any)).thenAnswer((_) async => 1);
    when(taskService.delete(any)).thenAnswer((_) async => 1);
    when(taskService.getTask(any)).thenAnswer((_) async => testTask);
    when(taskService.getAllTask()).thenAnswer((_) async => taskList);
  });

what we've done is to initialise our SQL Database object to databaseFactoryFfi.openDatabase(inMemoryDatabasePath) which is a database simulator for test purposes, and then we have predefined Task objects which we'll be using as input and expected results.
when function is what we expect whenever that function is called.
let's test our Database:



  group('Database Test', () {
    test('sqflite version', () async {
      expect(await database.getVersion(), 0);
    });
    test('add Item to database', () async {
      var i = await database.insert(
          tableTodo, Task(title: "first ", done: false, desc: "yes").toMap());
      var p = await database.query(tableTodo);
      expect(p.length, i);
    });
    test('add three Items to database', () async {
      await database.insert(
          tableTodo, Task(title: "second", done: false, desc: "yes").toMap());
      await database.insert(
          tableTodo, Task(title: "third ", done: false, desc: "yes").toMap());
      await database.insert(
          tableTodo, Task(title: "fourth ", done: false, desc: "yes").toMap());
      var p = await database.query(tableTodo);
      expect(p.length, 4);
    });
    test('update first Item', () async {
      await database.update(tableTodo,
          Task(title: "Changed the first", done: false, desc: "yes").toMap(),
          where: '$columnId = ?', whereArgs: [1]);
      var p = await database.query(tableTodo);
      expect(p.first['title'], "Changed the first");
    });
    test('delete the first Item', () async {
      await database.delete(tableTodo, where: '$columnId = ?', whereArgs: [1]);
      var p = await database.query(tableTodo);
      expect(p.length, 3);
    });
    test('Close db', () async {
      await database.close();
      expect(database.isOpen, false);
    });
  });

so basically what we did above was simulate saving to the db and getting responses based on successful execution.

let's test our services with the db instance above

 group("Service test", () {
    test("create task", () async {
      verifyNever(taskService.insert(testTask));
      expect(await taskService.insert(testTask), testTask);
      verify(taskService.insert(testTask)).called(1);
    });
    test("update task", () async {
      verifyNever(taskService.update(testTask));
      expect(await taskService.update(testTask), 1);
      verify(taskService.update(testTask)).called(1);
    });
    test("delete task", () async {
      verifyNever(taskService.delete(1));
      expect(await taskService.delete(1), 1);
      verify(taskService.delete(1)).called(1);
    });
    test("get task", () async {
      verifyNever(taskService.getTask(1));
      expect(await taskService.getTask(1), testTask);
      verify(taskService.getTask(1)).called(1);
    });
    test("get all task", () async {
      verifyNever(taskService.getAllTask());
      expect(await taskService.getAllTask(), taskList);
      verify(taskService.getAllTask()).called(1);
    });
  });

so we basically used our testable db to test our services and we're sure nothing breaks and everything works as is expected of it. here's the complete app_service_test.dart file.

@GenerateMocks([TaskService])
void main() {
  late Database database;
  late MockTaskService taskService;
  Task testTask = Task(id: 1, title: "first ", done: false, desc: "yes");
  List<Task> taskList = List.generate(10, (index) => testTask);
  setUpAll(() async {
    sqfliteFfiInit();
    database = await databaseFactoryFfi.openDatabase(inMemoryDatabasePath);
    await database.execute(databaseRules);
    taskService = MockTaskService();
    taskService.db = database;
    when(taskService.insert(any)).thenAnswer((_) async => testTask);
    when(taskService.update(any)).thenAnswer((_) async => 1);
    when(taskService.delete(any)).thenAnswer((_) async => 1);
    when(taskService.getTask(any)).thenAnswer((_) async => testTask);
    when(taskService.getAllTask()).thenAnswer((_) async => taskList);
  });

  group('Database Test', () {
    test('sqflite version', () async {
      expect(await database.getVersion(), 0);
    });
    test('add Item to database', () async {
      var i = await database.insert(
          tableTodo, Task(title: "first ", done: false, desc: "yes").toMap());
      var p = await database.query(tableTodo);
      expect(p.length, i);
    });
    test('add three Items to database', () async {
      await database.insert(
          tableTodo, Task(title: "second", done: false, desc: "yes").toMap());
      await database.insert(
          tableTodo, Task(title: "third ", done: false, desc: "yes").toMap());
      await database.insert(
          tableTodo, Task(title: "fourth ", done: false, desc: "yes").toMap());
      var p = await database.query(tableTodo);
      expect(p.length, 4);
    });
    test('update first Item', () async {
      await database.update(tableTodo,
          Task(title: "Changed the first", done: false, desc: "yes").toMap(),
          where: '$columnId = ?', whereArgs: [1]);
      var p = await database.query(tableTodo);
      expect(p.first['title'], "Changed the first");
    });
    test('delete the first Item', () async {
      await database.delete(tableTodo, where: '$columnId = ?', whereArgs: [1]);
      var p = await database.query(tableTodo);
      expect(p.length, 3);
    });
    test('Close db', () async {
      await database.close();
      expect(database.isOpen, false);
    });
  });

  group("Service test", () {
    test("create task", () async {
      verifyNever(taskService.insert(testTask));
      expect(await taskService.insert(testTask), testTask);
      verify(taskService.insert(testTask)).called(1);
    });
    test("update task", () async {
      verifyNever(taskService.update(testTask));
      expect(await taskService.update(testTask), 1);
      verify(taskService.update(testTask)).called(1);
    });
    test("delete task", () async {
      verifyNever(taskService.delete(1));
      expect(await taskService.delete(1), 1);
      verify(taskService.delete(1)).called(1);
    });
    test("get task", () async {
      verifyNever(taskService.getTask(1));
      expect(await taskService.getTask(1), testTask);
      verify(taskService.getTask(1)).called(1);
    });
    test("get all task", () async {
      verifyNever(taskService.getAllTask());
      expect(await taskService.getAllTask(), taskList);
      verify(taskService.getAllTask()).called(1);
    });
  });
}

Cubit:

Cubit is state management and we'll be testing it to ensure, we're emitting the right state at the right time without skipping a step, so we'll have two test files, one will be home_cubit_test.dart and edit_cubit_test.dart.

home_cubit_test.dart

void main() {
  late HomeScreenCubit mockCubit;
  late MockTaskService mockService;
  late Task testTask = Task(id: 1, title: "first ", done: false, desc: "yes");
  List<Task> taskList = List.generate(10, (index) => testTask);

  setUp(() async {
    mockService = MockTaskService();
    mockCubit = HomeScreenCubit(mockService);
  });

so what we did above was initialise our cubit with MockTaskService, with some predefined data to test with.
here's what the complete test looks like:

void main() {
  late HomeScreenCubit mockCubit;
  late MockTaskService mockService;
  late Task testTask = Task(id: 1, title: "first ", done: false, desc: "yes");
  List<Task> taskList = List.generate(10, (index) => testTask);

  setUp(() async {
    mockService = MockTaskService();
    mockCubit = HomeScreenCubit(mockService);
  });
  group("Home Screen bloc test", () {
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if fetch all works',
      build: () => mockCubit,
      setUp: () =>
          when(mockService.getAllTask()).thenAnswer((_) async => taskList),
      act: (b) => b.fetchAllTask(),
      expect: () => [isA<OnLoading>(), isA<OnSuccess>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if fetch all is empty',
      build: () => mockCubit,
      setUp: () => when(mockService.getAllTask()).thenAnswer((_) async => []),
      act: (b) => b.fetchAllTask(),
      expect: () => [isA<OnLoading>(), isA<OnEmpty>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if fetch all fails',
      build: () => mockCubit,
      setUp: () => when(mockService.getAllTask()).thenAnswer((_) async => null),
      act: (b) => b.fetchAllTask(),
      expect: () => [isA<OnLoading>(), isA<OnFailure>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update task works',
      build: () => mockCubit,
      setUp: () {
        when(mockService.update(any)).thenAnswer((_) async => testTask.id!);
        when(mockService.getAllTask()).thenAnswer((_) async => taskList);
      },
      act: (b) => b.updateTask(testTask),
      expect: () => [isA<OnSuccess>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update task is empty',
      build: () => mockCubit,
      setUp: () {
        when(mockService.update(any)).thenAnswer((_) async => testTask.id!);
        when(mockService.getAllTask()).thenAnswer((_) async => []);
      },
      act: (b) => b.updateTask(testTask),
      expect: () => [isA<OnEmpty>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update task fails',
      build: () => mockCubit,
      setUp: () {
        when(mockService.update(any)).thenAnswer((_) async => null);
        when(mockService.getAllTask()).thenAnswer((_) async => taskList);
      },
      act: (b) => b.updateTask(testTask),
      expect: () => [isA<OnUpdateFailure>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update all works',
      build: () => mockCubit,
      setUp: () =>
          when(mockService.getAllTask()).thenAnswer((_) async => taskList),
      act: (b) => b.updateList(),
      expect: () => [isA<OnSuccess>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update all fails',
      build: () => mockCubit,
      setUp: () => when(mockService.getAllTask()).thenAnswer((_) async => null),
      act: (b) => b.updateList(),
      expect: () => [isA<OnFailure>()],
    );
    blocTest<HomeScreenCubit, HomeScreenState>(
      'check if update all is empty',
      build: () => mockCubit,
      setUp: () => when(mockService.getAllTask()).thenAnswer((_) async => []),
      act: (b) => b.updateList(),
      expect: () => [isA<OnEmpty>()],
    );
  });
  tearDown(() => mockCubit.close());
}

bloc_test: this builds the bloc.
build: this initialises the bloc and makes it ready for testing.
setUp: this is all the predefined conditions you want from your methods.
act: this is where you call the bloc method you want to execute.
expect: This is an array of expected states in the sequence you expect them.
tearDown: this function is called after executing all the test cases, this is a typical place to close your blocs, streams etc.

edit_cubit_test.dart

void main() {
  late EditScreenCubit mockCubit;
  late MockTaskService mockService;
  late Task testTask = Task(id: 1, title: "first ", done: false, desc: "yes");

  setUp(() async {
    mockService = MockTaskService();
    mockCubit = EditScreenCubit(mockService);
  });
  group('EditScreenBloc', () {
    blocTest<EditScreenCubit, EditScreenState>(
      'check if create was successful',
      build: () => mockCubit,
      setUp: () =>
          when(mockService.insert(any)).thenAnswer((_) async => testTask),
      act: (b) => b.createTask(title: testTask.title!),
      expect: () => [isA<OnEditLoading>(), isA<OnEditSuccess>()],
    );
    blocTest<EditScreenCubit, EditScreenState>(
      'check if update was successful',
      build: () => mockCubit,
      setUp: () => when(mockService.update(any)).thenAnswer((_) async => 1),
      act: (b) => b.updateTask(
          title: testTask.title!, id: testTask.id!, done: testTask.done!),
      expect: () => [isA<OnEditLoading>(), isA<OnEditUpdateSuccess>()],
    );
    blocTest<EditScreenCubit, EditScreenState>(
      'check if update failed',
      build: () => mockCubit,
      setUp: () => when(mockService.update(any)).thenAnswer((_) async => null),
      act: (b) => b.updateTask(
          title: testTask.title!, id: testTask.id!, done: testTask.done!),
      expect: () => [isA<OnEditLoading>(), isA<OnEditUpdateFailure>()],
    );
    blocTest<EditScreenCubit, EditScreenState>(
      'check if delete was successful',
      build: () => mockCubit,
      setUp: () => when(mockService.delete(any)).thenAnswer((_) async => 1),
      act: (b) => b.deleteTask(taskId: testTask.id!),
      expect: () => [isA<OnEditLoading>(), isA<OnEditDeleteSuccess>()],
    );
    blocTest<EditScreenCubit, EditScreenState>(
      'check if delete failed',
      build: () => mockCubit,
      setUp: () => when(mockService.delete(any)).thenAnswer((_) async => null),
      act: (b) => b.deleteTask(taskId: testTask.id!),
      expect: () => [isA<OnEditLoading>(), isA<OnEditDeleteFailure>()],
    );
  });
  tearDown(() => mockCubit.close());
}

Repo: Odinote github repo

Hope you enjoyed the read.

Backend with Dart? Yes, you can!

Odinachi David — Wed, 09 Feb 2022 08:12:39 +0000

Have you ever wondered if it was possible to write a backend in dart? Yeah, you probably have because I also had some curiosity after learning flutter, the idea of having my backend and mobile app in one language was quite a desire I so long for and that led me to making research, in the course of my research I found the shelf server which is a middleware web server which encourages composition and easy reuse. Shelf Router on the other hand does the heavy lifting of route management and response/request mapping.

Below is an example of a simple shelf server:

https://pub.dev/packages/shelf
 import 'package:shelf/shelf.dart';
 import 'package:shelf/shelf_io.dart' as shelf_io;
 void main() async {
  var handler =
  const Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);
 var server = await shelf_io.serve(handler, 'localhost', 8080);
 // Enable content compression
  server.autoCompress = true;
 print('Serving at http://${server.address.host}:${server.port}');
 }
 Response _echoRequest(Request request) =>
  Response.ok('Request for "${request.url}"');

Let's discuss what you should expect:

Host: this is the location at which your server is at the moment.
Port: this is the part of the location which belongs to you.
Pipeline: this is a channel that intercepts every request that passes through the specified paths.
Middleware: these are a bunch of commands that are stacked on the pipeline to handle requests.
Handlers: these are future responses, which makes it easier to handle responses in whichever way you wish.
Request: these are calls being made by the user to your server and can contain different types of parameters.
Response: this is what's expected of your server after each request is made.
Path: these are authorized passages from which users can request make a request.

let's take a look at a simple shelf server sample:
https://odinachi.github.io/shelf_server/#/
Below is the code:
https://github.com/Odinachi/shelf_server

for Video Tutorials, I'll recommend: https://www.youtube.com/c/CreativeBracket

Notable mentions:

Aqueduct: this was supposed to be a modern Dart HTTP server framework, but somehow got discontinued. Read more about Aqueduct https://aqueduct.io/
Angel: this is quite promising and looks good, read more about Angel-Dart https://angel-dart.dev/
Alfred: this is an express.js like a dart server and can be very helpful if you're coming from a JavaScript background, read more about Alfred https://medium.com/@iapicca/alfred-an-express-like-server-framework-written-in-dart-1661e8963db9
Conduit: this will be my next adventure as it's feature-packed and, with a built-in orm mapper. Read more about Conduit https://www.theconduit.dev/