Riverpod Select Test

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

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'riverpod test',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: APage(),
    );
  }
}

class APage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, ref, child) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Riverpod .select() Test"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Consumer(
                  builder: (context, ref, child) {
                    final color = ref.watch(colorProviderState.select((value) => value.one));
                    return Container(
                      color: color,
                      child: SizedBox(width: 50.0, height: 50.0),
                    );
                  },
                ),
                SizedBox(width: 15.0),
                Consumer(
                  builder: (context, ref, child) {
                    final color = ref.watch(colorProviderState.select((value) => value.two));
                    return Container(
                      color: color,
                      child: SizedBox(width: 50.0, height: 50.0),
                    );
                  },
                ),
              ],
            ),
            SizedBox(height: 25.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    ref.read(colorProviderState.notifier).changeOne();
                  },
                  child: Icon(Icons.login),
                ),
                SizedBox(width: 15.0),
                ElevatedButton(
                  onPressed: () {
                    ref.read(colorProviderState.notifier).changeTwo();
                  },
                  child: Icon(Icons.delete),
                ),
              ],
            ),
          ],
        ),
      );
    });
  }
}

final colorProviderState = StateNotifierProvider((ref) => ColorManagerState());

class ColorManagerState extends StateNotifier<MyColors> {
  ColorManagerState() : super(MyColors());
  MyColors myColors = MyColors();

  void changeOne() {
    print("State one: ${myColors.one}");
    myColors.one = Colors.cyan;
    print("State one: ${myColors.one}");
  }

  void changeTwo() {
    print("State one: ${myColors.two}");
    myColors.two = Colors.green;
    print("State one: ${myColors.two}");
  }
}

class MyColors {
  Color _one = Colors.black;
  Color _two = Colors.black;

  Color get one => _one;
  Color get two => _two;
  set one(Color newClr) => newClr;
  set two(Color newClr) => newClr;
}

// ------------------------------------------------
// ------------------------------------------------
// ------------------------------------------------

final colorProviderChange = ChangeNotifierProvider((ref) => ColorManagerChange());

class ColorManagerChange extends ChangeNotifier {
  Color _one = Colors.black;
  Color _two = Colors.black;

  Color get one => _one;
  Color get two => _two;

  void changeOne() {
    print("Change one: $_one");
    _one = Colors.yellow;
    print("Change one: $_one");
  }

  void changeTwo() {
    print("Change two: $_two");
    _two = Colors.pink;
    print("Change two: $_two");
  }
}