Jetpack for flutter

Flutter Jetpack is a Collection of Abstract Class, useful to handle the state of a flutter application with low boiler code unlike BLOC, Provider, River Pod State management Patterns. Let's check an example implementing Flutter Jetpack.

Key Features

LiveData : It works as a State holder and Change notifier.
- As a State holder, it holds the current value.
- As a Change notifier, it updates and reads the current values and can notify the user. Which can Further pass to EventQueue.
EventQueue : It holds the temporary Events like Toasts/pop-up for showing the updates in the App within the ViewModel and discards after Completing.
ViewModel : It Contains the Business Logic code ,which manages Whole Flow. Means From Updating Current Value in LiveData , Showing Pop-up/Toast using EventQueue ,Updating the Actual Value (For Eg: in Database).

Example: In a Social Media App, When a user Posting Content on His Profile.

LiveData Holds the data and update the value.
EventQueue Shows Toast like “Successfully Posted” after it posted.
ViewModel manages the whole flow from hold the user data to updating that data in his profile.

Steps Implementing Flutter Jetpack

Step 1: Create a new flutter application

We can create new flutter application directly using the command line statement as mentioned below:

flutter create <YOUR_APP_NAME>

To know more about Creating flutter application refer to Creating a Simple Application in Flutter article.

Step 2: Adding Dependencies in the Application

Add jetpack package to your pubspec.yaml file.

 jetpack: ^1.0.7

Optional Dependency : Add fluttertoast package to your pubspec.yaml file.

fluttertoast: ^8.2.12

Step 3: Working with Main.dart File

Use the below code in the main.dart file for adding functionality to the appliction.

main.dart:

Dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:jetpack/jetpack.dart';
import 'package:my_app/Models/ViewModel.dart';

// Entry point of the application
void main() {
  runApp(const MyApp());
}

// Main application widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Disable debug banner
        debugShowCheckedModeBanner: false,
        
        // Set home widget
        home: const JectPackCounter(), 
    );
  }
}

// Event class for counter increment
class CounterIncrementedEvent extends CounterEvent {}

// Widget for JetPack counter
class JectPackCounter extends StatelessWidget {
  const JectPackCounter({super.key});

  // Function to handle events
  Future<void> onEvent(BuildContext context, CounterEvent event) async {
    await Fluttertoast.showToast(
        msg: "Counter Incremented", // Message to show
        toastLength: Toast.LENGTH_SHORT, // Duration of toast
        gravity: ToastGravity.BOTTOM, // Position of toast
        backgroundColor: Colors.green, // Background color of toast
        textColor: Colors.white, // Text color of toast
        fontSize: 16.0); // Font size of toast
  }

  @override
  Widget build(BuildContext context) {
    
    // Get ViewModel
    final IncrementCounterModel viewModel = context.viewModel(); 
    return Scaffold(
      appBar: AppBar(
        title: const Text('JetPack Counter'), // App bar title
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // Center vertically
          crossAxisAlignment: CrossAxisAlignment.center, // Center horizontally
          children: [
            EventListener(
              eventQueue: viewModel.eventQueue, // Event queue from ViewModel
              onEvent: onEvent, // Event handler
              child: LiveDataBuilder<int>(
                liveData: viewModel.counter, // Live data from ViewModel
                builder: (BuildContext buildContext, int count) => Text(
                  'Count: $count', // Display counter value
                  style: TextStyle(
                    fontSize: 20, 
                    fontWeight: FontWeight.bold, 
                  ),
                ),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green, 
              ),
              onPressed: viewModel.increment, // Increment counter on press
              child: Text(
                "Increment Counter", 
                style: TextStyle(
                  color: Colors.white, 
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// Extension to get ViewModel from BuildContext
extension ViewModelExtension on BuildContext {
  IncrementCounterModel viewModel() {
    return IncrementCounterModel();
  }
}

// Abstract class for counter events
abstract class CounterEvent {}

Refer to Fluttertoast in Flutter to know more about Toast.

Step 4: Creating New File and updating it

Create a new file called ViewModel.dart which is responsible for implementing Business Logic code ,which manages whole flow of the application.

ViewModel.dart: