Separate the Widget from the State - dart

Question

I've the below that works fine, for getting the current location, and displaying it:
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter/services.dart';
import 'package:simple_permissions/simple_permissions.dart';
import 'babies.dart';
class LocationState extends State {
String _location_text;
Location _location = new Location();
Map<String, double> _currentLocation;
String error;
#override
void initState() {
super.initState();
setState(() {
_location_text = 'Clik to update location';
});
}
// Platform messages are asynchronous, so we initialize in an async method.
_getLocation() async {
Map<String, double> location;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
await SimplePermissions.requestPermission(Permission.AccessFineLocation);
location = await _location.getLocation();
error = null;
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
error = 'Permission denied';
} else if (e.code == 'PERMISSION_DENIED_NEVER_ASK') {
error =
'Permission denied - please ask the user to enable it from the app settings';
}
location = null;
}
print("error $error");
setState(() {
_currentLocation = location;
_location_text = ('${_currentLocation["latitude"]}, ${_currentLocation["longitude"]}' ?? 'Grant location Access');
print(_currentLocation);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Baby Name Votes')),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5.0),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
Text.rich(
TextSpan(text: '$_location_text'),
),
FlatButton(
child: const Icon(Icons.my_location),
onPressed: () {
_getLocation();
var alt = _currentLocation["latitude"];
print(
"my $alt at location is: $_currentLocation");
},
)
])
),
]),
),
],
),
),
Expanded(
child: MyCustomListViewWidget(),
),
],
);
}
}
I'd like to simplify the widget to be:
Widget _buildBody(BuildContext context) {
return
Column(
children: <Widget>[
MyLocationWidget(),
Expanded(child: MyCustomListViewWidget(),),
],
);
}
So, I wrote MyLocationWidget as below, but faced an issue of getting error of undefined name for all the functions/parameters that are related to the state like _getLocation(), $_currentLocation, $_location_text:
import 'package:flutter/material.dart';
import 'location.dart';
class MyLocationWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5.0),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
Text.rich(
TextSpan(text: '$_location_text'),
),
FlatButton(
child: const Icon(Icons.my_location),
onPressed: () {
_getLocation();
var alt = _currentLocation["latitude"];
print(
"my $alt at location is: $_currentLocation");
},
)
])
),
]),
),
],
),
);
}
}
So, my question is how to define these variables in the custom widget so they exchange data smoothly with the state

Answer 1

Here solution for sending callback for click:
class MyLocationWidget extends StatelessWidget {
MyLocationWidget(this.clickCallback);
final VoidCallback clickCallback;
//...
FlatButton(
child: const Icon(Icons.my_location),
onPressed: () {
clickCallback();
},
And on creating widget - MyLocationWidget(_getLocation)
But for _currentLocation it'll be little more difficult. I would use Stream for this case
UPDATE
Considering VoidCallback and TextEditingController, the full solution will be:
widget:
import 'package:flutter/material.dart';
class LocationCapture extends StatelessWidget {
LocationCapture(this.clickCallback, this.tc);
final TextEditingController tc;
final VoidCallback clickCallback;
#override
Widget build(BuildContext context) {
return
return Row(
textDirection: TextDirection.rtl, // <= This important
children: <Widget>[
FlatButton(
child: const Icon(Icons.my_location),
onPressed: () => clickCallback(),
),
Expanded(child: TextField(
controller: tc,
enabled: false,
textAlign: TextAlign.center,
decoration: InputDecoration.collapsed(hintText: "")
))
],
);
}
}
State:
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter/services.dart';
import 'package:simple_permissions/simple_permissions.dart';
import 'package:baby_names/Widgets/babies.dart';
import 'package:baby_names/Widgets/location.dart';
class LocationState extends State {
final myController = TextEditingController();
Location _location = new Location();
Map<String, double> _currentLocation;
String error;
_getLocation() async {
Map<String, double> location;
try {
await SimplePermissions.requestPermission(Permission.AccessFineLocation);
location = await _location.getLocation();
error = null;
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
error = 'Permission denied';
} else if (e.code == 'PERMISSION_DENIED_NEVER_ASK') {
error =
'Permission denied - please ask the user to enable it from the app settings';
}
location = null;
}
print("error $error");
setState(() {
_currentLocation = location;
update_controller(_currentLocation);
print(_currentLocation);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Baby Name Votes')),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return
Column(
children: <Widget>[
LocationCapture(_getLocation, myController),
Expanded(
child: BabiesVotes(),
),
],
);
}
void update_controller(Map<String, double> currentLocation) {
myController.text = ('${_currentLocation["latitude"]}, ${_currentLocation["longitude"]}' ?? 'Grant location Access');
}
}

Answer 2

Thanks for Andrey answer, I got the full answer by using:
1. VoidCallback for calling function
2. TextEditingController for changing the text content
The full code is as below:
widget:
import 'package:flutter/material.dart';
class LocationCapture extends StatelessWidget {
LocationCapture(this.clickCallback, this.tc);
final TextEditingController tc;
final VoidCallback clickCallback;
#override
Widget build(BuildContext context) {
return
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 180,
child: TextField(
controller: tc,
enabled: false,
textAlign: TextAlign.center,
decoration: InputDecoration.collapsed(hintText: "")
)
),
Container(
child: FlatButton(
child: const Icon(Icons.my_location),
onPressed: () => clickCallback(),
)
),
]
);
}
}
State:
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import 'package:flutter/services.dart';
import 'package:simple_permissions/simple_permissions.dart';
import 'package:baby_names/Widgets/babies.dart';
import 'package:baby_names/Widgets/location.dart';
class LocationState extends State {
final myController = TextEditingController();
Location _location = new Location();
Map<String, double> _currentLocation;
String error;
_getLocation() async {
Map<String, double> location;
try {
await SimplePermissions.requestPermission(Permission.AccessFineLocation);
location = await _location.getLocation();
error = null;
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
error = 'Permission denied';
} else if (e.code == 'PERMISSION_DENIED_NEVER_ASK') {
error =
'Permission denied - please ask the user to enable it from the app settings';
}
location = null;
}
print("error $error");
setState(() {
_currentLocation = location;
update_controller(_currentLocation);
print(_currentLocation);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Baby Name Votes')),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return
Column(
children: <Widget>[
LocationCapture(_getLocation, myController),
Expanded(
child: BabiesVotes(),
),
],
);
}
void update_controller(Map<String, double> currentLocation) {
myController.text = ('${_currentLocation["latitude"]}, ${_currentLocation["longitude"]}' ?? 'Grant location Access');
}
}