トグルボタンを押下した際に別のウィジェットも変更したい

Question

前提・実現したいこと

トグルボタンを押下した際に別のウィジェットも変更したい
（今回でいうとテキスト）

発生している問題

トグルボタンの関数の中で変数を変更してテキストを変更しようとしたができない

該当のソースコード

import 'package:flutter/material.dart';

int br = 0;

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
            children: [
              _ToggledButton(),
              _Text(),
            ],
        ),
      ),
    );
  }
}

class _ToggledButton extends StatefulWidget {
  const _ToggledButton({Key? key}) : super(key: key);

  @override
  State<_ToggledButton> createState() => _ToggledButtonState();
}

class _ToggledButtonState extends State<_ToggledButton> {
  List<bool> selected = [true,false];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ToggleButtons(
        selectedColor: Colors.red,
        children: [
          Text('赤'),
          Text('青'),
        ],
        isSelected:selected,
        onPressed: (index){
          setState(() {
            if (index==0){
              selected[0] = true;
              selected[1] = false;
              br=1;
            }else{
              selected[0] = false;
              selected[1] = true;
              br=0;
            }

          });
        },
      ),
    );
  }
}

class _Text extends StatefulWidget {
  const _Text({Key? key}) : super(key: key);

  @override
  State<_Text> createState() => _TextState();
}

class _TextState extends State<_Text> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SelectCol(),
    );
  }

  Widget SelectCol(){
    if (br==0){
      return Text('青');
    }else{
      return Text('赤');
    }
  }

}

試したこと

MaterialAppのhomeにprovider？というものを使ってトライしてみましたが自分では解決できませんでした
ご教授いただきますとありがたいです

Answer 1

Provider+ChangeNotifier版です。

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

class ToggleStateNotifier extends ChangeNotifier {
  List<bool> selected = [true, false];

  void setToggleState(int index) {
    if (index == 0) {
      selected[0] = true;
      selected[1] = false;
    } else {
      selected[0] = false;
      selected[1] = true;
    }
    notifyListeners();
  }

  String get selectedColorString {
    return selected[0] ? '赤赤' : '青青';
  }
}


void main() {
  runApp(
    ChangeNotifierProvider<ToggleStateNotifier>(
      create: (_) => ToggleStateNotifier(),
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    ToggleStateNotifier toggleStateNotifier = Provider.of<ToggleStateNotifier>(context,);
    List<bool> selected = toggleStateNotifier.selected;

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('$selected'),
            _ToggledButton(),
            _Text(),
          ],
        ),
      ),
    );
  }
}

class _ToggledButton extends StatelessWidget {
  _ToggledButton({Key? key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    ToggleStateNotifier toggleStateNotifier = Provider.of<ToggleStateNotifier>(context,);

    return Container(
      child: ToggleButtons(
        selectedColor: Colors.red,
        children: [
          Text('赤赤'),
          Text('青青'),
        ],
        isSelected: toggleStateNotifier.selected,
        onPressed: (index) {
          toggleStateNotifier.setToggleState(index);
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    ToggleStateNotifier toggleStateNotifier = Provider.of<ToggleStateNotifier>(context,);
    String selectedColorString = toggleStateNotifier.selectedColorString;

    return Container(
      child: Text(selectedColorString),
    );
  }
}

Comments

[zisinnasi]

回答ありがとうございます
今の自分では理解できない部分が多々あるので勉強させていただきます

Answer 2

期待する具体的な挙動がはっきりわからないですが、多分これでしょうか。
グローバル変数で複数ウィジェットの状態を管理しようとするのはやめた方が良いと思います。
コードが読みにくくなりますし、エラーが発生しやすくなると思います。
https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro
ここら辺を一通り読めばStatefulWidget/setStateを使った状態管理はできるようになると思います。
この場合_ToggledButtonの状態を_Textでも共有したい(_Textにも反映させたい)ので、両者に共通の親(MyApp)に状態を保持させるのがセオリーかと思います。
と言ってもこれくらいのアプリでもコードが複雑になるので、(学習目的以外では)やはり状態管理用パッケージを使うのが一般的かと思います。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<bool> selected = [true,false];

  void setNewValueOfParentSelected(List<bool> selected){
    setState((){
      this.selected = selected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('$selected'),
            _ToggledButton(
              selected:selected,
              setStateCallback: setNewValueOfParentSelected,
            ),
            _Text(selectedColorString: selected[0] ? '赤' : '青',),
          ],
        ),
      ),
    );
  }
}

class _ToggledButton extends StatefulWidget {
  _ToggledButton({
    Key? key,
    required this.selected,
    required this.setStateCallback,
  }) : super(key: key);

  List<bool> selected;
  void Function(List<bool>) setStateCallback;

  @override
  State<_ToggledButton> createState() => _ToggledButtonState();
}

class _ToggledButtonState extends State<_ToggledButton> {
  late List<bool> selected;

  @override
  void initState(){
    super.initState();
    selected = widget.selected;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ToggleButtons(
        selectedColor: Colors.red,
        children: [
          Text('赤'),
          Text('青'),
        ],
        isSelected:selected,
        onPressed: (index){
          setState(() {
            if (index==0){
              selected[0] = true;
              selected[1] = false;
            }else{
              selected[0] = false;
              selected[1] = true;
            }
            widget.setStateCallback(selected);
          });
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(selectedColorString),
    );
  }
}