dynamo_state_flow 1.0.0

A lightweight, customizable, and interactive state flow / workflow stepper widget for Flutter applications.

example/lib/main.dart

import 'package:dynamo_state_flow/dynamo/project/commons/system/handlers/dynamo_commons.dart';
import 'package:dynamo_state_flow/dynamo/project/commons/views/dynamo_state_flow.dart';
import 'package:dynamo_state_flow/dynamo/project/commons/views/table_widget_commons.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamo State Flow Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool showStateLabel = false;
  int showStateFlag = 1;

  int allWorkflowSteps = 8;
  int selectedStep = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamo State Flow Demo'),
        centerTitle: true,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(65.0),
          child: Container(
            padding: const EdgeInsets.only(top: 10, bottom: 20),
            child: DropdownButton<int>(
              value: showStateFlag,
              icon: const Icon(Icons.label, color: Colors.deepPurple),
              underline: const SizedBox.shrink(),
              onChanged: (int? newValue) {
                showStateFlag = newValue ?? 1;

                if (showStateFlag == 1) {
                  showStateLabel = false;
                } else {
                  showStateLabel = true;
                }

                setState(() {});
              },
              items: const [
                DropdownMenuItem(
                  value: 1,
                  child: Text("Hide State Label"),
                ),
                DropdownMenuItem(
                  value: 2,
                  child: Text("Hide State Label"),
                ),
              ],
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 40),
            child: Column(
              children: <Widget>[
                DynamoStateFlow(
                  allSteps: allWorkflowSteps,
                  isHorizontal: true,
                  index: selectedStep,
                  visibleCount: DynamoCommons.isMobile(context) ? 4 : 6,
                  showLabelMode: showStateLabel,
                  findActionStepBySystemStepNo: (int index) {
                    switch (index) {
                      case 1:
                        return "New";
                      case 2:
                        return "Documents";
                      case 3:
                        return "Approval";
                      case 4:
                        return "Invoice";
                      case 5:
                        return "Payment";
                      case 6:
                        return "Packaging";
                      case 7:
                        return "GIT";
                      case 8:
                        return "Delivery";
                    }
                  },
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TableWidgetCommons.getFineRoundedButton(
                      'Prev',
                          () {
                        if (selectedStep > 1) {
                          selectedStep--;
                        }

                        setState(() {});
                      },
                      Icon(Icons.arrow_back, color: Colors.indigo),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    TableWidgetCommons.getFineRoundedButton(
                      'Next',
                          () {
                        if (selectedStep < allWorkflowSteps) {
                          selectedStep++;
                        }

                        setState(() {});
                      },
                      Icon(Icons.arrow_forward, color: Colors.indigo),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}