Passing Data to a Stateful Widget in Flutter

Question

I'm wondering what the recommended way of passing data to a stateful widget, while creating it, is.

The two styles I've seen are:

class ServerInfo extends StatefulWidget {

  Server _server;

  ServerInfo(Server server) {
    this._server = server;
  }

  @override
    State<StatefulWidget> createState() => new _ServerInfoState(_server);
}

class _ServerInfoState extends State<ServerInfo> {
  Server _server;

  _ServerInfoState(Server server) {
    this._server = server;
  }
}

This method keeps a value both in ServerInfo and _ServerInfoState, which seems a bit wasteful.

The other method is to use widget._server:

class ServerInfo extends StatefulWidget {

  Server _server;

  ServerInfo(Server server) {
    this._server = server;
  }

  @override
    State<StatefulWidget> createState() => new _ServerInfoState();
}

class _ServerInfoState extends State<ServerInfo> {
  @override
    Widget build(BuildContext context) {
      widget._server = "10"; // Do something we the server value
      return null;
    }
}

This seems a bit backwards as the state is no longer stored in _ServerInfoSate but instead in the widget.

Is there a best practice for this?

Answer 1

The recommended way of passing data to a stateful widget is by using the constructor of the widget to initialize the data and then accessing it via the widget object in the state object.

So, your first example is the recommended approach. It is efficient and follows the standard pattern for passing data in Flutter. The value is stored in the stateful widget and passed to the state object via the constructor.

Here's an example of how to pass data to a stateful widget using the constructor:

class ServerInfo extends StatefulWidget {
  final Server server;

  ServerInfo({Key? key, required this.server}) : super(key: key);

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

class _ServerInfoState extends State<ServerInfo> {
  @override
  Widget build(BuildContext context) {
    // Access widget.server to use the server data
    return Container();
  }
}

In the above example, the data is passed through the constructor of the ServerInfo widget and stored in the server field. This data is then accessed via the widget object in the state object.

Note that you can also pass a key to the stateful widget constructor for more efficient widget updates, but that is not relevant to the question asked.

To know more, join our Flutter Course today.