Simple State Management in Dart (No Packages)

Managing state in a Flutter application doesn’t always require third-party packages like Provider, Riverpod, or Bloc. Dart’s built-in features such as StatefulWidget and setState() are powerful enough for many use cases. In this tutorial, you’ll learn how to manage simple UI state without any external dependencies using only core Flutter capabilities. This approach is ideal for small projects, beginners, or quick prototypes.

This guide is compatible with Android Studio and assumes you have Flutter and Dart already installed. If not, follow this official Flutter installation guide first.

Step-by-Step Code Example

main.dart

import 'package:flutter/material.dart';

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

my_app.dart

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple State Management',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // State is updated here
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0; // Reset state to 0
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple State Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pressed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _resetCounter,
              child: const Text('Reset'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Explanation

• We use StatefulWidget for HomePage to track the value of _counter.
• The setState() function is used to notify the framework that the internal state has changed.
• All logic is self-contained in the widget, reducing complexity and dependencies.

This approach works great for small apps and is easy to maintain. For larger or more complex apps, using structured state management packages might be more suitable.