Access values in flutter - flutter

Question

How can I access a variable value from one stateful widget class to another stateful widget class. Also both widget classes are in different .dart files.
This is screen.dart having the variable "List points". I want to use it in home.dart.
class Draw extends StatefulWidget {
const Draw({Key? key}) : super(key: key);
#override
_DrawState createState() => _DrawState();
}
class _DrawState extends State<Draw> {
List points = [];
#override
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
Offset localPos = details.localPosition;
setState(() {
if (localPos.dx >= 0 &&
localPos.dx <= MediaQuery.of(context).size.width * 0.8 &&
localPos.dy >= 0 &&
localPos.dy <= MediaQuery.of(context).size.height * 0.5)
points.add(localPos);
else {
points.add(null);
}
});
},
onPanEnd: (DragEndDetails details) {
points.add(null);
},
child: CustomPaint(
painter: Painter(points: points),
),
);
}
}
...rest of code
This is home.dart
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellowAccent,
onPressed: () {
setState(() {
});
},
child: Icon(
Icons.restore_page,
color: Colors.black,
),
),
backgroundColor: Colors.grey[300],
appBar: AppBar(
backgroundColor: Colors.yellowAccent,
title: Text(
"Digit Recognizer",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
body: Center(
child: Column(
children: [
SizedBox(
height: 15,
),
Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.white, border: Border.all(color: Colors.black)),
child: Draw(),
),
...rest of code
I want to access the "points" from screen.dart variable inside the floatingActionButton's on pressed() function in home.dart.

Answer 1

You can place both of these widgets in the same file and then create points as a global Variable, so
List points = [];
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellowAccent,
onPressed: () {
setState(() {
print(points);
});
},
child: Icon(
Icons.restore_page,
color: Colors.black,
),
),
backgroundColor: Colors.grey[300],
appBar: AppBar(
backgroundColor: Colors.yellowAccent,
title: Text(
"Digit Recognizer",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
body: Center(
child: Column(
children: [
SizedBox(
height: 15,
),
Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.white, border: Border.all(color: Colors.black)),
child: Draw(),
),
...rest of code
class Draw extends StatefulWidget {
const Draw({Key? key}) : super(key: key);
#override
_DrawState createState() => _DrawState();
}
class _DrawState extends State<Draw> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
Offset localPos = details.localPosition;
setState(() {
if (localPos.dx >= 0 &&
localPos.dx <= MediaQuery.of(context).size.width * 0.8 &&
localPos.dy >= 0 &&
localPos.dy <= MediaQuery.of(context).size.height * 0.5)
points.add(localPos);
else {
points.add(null);
}
});
},
onPanEnd: (DragEndDetails details) {
points.add(null);
},
child: CustomPaint(
painter: Painter(points: points),
),
);
}
}
...rest of code
Usually I would not even create a different statefulw idget for this case but I am guessing you are doing it for some other reason. Creating a global variable allows it to be accessed from anywhere\
A better way of implementing the first answer might be this but you'll have to see if it works.
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Widget drawWidget = Container();
#override
void initState(){
super.initState();
drawWidget = Draw();
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellowAccent,
onPressed: () {
setState(() {
print(drawWidget.points);
});
},
child: Icon(
Icons.restore_page,
color: Colors.black,
),
),
backgroundColor: Colors.grey[300],
appBar: AppBar(
backgroundColor: Colors.yellowAccent,
title: Text(
"Digit Recognizer",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
body: Center(
child: Column(
children: [
SizedBox(
height: 15,
),
Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.white, border: Border.all(color: Colors.black)),
child: drawWidget,
),
...rest of code
And in drawWidget
class Draw extends StatefulWidget {
const Draw({Key? key}) : super(key: key);
List points = [];
#override
_DrawState createState() => _DrawState();
}
class _DrawState extends State<Draw> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
Offset localPos = details.localPosition;
setState(() {
if (localPos.dx >= 0 &&
localPos.dx <= MediaQuery.of(context).size.width * 0.8 &&
localPos.dy >= 0 &&
localPos.dy <= MediaQuery.of(context).size.height * 0.5)
widget.points.add(localPos);
else {
widget.points.add(null);
}
});
},
onPanEnd: (DragEndDetails details) {
widget.points.add(null);
},
child: CustomPaint(
painter: Painter(points: widget.points),
),
);
}
}
...rest of code
Hope it helps
The print statement in each code shows how to access

Answer 2

class stful1{
//create state method
}
class stful1 extends state{
//Widget build method
//data is actual data you want to send
Navigator.push(context,MaterialPageRoute((context)=>stful2(data)))
}
//stful2
class stful2{
//accept data in constructor
dataType data;
stful2(this.data);
//create state method
}
class stful2 extends state{
//Widget build method
//access like widget.data
}