Флаттер: как правильно управлять государством

Question

Я новичок, и у меня возникла проблема, связанная с stateManagement во флаттере. Я хочу сделать следующее: когда я нажимаю кнопку в классе виджетов с состоянием, тогда другой класс, который находится в другом файле, только простой класс, который содержит строку, эта строка должна быть изменена, и это не происходит для меня, пожалуйста, посмотрите оба класса.

это класс Values.dart, данные которого должны быть изменены

    class Values {
  String equation = '2+2';
  String result = '';
 double equationFontSize = 30;
 double resultFontSize = 25;

  }

это funtions.dart, который содержит виджет с состоянием!

`
import 'package:calculator/values.dart';
import 'package:flutter/material.dart';


class Functions extends StatefulWidget {
  @override
  _FunctionsState createState() => _FunctionsState();
}

class _FunctionsState extends State<Functions> {
  @override
  Widget build(BuildContext context) {
    Color bgColors = Colors.black87;
    return Row(
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width * 0.75,
          child: Table(
            border: TableBorder.all(
              color: Colors.white,
              width: .1,
            ),
            children: [
              TableRow(
                children: [
                  buildButton(bgColors: bgColors,color: Colors.white,text: 'C', height: 1.0,),
                  buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'+/-'),
                  buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'%'),
                ]
              ),

              TableRow(
                  children: [
                    buildButton(bgColors:bgColors,color:Colors.white,height: 1.0,text:'7'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'8'),
                    buildButton(bgColors:bgColors,color:Colors.white,height: 1.0,text:'9'),
                  ]
              ),
              TableRow(
                  children: [
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'4'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'5'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'6'),
                  ]
              ),
              TableRow(
                  children: [
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'1'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'2'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'3'),
                  ]
              ),
              TableRow(
                  children: [
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'0'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'.'),
                    buildButton(bgColors:bgColors,color:Colors.white, height:1.0,text:'del'),
                  ]
              ),
            ],
          ),
        ),

        Container(
          width: MediaQuery.of(context).size.width * 0.25,

         color:Colors.red,
         child: Table(
           border: TableBorder.all(
             color: Colors.white,
             width: .2,
           ),
           children: [
             TableRow(
                 children:[

                   buildButton(bgColors:Colors.deepPurpleAccent,color:Colors.black,height :0.8, text:'÷'),
                 ]
             ),
             TableRow(
                 children:[

                   buildButton(bgColors:Colors.deepPurpleAccent,color:Colors.black,height: 0.9, text:'×'),
                 ]
             ),
             TableRow(
                 children:[

                   buildButton(bgColors:Colors.deepPurpleAccent,color:Colors.black,height: 0.9, text:'-'),
                 ]
             ),
             TableRow(
                 children:[

                   buildButton(bgColors:Colors.deepPurpleAccent,color:Colors.black,height: 0.9,text: '+'),
                 ]
             ),
             TableRow(
               children:[

                 buildButton(bgColors:Colors.orange[300],color:Colors.black,height: 1.5, text:'='),
               ]
             ),

           ],
         ),
        )
      ],
    );
  }

}


  Values values = new Values();


class buildButton extends StatefulWidget {


  Color bgColors;
  Color color;
  String text;
double height;
buildButton({this.color,this.height,this.text,this.bgColors});
  @override

  _buildButtonState createState() => _buildButtonState();
}

class _buildButtonState extends State<buildButton> {


  @override



  Widget build(BuildContext context) {
    return  Container(
      color:widget.bgColors,
      height: MediaQuery.of(context).size.height * 0.1 * widget.height,
      child: FlatButton(


        onPressed: (){
       setState(() {
          values.result = 'hello functions';
          print(values.result);
          print('pressed');
       });
        },
        child: Text(
          widget.text,
          style: TextStyle(
            fontSize: 25,
            color:widget.color,
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
    );
  }
}



`

Answer 1

Вы можете скопировать и вставить полный код ниже
Вы можете определить callback(refresh) в родительском виджете (MyHomePage)
Эта функция callback(refresh) выполнит setState
, затем вы можете передать это callback для дочернего виджета Functions и buildButton

фрагмент кода

class buildButton extends StatefulWidget {
      ...
      Function callback;

      buildButton(
          {this.color, this.height, this.text, this.bgColors, this.callback});

...       
buildButton(
                      bgColors: bgColors,
                      color: Colors.white,
                      text: 'C',
                      height: 1.0,
                      callback: widget.callback,
                    )
...                 
onPressed: () {
              setState(() {
                values.result = 'hello functions';
                print(values.result);
                print('pressed');
              });
              widget.callback();
            }                   

//MyHomePage
refresh() {
        setState(() {});
      }                 
...
Expanded(
                    child: Functions(
                  callback: refresh,
                ))                  

рабочая демонстрация

полный код

import 'package:flutter/material.dart';

class Values {
  String equation = '2+2';
  String result = '';
  double equationFontSize = 30;
  double resultFontSize = 25;
}

class Functions extends StatefulWidget {
  VoidCallback callback;
  Functions({this.callback});

  @override
  _FunctionsState createState() => _FunctionsState();
}

class _FunctionsState extends State<Functions> {
  @override
  Widget build(BuildContext context) {
    Color bgColors = Colors.black87;
    return Row(
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width * 0.75,
          child: Table(
            border: TableBorder.all(
              color: Colors.white,
              width: .1,
            ),
            children: [
              TableRow(children: [
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  text: 'C',
                  height: 1.0,
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '+/-',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '%',
                  callback: widget.callback,
                ),
              ]),
              TableRow(children: [
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '7',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '8',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '9',
                  callback: widget.callback,
                ),
              ]),
              TableRow(children: [
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '4',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '5',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '6',
                  callback: widget.callback,
                ),
              ]),
              TableRow(children: [
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '1',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '2',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '3',
                  callback: widget.callback,
                ),
              ]),
              TableRow(children: [
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '0',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: '.',
                  callback: widget.callback,
                ),
                buildButton(
                  bgColors: bgColors,
                  color: Colors.white,
                  height: 1.0,
                  text: 'del',
                  callback: widget.callback,
                ),
              ]),
            ],
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width * 0.25,
          color: Colors.red,
          child: Table(
            border: TableBorder.all(
              color: Colors.white,
              width: .2,
            ),
            children: [
              TableRow(children: [
                buildButton(
                    bgColors: Colors.deepPurpleAccent,
                    color: Colors.black,
                    height: 0.8,
                    text: '÷'),
              ]),
              TableRow(children: [
                buildButton(
                    bgColors: Colors.deepPurpleAccent,
                    color: Colors.black,
                    height: 0.9,
                    text: '×'),
              ]),
              TableRow(children: [
                buildButton(
                    bgColors: Colors.deepPurpleAccent,
                    color: Colors.black,
                    height: 0.9,
                    text: '-'),
              ]),
              TableRow(children: [
                buildButton(
                    bgColors: Colors.deepPurpleAccent,
                    color: Colors.black,
                    height: 0.9,
                    text: '+'),
              ]),
              TableRow(children: [
                buildButton(
                    bgColors: Colors.orange[300],
                    color: Colors.black,
                    height: 1.5,
                    text: '='),
              ]),
            ],
          ),
        )
      ],
    );
  }
}

Values values = new Values();

class buildButton extends StatefulWidget {
  Color bgColors;
  Color color;
  String text;
  double height;
  Function callback;

  buildButton(
      {this.color, this.height, this.text, this.bgColors, this.callback});
  @override
  _buildButtonState createState() => _buildButtonState();
}

class _buildButtonState extends State<buildButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.bgColors,
      height: MediaQuery.of(context).size.height * 0.1 * widget.height,
      child: FlatButton(
        onPressed: () {
          setState(() {
            values.result = 'hello functions';
            print(values.result);
            print('pressed');
          });
          widget.callback();
        },
        child: Text(
          widget.text,
          style: TextStyle(
            fontSize: 25,
            color: widget.color,
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    print(values.result);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(' Result ${values.result}'),
            Expanded(
                child: Functions(
              callback: refresh,
            )),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}