Widget will not rebuild when listening to the value of Flutter Provider exposed

Question

In my code I will use Provider.value to expose a value to MyHomePage ,at the same time ,the MyHomePage will use Provider to get the value with the listen set to true,If i change the value outside , the MyHomePage will not rebuild , seems the listenning not working .

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

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

int _counter = 0;

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Provider.value(
        value: _counter,
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  void _incrementCounter() {
    _counter++;
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    int value = Provider.of<int>(
      context,
      listen: true,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('123'),
      ),
      body: Center(
        child: Text('value:${value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 1

You need to use a model that would notify its listeners if you want your widgets to rebuild. Provider has no way to know you incremented _counted.

Do those code changes to use ValueNotifier<int> instead of int (you will also need to replace Provider with ChangeNotifierProvider):

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

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

final _counter = ValueNotifier<int>(0); // <- Here

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider.value(
        value: _counter,
        child: MyHomePage(),
      ),

    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  void _incrementCounter() {
    _counter.value++;
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    int value = Provider.of<ValueNotifier<int>>(
      context,
      listen: true,
    ).value;
    return Scaffold(
      appBar: AppBar(
        title: Text('123'),
      ),
      body: Center(
        child: Text('value:${value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

It would be better to not use a static global variable and ChangeNotifierProvider.value but ChangeNotifierProvider.new instead.

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

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


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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Here:
      home: ChangeNotifierProvider(
        create: (context) => ValueNotifier<int>(0),
        child: MyHomePage(),
      ),

    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  void _incrementCounter(BuildContext context) {
    context.read<ValueNotifier<int>>().value++;
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    int value = Provider.of<ValueNotifier<int>>(
      context,
      listen: true,
    ).value;
    return Scaffold(
      appBar: AppBar(
        title: Text('123'),
      ),
      body: Center(
        child: Text('value:${value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}