How to change a State of a StatefulWidget inside a StatelessWidget?

Question

Just testing out flutter. The code sample below is a very simple flutter app. The problem is that I don't know how to call the setState() function inside the TestTextState class in order to change the text each time when the change button is pressed.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Test app',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test"),
        ),
        body: new Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {

  final TestText testText = new TestText();

  void change() {
    testText.text == "original" ? testText.set("changed") : testText.set("original");
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: [
        testText,
        new RaisedButton(
            child: new Text("change"),
            onPressed: () => change(),
        ),
      ]
    );
  }
}

class TestText extends StatefulWidget {

  String text = "original";

  void set(String str) {
    this.text = str;
  }

  @override
  TestTextState createState() => new TestTextState();
}

class TestTextState extends State<TestText> {

  @override
  Widget build(BuildContext context) {
    return new Text(this.widget.text);
  }
}

Canberra

Answer 1

I have approached this problem by initializing the _TestTextState as the final property of the TestText widget which allows to simply update the state when the change button is pressed. It seems like a simple solution but I'm not sure whether it's a good practice.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Test app',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test"),
        ),
        body: new Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {

  final _TestText text = new _TestText();

  @override
  Widget build(BuildContext context) {
    return new Column(
        children: [
          text,
          new RaisedButton(
            child: new Text("change"),
            onPressed: () => text.update(),
          ),
        ]
    );
  }
}

class TestText extends StatefulWidget {

  final _TestTextState state = new _TestTextState();

  void update() {
    state.change();
  }

  @override
  _TestTextState createState() => state;
}

class _TestTextState extends State<TestText> {

  String text = "original";

  void change() {
    setState(() {
      this.text = this.text == "original" ? "changed" : "original";
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Text(this.text);
  }
}

Canberra

Answer 2

thier is no way to do so. any how you have to convert your StatelessWidget to StatefulWidget.

Karr

Thanks for your replay. So if I have several different pages in my app and all of them share the one dynamic text widget, does it mean that I have to convert all my screens to StatefulWidgets? How would it reflect the performance? – Canberra

Answer 3

Solution based on your existing code

class Test extends StatelessWidget {
  final StreamController<String> streamController = StreamController<String>.broadcast();

  @override
  Widget build(BuildContext context) {
    final TestText testText = TestText(streamController.stream);
    return new Column(children: [
      testText,
      new RaisedButton(
        child: Text("change"),
        onPressed: () {
          String text = testText.text == "original" ? "changed" : "original";
          streamController.add(text);
        },
      ),
    ]);
  }
}

class TestText extends StatefulWidget {
  TestText(this.stream);
  final Stream<String> stream;
  String text = "original";

  @override
  TestTextState createState() => new TestTextState();
}

class TestTextState extends State<TestText> {
  @override
  void initState() {
    widget.stream.listen((str) {
      setState(() {
        widget.text = str;
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Text(widget.text);
  }
}

But it's not the best idea - to use non-final field inside Stateful Widget

P.S. You can also use this - scoped_model

Adore

Thanks for the super fast response. Adding the StreamController seems like a good idea. How the solution with no non-final field would look like? Is that even possible? – Canberra

Store this field inside TestTextState, and inside listen check current value of text- for example. In this case you can send any data to stream - type doesn't matter – Adore