Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How can I use widget located in other page?

Issue

I need to know if I can use a widget from a previous page when navigating to the next page.

Resolution

Yes, it is possible to use the previous page's widget when navigating to the next page in some scenarios. One approach is to pass the widget's value or parameters as arguments to the next page's constructor.

For example, if you have a slider widget on the first page, and you want to display the slider's current value on the second page, you can pass the value as a parameter when navigating to the second page:

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(sliderValue: _sliderValue),
),
);

In this case, _sliderValue is the current value of the slider widget. The SecondPage constructor takes a named parameter called sliderValue, which is then used in the build method to display the value:

class SecondPage extends StatelessWidget {
final double sliderValue;

SecondPage({Key key, @required this.sliderValue}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: Text('Slider value is $sliderValue'),
),
);
}
}

This way, the SecondPage can access the value of the slider widget from the previous page.

Another approach is to use a state management approach such as Provider or Redux. With these approaches, you can share the data between multiple widgets or pages without passing it as constructor parameters. This is especially useful for large or complex applications where multiple pages need to access the same data.