Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
  }
}
like image 408
Jakub Avatar asked Oct 22 '18 13:10

Jakub


People also ask

How do you change stateful to stateless?

To do so, just select the stateless or stateful widget and press Alt+Enter (for both Mac and Windows). A pop-up menu will appear. Choose the Convert to option to convert the widget from stateful to stateless or vice versa.

How do I change the state of my child from parent Flutter?

You can create the field counter in the parent and pass it down to the child widget and update the child widget from the parent.

Can you have a stateful widget inside a stateless widget?

when we update the state of the Stateful widget it will re-run its build function, when a stateless widget is part of that build function, flutter will check if its input data has changed or not, if not it will return the same instance of the widget, if it's changed then it will create another instance from the ...


2 Answers

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);
  }
}
like image 61
Jakub Avatar answered Nov 01 '22 09:11

Jakub


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

like image 25
Viren V Varasadiya Avatar answered Nov 01 '22 07:11

Viren V Varasadiya