content: // ignore_for_file: use_key_in_widget_constructors, avoid_print
  
  import 'package:flutter/material.dart';
  import 'package:flutter_riverpod/flutter_riverpod.dart';
  import 'package:flutter_riverpod/legacy.dart';
  
  /* SNIPPET START */
  
  // A basic logger, which logs any state changes.
  final class Logger extends ProviderObserver {
    @override
    void didUpdateProvider(
      ProviderObserverContext context,
      Object? previousValue,
      Object? newValue,
    ) {
      print('''
  {
    "provider": "${context.provider}",
    "newValue": "$newValue",
    "mutation": "${context.mutation}"
  }''');
    }
  }
  
  void main() {
    runApp(
      ProviderScope(
        // ProviderObservers are used by passing them to ProviderScope/ProviderContainer
        observers: [
          // Adding ProviderScope enables Riverpod for the entire project
          // Adding our Logger to the list of observers
          Logger(),
        ],
        child: const MyApp(),
      ),
    );
  }
  
  // After this, implement a typical Flutter application
  /* SNIPPET END */
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(home: Home());
    }
  }
  
  final counterProvider = StateProvider((ref) => 0, name: 'counter');
  
  class Home extends ConsumerWidget {
    @override
    Widget build(BuildContext context, WidgetRef ref) {
      final count = ref.watch(counterProvider);
  
      return Scaffold(
        appBar: AppBar(title: const Text('Counter example')),
        body: Center(
          child: Text('$count'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => ref.read(counterProvider.notifier).state++,
          child: const Icon(Icons.add),
        ),
      );
    }
  }
  