ngex 0.0.6

Effortless state management for Flutter apps. Simplify your workflow and enhance user experience.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:ngex/ngex.dart';
import './controller.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ctrl = AppController();

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

  @override
  void dispose() {
    super.dispose();
    ctrl.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Ngex State Management Example'),
          actions: [
            ElevatedButton(
              onPressed: () => ctrl.reset(),
              child: const Icon(Icons.plus_one),
            )
          ],
        ),
        body: ListView(
          children: [
            Container(
              padding: const EdgeInsets.all(40),
              alignment: Alignment.center,
              child: StoreBuilder(
                value: ctrl.counter,
                builder: (context, state) => Text(
                  state.value.toString(),
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            StoreBuilder(
              value: ctrl.list,
              builder: (context, state) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: state.value.length,
                    itemBuilder: (context, i) {
                      return GestureDetector(
                        onTap: () => ctrl.increment(),
                        child: Container(
                          height: 80,
                          color: ctrl.randomColor(),
                          child: Container(
                            alignment: Alignment.center,
                            child: Text(state.value[i].toString()),
                          ),
                        ),
                      );
                    });
              },
            )
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => ctrl.addElement(),
          backgroundColor: ctrl.randomColor(),
          child: const Icon(Icons.navigation),
        ),
      ),
    );
  }
}