Counter App Using Provider in Android Studio

Creating a simple Counter App with Provider state management is one of the best ways to learn state handling in Flutter. This tutorial will guide you step-by-step using Android Studio to build a counter app that uses the Provider package, one of the most popular and efficient solutions for managing app state in Flutter.

Provider is recommended by the Flutter team and is often used in production-level applications for its simplicity and reactivity.

Step-by-step Guide to Build Counter App Using Provider

1. Create a New Flutter Project

Open Android Studio and create a new Flutter project. Give it a name like provider_counter_app.

2. Add Provider Dependency

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.0

Then click “Pub get” to install the dependency.

3. Create a Counter Model

Create a new file counter.dart inside the lib folder:

import 'package:flutter/foundation.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

4. Set Up Provider in main.dart

Edit main.dart like this:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(title: const Text("Provider Counter")),
      body: Center(
        child: Text(
          '${counter.count}',
          style: const TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

5. Run the App

Now, run the app using a physical device or emulator. Tapping the button increases the count thanks to the reactive power of Provider.

Conclusion

This simple example shows how Flutter and Provider work together for effective and clean state management. With Provider, you avoid using setState() and make your app more modular and testable. For more complex apps, this pattern scales easily and supports deeper architecture like MVVM or Clean Architecture.

Want to dive deeper into Provider patterns? Check out this official Flutter Provider documentation to explore advanced usage.