Provider in Flutter

Create Free Backend With Appwrite

Provider in Flutter

The Provider package is a recommended way to manage state in Flutter applications. It simplifies data flow in your app and makes it more manageable and scalable. Provider allows for efficient and scalable state management, making it easier to share state across different parts of your Flutter application.

Why Use Provider?

  • Simplicity: Provider simplifies state management in Flutter, making it more readable and maintainable.
  • Scalability: It supports scalable architecture, making it suitable for small to large applications.
  • Performance: Provider is optimized for performance, ensuring minimal rebuilds.

Example 1: Counter App Using Provider

In this example below, you will learn to create a simple counter app using Provider.

Step 1: Setup Provider

First, add the Provider package to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: 'flutter'
  provider: '^5.0.0'

or

flutter pub add provider

Step 2: Create a Counter Model

Define a model class for your counter logic.

import 'package:flutter/foundation.dart';

class Counter extends ChangeNotifier {
 int _count = 0;

 int get count => _count;

 void increment() {
   _count++;
   notifyListeners();
 }
}
Step 3: Use Provider in Your App

Wrap your app or widget with a ChangeNotifierProvider to provide the counter model.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Provider Counter App'),
      ),
      body: Center(
        child: Text('Counter: ${counter.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
Run Online

Challenge

Add a decrement button to the counter app and implement the logic to decrement the counter value.

Example 2: Todo App Using Provider

In this example, you will learn to create a simple todo app using Provider.

Step 1: Create a Todo Model

Define a model class for your todo logic.

import 'package:flutter/foundation.dart';

class Todo extends ChangeNotifier {
  List<String> _todos = [];

  List<String> get todos => _todos;

  void add(String todo) {
    _todos.add(todo);
    notifyListeners();
  }

  void remove(String todo) {
    _todos.remove(todo);
    notifyListeners();
  }
}

Step 2: Use Provider in Your App

Wrap your app or widget with a ChangeNotifierProvider to provide the todo model.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Todo(),
      child: MaterialApp(
        home: TodoPage(),
      ),
    );
  }
}

class TodoPage extends StatelessWidget {
  const TodoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final todo = Provider.of<Todo>(context);
    TextEditingController todoController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Provider Todo App'),
      ),
      body: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              labelText: 'Type todo and hit enter',
              contentPadding: EdgeInsets.all(10),
            ),
            controller: todoController,
            onSubmitted: (value) {
              todo.add(value);
              todoController.clear();
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: todo.todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(todo.todos[index]),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () {
                      todo.remove(todo.todos[index]);
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
Run Online

Challenge

Add edit functionality to the todo app. When a user taps on a todo item, it should be editable.