将字符串值从一个有状态小部件更改为另一个有状态小部件

Question

I have a Stateful widget:

class PractiseInterview extends StatefulWidget {
  @override
  _PractiseInterviewState createState() => _PractiseInterviewState();
}

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText,         //**outputText is here**  
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    ChnageText(text: 'changed',),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

NOTICE that my outputText = '0' here.

Then I have a stateless widget for my OutlineButton in stateful widget:

class ChnageText extends StatelessWidget {
  const ChnageText({ this.text});
  final String text;

  buttonPressed(String text) {
    if (text == 'changed') {
      //TODO: change outputText value to 'changed' at the click of this button
    }
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: OutlineButton(
        onPressed: () {
          buttonPressed(text);
        },
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

I have mentioned TODO in my stateless widget, there at the click of the button I want to change outputText = '0' to outputText = 'changed' . I don't know how to do this

I am new to flutter and I am not able to understand this. Basically I am making a calculator where when a button is clicked, then the value of the button should be displayed.

Answer 1

Pass a callback to ChnageText from the parent that changes outputText and calls setState .

class ChnageText extends StatelessWidget {
  const ChnageText({this.text, this.callback});
  final String text;
  final VoidCallback callback;

  buttonPressed(String text) {
    if (text == 'changed') {
      callback();//Call callback here
    }
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: OutlineButton(
        onPressed: () {
          buttonPressed(text);
        },
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText,         //**outputText is here**  
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    ChnageText(text: 'changed', callback: () {setState((){outputText = 'changed';});}),// Pass callback here
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Ideally, you wouldn't have to do this at all. What's in ChnageText doesn't need to be in its own StatelessWidget . Putting all of that directly in the parent removes this problem.

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  buttonPressed(String text) {
    if (text == 'changed') {
      setState(() {
        outputText = 'changed';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText, //**outputText is here**
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    //Put ChnageText directly into the build of the parent
                    Expanded(
                      child: OutlineButton(
                        onPressed: () {
                          buttonPressed('changed');
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(24.0),
                          child: Text(
                            'changed',
                            style: TextStyle(
                              fontSize: 15.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}