Flutter Rocket

Fly high with Flutter Rocket - the ultimate package for Flutter developers

Author: Jahez team

Pub License: MIT Flutter CI

Graphic tutorial

JPG explain graphic

Package Pub
flutter_rocket pub package
rocket_model pub package
rocket_client pub package
rocket_listenable pub package
rocket_view pub package
rocket_singleton pub package
rocket_mini_view pub package


Simple case usage RocketMiniView & RocketValue

its very simple

class MiniViewRocket extends StatelessWidget {
  final RocketValue<String> myStringValue = "My Value".mini;
  final RocketValue<int> myIntValue = 2021.mini;

  MiniViewRocket({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // use RocketValue for every widget
            value: myStringValue,
            builder: () => Text(myStringValue.v),
            value: myStringValue,
            builder: () => Text(myIntValue.v.toString()),
          const SizedBox(
            height: 25.0,
          // merge multi RocketValue in one widget
              value: RocketValue.merge([myStringValue, myIntValue]),
              builder: () {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        onPressed: () {
          // change value
          myStringValue.v = "Value Changed";
          myIntValue.v = 2022;
        tooltip: 'change Value',
        child: const Icon(Icons.change_circle),

State management & request

firstly you need to create your model by your json data from this Link you get something like this:

import 'package:flutter_rocket/flutter_rocket.dart';

String postUserIdField = "userId";
String postIdField = "id";
String postTitleField = "title";
String postBodyField = "body";

class Post extends RocketModel<Post> {
  int? userId;
  int? id;
  String? title;
  String? body;
  // disable logs debugging
  bool get enableDebug => false;

  void fromJson(covariant Map<String, dynamic> json, {bool isSub = false}) {
    userId = json[postUserIdField] ?? userId;
    id = json[postIdField] ?? id;
    title = json[postTitleField] ?? title;
    body = json[postBodyField] ?? body;
    super.fromJson(json, isSub: isSub);

  void updateFields({
    int? userIdField,
    int? idField,
    String? titleField,
    String? bodyField,
  }) {
    userId = userIdField ?? userId;
    id = idField ?? id;
    title = titleField ?? title;
    body = bodyField ?? body;

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = {};
    data[postUserIdField] = userId;
    data[postIdField] = id;
    data[postTitleField] = title;
    data[postBodyField] = body;

    return data;

  get instance => Post();

Now second step create your RocketRequest in constructor or initState of first widget and pass url & headers

class MyApp extends StatelessWidget {
  MyApp() {
    const String baseUrl = 'https://jsonplaceholder.typicode.com';
    // create request object
    RocketRequest request = RocketRequest(url: baseUrl);
    // save it, for use it from any screen by key
    Rocket.add(rocketRequestKey, request);    

  Widget build(BuildContext context) {
    return MaterialApp(

Now create request method for post

import 'package:example/models/post_model.dart';
import 'package:flutter_rocket/flutter_rocket.dart';

const String postsEndpoint = "posts";

class GetPosts {
  static Future getPosts(Post postModel) =>
        // endpoint
        // your model
        model: postModel,
        // parameters for send it with request
        // params:{"key":"value"},
        // inspect method for determine exact json use for generate your model in first step
        // if your api send data directly without any supplement values you not should define it
        // inspect:(data)=>data["response"]
        // or
        // target: ['response']

Next step its build RocketView Widget & pass your RocketModel in model & RocketRequest method in call parameter

class PostExample extends StatelessWidget {
  // Save your model to use on another screen
  // readOnly means if you close and open this screen you will use same data without update it from Api
  // [rocket] is instance of Mccontroller injected in Object by extension for use it easily anywhere
  final Post post = Rocket.add<Post>(postsEndpoint, Post(), readOnly: true);

  PostExample({Key? key, required this.title}) : super(key: key);
  final String title;
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            "Refresh Posts with swip to down or from here =>",
            style: TextStyle(fontSize: 11.0),
          actions: [
                icon: const Icon(Icons.data_usage),
                // Refresh Data from Api
                onPressed: () => GetPosts.getPosts(post))
        body: SizedBox(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: RefreshIndicator(
              onRefresh: () {
                return GetPosts.getPosts(post);
              child: RocketView(
                // call api method
                call: () => GetPosts.getPosts(post),
                // your model generated
                model: post,
                // call call Voidcallback if model empty
                callType: CallType.callIfModelEmpty,
                // or
                // callType: CallType.callAsStream,
                // secondsOfStream: 1,
                // customized your loading (default widget is CircularProgressIndicator)
                // loader:CustomLoading(),

                // handle errors
                onError: (RocketException exception, Function() reload) {
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        if (exception.statusCode != HttpStatus.ok) ...[
                            onPressed: reload, child: const Text("retry"))
                builder: (context,state) {
                  return SizedBox(
                    height: MediaQuery.of(context).size.height * 0.852,
                    child: ListView.builder(
                      itemCount: post.all!.length,
                      itemBuilder: (BuildContext context, int index) {
                        // your data saved in multi list as Post model
                        Post currentPost = post.all![index];
                        return ListTile(
                            leading: Text(currentPost.id.toString()),
                            title: Text(currentPost.title!),
                            trailing: IconButton(
                              color: Colors.brown,
                              icon: const Icon(Icons.update),
                              onPressed: () {
                                List titles = post.all!
                                        include: ["title"], onlyValues: true)
                                    .map((e) => e[0])
                                // update post data
                                    titleField: "This Title changed");
                            onTap: () => Navigator.of(context).push(
                                      builder: (BuildContext context) {
                                    return Details(index);

class Details extends StatelessWidget {
  final int index;
  //  get your model by key or type
  final Post post = Rocket.get<Post>();
  Details(this.index, {Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    Post currentPost = post.all![index];
    return Scaffold(
      appBar: AppBar(title: Text(currentPost.title!)),
      body: Center(
        child: ListTile(
          leading: Text(currentPost.id.toString()),
          title: Text(currentPost.title!),
          subtitle: Text(currentPost.body!),

& last item its Rocket for save your model or any value and get it anywhere by key

Sure, here are the comments for each item, with an additional comment at the top:

# Add a value to the Rocket object with read-only access
Rocket.add(value, readOnly: true);

This code adds a value to the Rocket object and sets it to be read-only.

# Add a key-value pair to the Rocket object with a specified key and generic type
Rocket.add<Type>(value, key: "key");

This code adds a key-value pair to the Rocket object with a specified key and generic type.

# Get the value associated with the specified key and generic type

This code retrieves the value associated with the specified key and generic type from the Rocket object.

# Get the first value in the Rocket object with a specified generic type

This code retrieves the first value in the Rocket object with a specified generic type.

# Remove the key-value pair associated with the specified key from the Rocket object

This code removes the key-value pair associated with the specified key from the Rocket object.

# Remove all key-value pairs from the Rocket object for which the given function returns true

This code removes all key-value pairs from the Rocket object for which the given function returns true. The function checks if the key contains the substring "ke".

more details about Rocket

More examples

If you have any questions or issues, feel free to check out the Rocket Client GitHub repository or ask for help on the flutter_rocket package Discussions.