What is the purpose of child in Consumer Provider Flutter

Question

I have a question about Consumer, of Provider package, in Flutter. I don't understand the purpose of argument "child" in the builder of Consumer

Consumer<MyModel>(builder: (context, myModel, child) {
// doing stuff using myModel variable
});

I could not find any doc about it.

Answer 1

The child can be used as a part which does not rebuild when the provider value changes and the Consumer rebuilds.

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

final valueProvider = Provider<int>((ref) => 10);
final stateProvider = StateProvider<int>((ref) => 20);

void main() => runApp(ProviderScope(child: const MyApp()));

class MyApp extends StatelessWidget {
  static const title = 'Riverpod Test';
  const MyApp({Key? key}) : super(key: key);

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



class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),

      body: Center(
        child: Consumer(

          builder: (context, WidgetRef ref, child) {
            print(context);
            final value = ref.watch(valueProvider);
            final stateValue = ref.watch(stateProvider);

            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('$value, $stateValue'),
                Container(child: child),
                Builder(
                  builder: (context) {
                    print('$context child 2');
                    return Container(child: Text('Child 2'));
                  },
                ),
              ],
            );
          },

          child: Builder(
            builder: (context) {
              print('$context child 1');
              return Text('Child 1');
            },
          ),

        ),
      ),

      floatingActionButton: Consumer(
        builder: (_, WidgetRef ref, __) {
          return FloatingActionButton(
            onPressed: () {
              ref.read(stateProvider.state).state++;
            },
            child: Icon(Icons.add),
          );
        }
      ),
    );
  }
}

The child 2 is inside the Consumer widget and it rebuilds when you press + button. But child 1 never rebuilds

I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 1
I/flutter (16579): Builder(dirty) child 2
Reloaded 1 of 614 libraries in 1,176ms (compile: 80 ms, reload: 686 ms, reassemble: 299 ms).
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2
I/flutter (16579): Consumer(dirty, dependencies: [UncontrolledProviderScope], state: _ConsumerState#7620b)
I/flutter (16579): Builder(dirty) child 2