How can I pass dynamic data from widget to widget? - flutter

Question

Let me preface this by saying I am brand new to flutter/dart, and also not a super experienced programmer.
I'm trying to acquaint myself with flutter's framework and tools, and I'm trying to just expand upon the basic counter app that flutter creates on project generation. My goal is to have the app keep track of when the counter is 'reset', keep the time and count that the counter was at, and then display that data in a table on another screen.
Here's what I have so far:
I've made a class to keep track of the data:
class CounterRecord {
int _counter; //Holds the value the counter was at on reset
DateTime _resetTime; //Holds the time when the counter was reset
CounterRecord(int _count){
_counter = _count;
_resetTime = DateTime.now();
}
int getCount() => _counter; //fetch method for count
DateTime getTime() => _resetTime; //Fetch method for resettime
}
Here's the main class/home page:
import 'package:counter_app/clickerScreen.dart';
import 'package:counter_app/dataScreen.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
final clickerKey = new GlobalKey<ClickerScreenState>();
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
accentColor: Colors.grey,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home'),
);
}
}
class MyHomePage extends StatefulWidget {
//Enables the passing in of the title, clicker screen instance, and datacreen isntance, respectively,
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//We don't want a brand new clickerScreen every time, so I'm keeping it up here.
ClickerScreen clickerScreen = ClickerScreen(clickerKey: clickerKey); //Creates a new clickerScreen - the key points to it too.
#override
Widget build(BuildContext context) {
//Creates an instance (State?) of clickerScreen for the first tab
return DefaultTabController( //A wrapper that helps manage the tab states
length: 2, //Currently there are only two options for screens
child: Scaffold(
appBar: AppBar( //This represnts the bar up at the top
title: Text(widget.title),
bottom: TabBar(
tabs: [
//These are the icons for the two tabs we're using
//The order of these is important: It goes in the same order as TabBarView below
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.directions_run)),
],
)
),
body: TabBarView(
children: [
clickerScreen,
DataScreen( //this DataScreen will be built every time based on the new data from clickerScreen
data: clickerKey.currentState.getRecords(),
),
],
),
),
);
}
}
class CounterRecord {
int _counter; //Holds the value the counter was at on reset
DateTime _resetTime; //Holds the time when the counter was reset
CounterRecord(int _count){
_counter = _count;
_resetTime = DateTime.now();
}
int getCount() => _counter; //fetch method for count
DateTime getTime() => _resetTime; //Fetch method for resettime
}
Here's the important part of my clickerScreen file:
class ClickerScreen extends StatefulWidget {
ClickerScreen({Key clickerKey}) : super(key: clickerKey);
#override
ClickerScreenState createState(){
return ClickerScreenState();
}
}
class ClickerScreenState extends State<ClickerScreen> {
int _counter = 0;
List<CounterRecord> records;
/* All three of these functions do very similar things, modify the counter value. */
void _resetCounter(){
setState(() {
records.add(CounterRecord(_counter));
_counter = 0;
});
}
List<CounterRecord> getRecords(){
return records;
}
There is a build method in clickerScreen that just displays buttons and text. I'm not assigning the key in there, as it just returns a Center widget, but I've read some things that suggest maybe I should be.
And here is my dataScreen file:
import 'package:flutter/material.dart';
import 'main.dart';
class DataScreen extends StatefulWidget{
//Enables the passing in of the instance of the clicker screen instance
DataScreen({Key key, #required this.data}) : super(key: key);
final List<CounterRecord> data;
#override
_DataScreenState createState(){
return _DataScreenState();
}
}
class _DataScreenState extends State<DataScreen>{
#override
Widget build(BuildContext context) {
return Text(widget.data.toString());
}
}
I know that it the displaying won't actually look like it's supposed to, as I'm just sending it toString(), but I want to make sure I can pass the data in before I start messing around with that.
When I run this, I get a NoSuchMethod error on getRecords(), receiver: null. I've also tried to call createState() on the ClickerScreen widget, as a last-ditch attempt.
Any advice?
(I've pasted the entire clickerScreen file here (https://pastebin.com/j6Y8M8F3) since I didn't want to make this post any longer than it already is.)

Answer 1

If you have two widgets depending on the same state you have to use something called "lifting state up". That means that the state is part of the closest widget that has both other widgets as children. In your case that would be the MyHomePage Widget that holds the CounterRecord List. It passes the list through the constructer to the DataScreen, and passes the onReset callback to the ClickerScreen.
MyHomePage:
class MyHomePage extends StatefulWidget {
//Enables the passing in of the title, clicker screen instance, and datacreen isntance, respectively,
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<CounterRecord> counterRecord = []; //this is the lifted up state
onReset(int count) {
setState(() {
counterRecord.add(CounterRecord(count));
});
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
//A wrapper that helps manage the tab states
length: 2, //Currently there are only two options for screens
child: Scaffold(
appBar: AppBar(
//This represnts the bar up at the top
title: Text(widget.title),
bottom: TabBar(
tabs: [
//These are the icons for the two tabs we're using
//The order of these is important: It goes in the same order as TabBarView below
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.directions_run)),
],
)),
body: TabBarView(
children: [
ClickerScreen(onReset: onReset),
DataScreen(
data: counterRecord, //pass the record data to the datascreen
),
],
),
),
);
}
}
ClickerScreen:
class ClickerScreen extends StatefulWidget {
final Function(int) onReset;
ClickerScreen({Key clickerKey, this.onReset}) : super(key: clickerKey);
#override
ClickerScreenState createState() {
return ClickerScreenState();
}
}
class ClickerScreenState extends State<ClickerScreen> {
int _counter = 0;
/* All three of these functions do very similar things, modify the counter value. */
void _resetCounter() {
widget.onReset(_counter); //call the onReset callback with the counter
setState(() {
_counter = 0;
});
}
#override
Widget build(BuildContext context) {
....
}
}
DataScreen (can be Stateless, since state is in its parent)
class DataScreen extends StatelessWidget{
//Enables the passing in of the instance of the clicker screen instance
DataScreen({Key key, #required this.data}) : super(key: key);
final List<CounterRecord> data;
#override
Widget build(BuildContext context) {
return Text(widget.data.toString());
}
}
Using this simple approach can get very annoying fast, and needs lot of changes when you move a widget in the widget tree. Thats why advanced state management like Provider with ChangeNotifier or Bloc exist.
Here is a good read on this matter::
https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Answer 2

I followed Leo Letto's advice and instead used an InheritedWidget placed at the very top that held a list of records.