Flutter: How to pass data between widgets

Building complex and dynamic apps in Flutter often requires passing data between different widgets. If you're new to Flutter, you might be wondering how to accomplish this task. In this tutorial, I'll show you how to pass data between widgets in Flutter using a variety of methods, including stateful widgets, global state management, and using callback functions. You'll learn how to share data between different parts of your app, even when they're not directly related. Whether you're building a simple app or a complex one, understanding how to pass data between widgets is essential for creating a seamless user experience. This tutorial is perfect for developers of all levels who want to improve their Flutter skills and build better apps.

In Flutter, you can pass data between widgets using a combination of widget properties, callbacks and state management. Here are the three most common ways:

1. Pass data via widget properties: You can pass data from a parent widget to a child widget via properties. Here's an example:

	class ChildWidget extends StatelessWidget {
	final String data;
	ChildWidget({Key key, this.data}) : super(key: key);
	@override
	Widget build(BuildContext context) {
	return Text(data);
	}
	}
	class ParentWidget extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return ChildWidget(data: 'This is the data');
	}
	}

view raw data-via-widget-property.dart hosted with ❤ by GitHub

2. Pass data via callbacks: You can pass a callback function from a parent widget to a child widget and then call it from the child widget to pass data back to the parent widget. Here's an example:

	class ChildWidget extends StatelessWidget {
	final Function callback;
	ChildWidget({Key key, this.callback}) : super(key: key);
	void handleButtonClick() {
	callback('This is the data');
	}
	@override
	Widget build(BuildContext context) {
	return RaisedButton(
	onPressed: handleButtonClick,
	child: Text('Click me'),
	);
	}
	}
	class ParentWidget extends StatelessWidget {
	void handleData(String data) {
	print(data);
	}
	@override
	Widget build(BuildContext context) {
	return ChildWidget(callback: handleData);
	}
	}

view raw Pass-data-via-callbacks.dart hosted with ❤ by GitHub

3. Pass data with state management: You can use a state management solution like Provider to store and pass data between widgets. Here's an example:

	class DataModel with ChangeNotifier {
	String data;
	void updateData(String newData) {
	data = newData;
	notifyListeners();
	}
	}
	class ChildWidget extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	final dataModel = Provider.of<DataModel>(context);
	return RaisedButton(
	onPressed: () => dataModel.updateData('This is the data'),
	child: Text('Click me'),
	);
	}
	}
	class ParentWidget extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Provider<DataModel>(
	create: (_) => DataModel(),
	child: ChildWidget(),
	);
	}
	}

view raw state-management.dart hosted with ❤ by GitHub