june 0.8.3

June is a lightweight and modern state management library that focuses on providing a pattern very similar to Flutter's native state management.

June

The main reason you need a state management library in Flutter is because managing state changes or sharing states from the outside is difficult with the native Flutter state management. However, many state management libraries deviate from their original purpose and end up containing much more code, attempting to control the app development pattern itself. We need a state management library that stays true to its original purpose without straying too far from the native Flutter state management.

June is a lightweight and modern state management library that focuses on providing a pattern very similar to Flutter's native state management.

Features

• ✨ Native Flutter State Pattern: By adopting the native Flutter state management pattern, you can declare variables and manage them with setState, facilitating an easy transition to app-level scalability.
• 🦄 No Widget Modification Required: Use MaterialApp, StatelessWidget, and StatefulWidget as is, with no changes needed for enhanced state management.
• 🚀 No State Initialization: Simplifies Flutter app development by automatically setting up state management, eliminating manual initialization, and reducing boilerplate. This approach ensures a cleaner, more maintainable codebase and a quicker start to development.
• 🌐 Compatibility with Various Architectures: Maintains a simple and flexible usage, facilitating effortless integration with a wide range of architectural patterns. This approach ensures that developers can adapt it easily to their specific project requirements, promoting versatility and ease of use across diverse project scales.

Usage

1. Declare the states.

class CounterVM extends JuneState {
  int count = 0;
}

2. The state management wraps the widget to be managed with JuneBuilder.(You can place it in multiple locations.)

JuneBuilder(
  () => CounterVM(),
  builder: (vm) => Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('${vm.count}'
      ),
    ],
  ),
)

3. Update the states using the setState method.

// You can call state from anywhere.
var state = June.getState(CounterVM());
state.count++;

state.setState();

4. That's All!

Example

import 'package:flutter/material.dart';
import 'package:june/june.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: JuneBuilder(
            () => CounterVM(),
            builder: (vm) => Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('You have pushed the button this many times:'),
                Text(
                  '${vm.count}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: const FloatingActionButton(
          onPressed: incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

void incrementCounter() {
  // You can call state from anywhere.
  var state = June.getState(CounterVM());
  state.count++;

  state.setState();
}

class CounterVM extends JuneState {
  int count = 0;
}

or, you can include actions when declaring a State.

import 'package:flutter/material.dart';
import 'package:june/june.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: JuneBuilder(
                () => CounterVM(),
            builder: (vm) =>
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text('You have pushed the button this many times:'),
                    Text(
                      '${vm.count}',
                      style: Theme
                          .of(context)
                          .textTheme
                          .headlineMedium,
                    ),
                  ],
                ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // This way, you can call a function inside the model.
            June.getState(CounterVM()).incrementCounter();
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterVM extends JuneState {
  int count = 0;

  // You can also create actions inside the model.
  incrementCounter() {
    count++;
    setState();
  }
}

Advance

Object State Management

June offers the ability to create multiple instances of declared states as objects. This feature is extremely useful for managing different data in repetitive formats, such as feed content.

Simply add a tag to JuneBuilder and June.getState to utilize this functionality.

Example

import 'package:flutter/material.dart';
import 'package:june/june.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              JuneBuilder(
                    () => CounterVM(),
                builder: (vm) => Column(
                  children: [
                    const Text('Basic instance counter'),
                    Text(
                      '${vm.count}',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                  ],
                ),
              ),
              JuneBuilder(
                    () => CounterVM(),
                tag: "SomeId",
                builder: (vm) => Column(
                  children: [
                    const Text('Object instance counter created with tags'),
                    Text(
                      '${vm.count}',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: const Stack(
          children: <Widget>[
            Positioned(
                right: 0,
                bottom: 80,
                child: FloatingActionButton.extended(
                    onPressed: increaseBasicInstance, label: Text("Increase basic instance"))),
            Positioned(
                right: 0,
                bottom: 10,
                child: FloatingActionButton.extended(
                    onPressed: increaseObjectInstanceCreatedWithTags, label: Text("Increase object instance created with tags"))),
          ],
        ),
      ),
    );
  }
}

void increaseBasicInstance() {
  var state = June.getState(CounterVM());
  state.count++;
  state.setState();
}

void increaseObjectInstanceCreatedWithTags() {
  var state = June.getState(CounterVM(), tag: "SomeId");
  state.count++;
  state.setState();
}

class CounterVM extends JuneState {
  int count = 0;
}