如何在 MyApp 的构建方法中调用无状态小部件，其 state 由其有状态的父级管理

Question

I was following flutter tutorials for managing state of a widget from its parent on this link [https://flutter.dev/docs/development/ui/interactive#parent-managed][1] and i cant figure out how would call the widget in this case

Answer 1

it is very simple once you get the logic.

In practice, the parent (the "true" widget that you call), ie

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

is the one that you call wherever and whenever you want in the rest of the code.

Since this is a Stateful widget, it means that it has stated (to keep it simple, it will manage any changes on the UI). Any change will occur, It will be changing its state and so, this code:

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

Anyhow, once you use a Stateful widget, you change its state whenever you want to call the function

setState(() {
      oldValue= newValue;
    });

It will rebuild the entire widget changing the stuff you want (such as texts, images, widgets, and so on). In a non-proper way , consider it as a particular widget that can change its UI during the time.

Answer 2

• if you want to call it in MyApp's build method you will have to make MyApp a stateful widget so that it can manage the state of the said widget

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

//we make MyApp to be a stateful widget
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //we define the state which will be used in the widget here
  var myState = "something";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            //the data used by MyWidget is managed by MyApp which is a statefull widget.
            child: MyWidget(state: myState),
          ),
        ),
      ),
    );
  }
}

Or rather wrap your widget with another stateful widget which you will use in MyApp's build method

//we create a widget which will manage the state of its children class MyStateManagingWidget extends StatefulWidget {   @override  
_MyStateManagingWidgetState createState() => _MyStateManagingWidgetState(); }

class _MyStateManagingWidgetState extends State<MyStateManagingWidget> {   var myState = "some state";   @override   Widget build(BuildContext context) {
    //we put our widget who's state is to be managed here
    return MyWidget();   } }

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
              //we now use  the state managing widget here
              child: MyStateManagingWidget()),
        ),
      ),
    );   } }