Flutter - How to only update/rebuild the child widget and not parent? - flutter

Question

I have the following code where 'Snag' is the parent widget and 'Category Display' is the child widget. When I press 'CATEGORY' button the display updates but the entire 'SNAG' is also rebuild as a result I get a flicker on the screen.
Please see attached:
What is it that I am doing wrong here please?
My code is as follows:
class Snags extends StatefulWidget {
#override
_SnagsState createState() => _SnagsState();
}
class _SnagsState extends State<Snags> {
final _formKey = GlobalKey<FormState>();
TextEditingController _locationController = TextEditingController();
TextEditingController _conditionController = TextEditingController();
TextEditingController _recommendationController = TextEditingController();
TextEditingController _assetController = TextEditingController();
bool _newSnag = false;
bool _busy = false;
bool loaded = false;
late Snag? _snag;
late InfoHelper _info;
late StatusCodes _statusCodes;
late String _imagePath;
late String _status;
late String _siteID;
double maxImageSize = 700;
_getSnagObject() async {
if (loaded) return;
_info = ModalRoute
.of(context)!
.settings
.arguments as InfoHelper;
_siteID = _info.siteID; // Never NULL
_newSnag = _info.problemUID == null ? true : false;
if (!_newSnag) {
_snag = await MyDatabase.db.getSingleSnag(_info.problemUID!);
}
_statusCodes = await Provider.of<CP>(context,listen: false).getStatusCodes();
_imagePath = _newSnag ? '' : _snag!.imagePath;
_status = _newSnag ? '1' : _snag!.Status;
_locationController.text = _newSnag ? '' : _snag!.location;
_conditionController.text = _newSnag ? '' : _snag!.condition;
_recommendationController.text = _newSnag ? '' : _snag!.recommendation;
_assetController.text = _newSnag ? '' : _snag!.asset;
loaded = true;
}
deleteImage() async {
if (await File(_imagePath).exists()) await File(_imagePath).delete();
setState(() => _imagePath = '');
Navigator.pop(context);
}
annotatePicture() {
Navigator.pushNamed(context, '/imageMarkup', arguments: _imagePath).then((value) {
if (value != null)
setState(() {
_imagePath = value as String;
});
Navigator.pop(context);
});
}
void _openGallery() async {
XFile? picture = await ImagePicker().pickImage(
source: ImageSource.gallery,
maxHeight: maxImageSize,
maxWidth: maxImageSize,
);
await savePicture(picture);
}
void _openCamera() async {
final _picker = ImagePicker();
XFile? picture = await _picker.pickImage(
source: ImageSource.camera,
maxHeight: maxImageSize,
maxWidth: maxImageSize,
);
await savePicture(picture);
}
Future optionsDialogBoxWithDELorEDIT(BuildContext context1,
VoidCallback callBackDelete, VoidCallback? callBackEdit) {
return showDialog(
context: context1,
builder: (BuildContext context) {
return AlertDialog(
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
GestureDetector(
child: new Text('Delete picture'),
onTap: callBackDelete,
),
SizedBox(height: 26.0,),
GestureDetector(
child: new Text('Annotate picture'),
onTap: callBackEdit,
),
],
),
),
);
});
}
Future<void> _optionsDialogBox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
GestureDetector(
child: new Text('Take a picture'),
onTap: () => _openCamera(),
),
Padding(
padding: EdgeInsets.all(8.0),
),
GestureDetector(
child: new Text('Select from gallery'),
onTap: () => _openGallery(),
),
],
),
),
);
});
}
savePicture(XFile? picture) async {
if (picture != null) {
try {
final String path = (await getApplicationDocumentsDirectory()).path;
final String completePath = p.join(path, '${DateTime.now().toIso8601String() + ".png"}');
await picture.saveTo(completePath);
setState(() => _imagePath = completePath);
if (kDebugMode) print('IMAGE SAVED TO: $_imagePath');
} on MissingPlatformDirectoryException catch (e) {
if (kDebugMode) print(e);
MyFirebaseServices.recordNonFatalError(message: 'Could not save image. Error = $e');
}
// TRY SAVE IT IN EXTERNAL STORAGE AS WELL
try {
if ((await Provider.of<CP>(context, listen: false).getProfile())!.saveExternally) {
final String path = (await getExternalStorageDirectory())!.path;
final String completePath = p.join(path, '${DateTime.now().toIso8601String() + ".png"}');
await picture.saveTo(completePath);
}
} on MissingPlatformDirectoryException catch (e) {
if (kDebugMode) print(e);
MyFirebaseServices.recordNonFatalError(message: 'Could not save image. Error = $e');
}
}
Navigator.pop(context);
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: _getSnagObject(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.connectionState == ConnectionState.done){
if (snapshot.hasError){
if (kDebugMode) {
print (snapshot.stackTrace);
} else {
MyFirebaseServices.logMessage(message: 'Snag - snapshot error ${snapshot.error}');
}
return ErrorStatus(message: 'Error: Please go back and try again!');
}
return Scaffold(
appBar: AppBar(
flexibleSpace: TitleBarBackground(),
title: Text('SNAG', style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
backgroundColor: Theme.of(context).colorScheme.primary,
elevation: 1.0,
leading: IconButton(
padding: EdgeInsets.only(left: 8.0),
icon: Icon(
Icons.arrow_back,
color: Theme.of(context).colorScheme.onPrimary,
),
onPressed: () => Navigator.pop(context),
), ),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
onTap: () async =>
_imagePath.isEmpty
? await _optionsDialogBox()
: await optionsDialogBoxWithDELorEDIT(context, deleteImage, annotatePicture),
child: MainImage(
imagePath: _imagePath,
),
),
SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: _locationController,
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9-,. ]'))],
maxLines: 1,
maxLength: 30,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
labelText: 'Location',
prefixIcon: Icon(
Icons.add_location,
size: 35.0,
color: Theme
.of(context)
.colorScheme
.primary,
)),
validator: (value) =>
value == null || value.isEmpty
? '*REQUIRED*'
: null,
),
TextFormField(
controller: _assetController,
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9-,. ]'))],
maxLines: 1,
maxLength: 40,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
labelText: 'Asset',
prefixIcon: Icon(
Icons.web_asset,
size: 35.0,
color: Theme
.of(context)
.colorScheme
.primary,
)),
validator: (value) =>
value == null || value.isEmpty
? '*REQUIRED*'
: null,
),
TextFormField(
controller: _conditionController,
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9-,. ]'))],
maxLines: 1,
maxLength: 50,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
labelText: 'Condition',
prefixIcon: Icon(
Icons.star,
size: 35.0,
color: Theme
.of(context)
.colorScheme
.primary,
)),
validator: (value) =>
value == null || value.isEmpty
? '*REQUIRED*'
: null,
),
TextFormField(
controller: _recommendationController,
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[a-zA-Z0-9-,. ]'))],
maxLines: 4,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
labelText: 'Description',
prefixIcon: Icon(
Icons.description,
size: 35.0,
color: Theme
.of(context)
.colorScheme
.primary,
)),
validator: (value) =>
value == null || value.isEmpty
? '*REQUIRED*'
: null,
),
],
),
),
SizedBox(
height: 10.0,
),
CategoryDisplay(currentSelection:currentSelection(_status), statusCodes: _statusCodes, callBackFunction: changeSelection,),
SizedBox(
height: 20.0,
),
SaveButton(
label: 'SAVE',
busy: _busy,
callBackfunction: () async {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
if (!_busy) {
setState(() => _busy = true);
if (_newSnag) {
var uid = Uuid();
Snag snag = Snag(
id: uid.v4(),
siteID: _siteID,
imagePath: _imagePath,
Status: _status,
recommendation: _recommendationController.text,
condition: _conditionController.text,
asset: _assetController.text,
location: _locationController.text,
);
await MyDatabase.db.insertSnag(snag);
await Future.delayed(Duration(milliseconds: 250));
Navigator.pop(context, snag);
} else {
Snag snag = Snag(
id: _snag!.id,
siteID: _snag!.siteID,
imagePath: _imagePath,
Status: _status,
recommendation: _recommendationController.text,
condition: _conditionController.text,
asset: _assetController.text,
location: _locationController.text,
);
await MyDatabase.db.updateSnag(snag);
await Future.delayed(Duration(milliseconds: 250));
Navigator.pop(context, snag);
}
setState(() => _busy = false);
}
}
},
)
],
),
),
),
],
),
),
);
}
return BusyStatus(message: 'Loading...');
},
);
}
changeSelection(String selection){
setState(() {
_status = selection;
});
}
currentSelection(String status){
//If it is String then send INT
int? s = int.tryParse(status);
if (s!=null) return s;
// If it is old String text then send correct INT conversion
if (status == 'OK') status = "1";
if (status == 'OBS') status = "2";
if (status == 'CAT3') status = "3";
if (status == 'CAT2') status = "4";
if (status == 'CAT1') status = "5";
print (status);
return int.parse(status);
}
}
class CategoryDisplay extends StatelessWidget {
const CategoryDisplay({required this.callBackFunction, required this.currentSelection, required this.statusCodes, Key? key}) : super(key: key);
final Function callBackFunction;
final int currentSelection;
final StatusCodes statusCodes;
String _getDescription(int status) {
if (status == 1) return statusCodes.aDes;
if (status == 2) return statusCodes.bDes;
if (status == 3) return statusCodes.cDes;
if (status == 4) return statusCodes.dDes;
if (status == 5) return statusCodes.eDes;
return ('SELECT STATUS');
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Text('CATEGORY', style: Theme.of(context).textTheme.subtitle1,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () => callBackFunction("1"),
child: Container(
padding: EdgeInsets.all(8.0),
width: MediaQuery
.of(context)
.size
.width / 6,
decoration: BoxDecoration(
color: currentSelection == 1
? Theme
.of(context)
.colorScheme
.primary
: Colors.transparent,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(16.0)),
border: Border.all(
color: Theme
.of(context)
.colorScheme
.primary,
style: BorderStyle.solid,
width: 2.0,
),
),
child: Center(
child: Text(
statusCodes.a,
style: TextStyle(
color: currentSelection == 1
? Colors.white
: Theme
.of(context)
.colorScheme
.primary),
),
),
),
),
GestureDetector(
onTap: () => callBackFunction("2"),
child: Container(
padding: EdgeInsets.all(8.0),
width: MediaQuery
.of(context)
.size
.width / 6,
decoration: BoxDecoration(
color: currentSelection == 2
? Theme
.of(context)
.colorScheme
.primary
: Colors.transparent,
//borderRadius: BorderRadius.only(topRight: Radius.circular(16.0)),
border: Border.all(
color: Theme
.of(context)
.colorScheme
.primary,
style: BorderStyle.solid,
width: 2.0,
),
),
child: Center(
child: Text(
statusCodes.b,
style: TextStyle(
color: currentSelection == 2
? Colors.white
: Theme
.of(context)
.colorScheme
.primary),
),
),
),
),
GestureDetector(
onTap: () => callBackFunction("3"),
child: Container(
padding: EdgeInsets.all(8.0),
width: MediaQuery
.of(context)
.size
.width / 6,
decoration: BoxDecoration(
color: currentSelection == 3
? Theme
.of(context)
.colorScheme
.primary
: Colors.transparent,
//borderRadius: BorderRadius.only(bottomLeft: Radius.circular(16.0)),
border: Border.all(
color: Theme
.of(context)
.colorScheme
.primary,
style: BorderStyle.solid,
width: 2.0,
),
),
child: Center(
child: Text(
statusCodes.c,
style: TextStyle(
color: currentSelection == 3
? Colors.white
: Theme
.of(context)
.colorScheme
.primary),
),
),
),
),
GestureDetector(
onTap: () => callBackFunction("4"),
child: Container(
padding: EdgeInsets.all(8.0),
width: MediaQuery
.of(context)
.size
.width / 6,
decoration: BoxDecoration(
color: currentSelection == 4
? Theme
.of(context)
.colorScheme
.primary
: Colors.transparent,
//borderRadius: BorderRadius.only(bottomLeft: Radius.circular(16.0)),
border: Border.all(
color: Theme
.of(context)
.colorScheme
.primary,
style: BorderStyle.solid,
width: 2.0,
),
),
child: Center(
child: Text(
statusCodes.d,
style: TextStyle(
color: currentSelection == 4
? Colors.white
: Theme
.of(context)
.colorScheme
.primary),
),
),
),
),
GestureDetector(
onTap: () => callBackFunction("5"),
child: Container(
padding: EdgeInsets.all(8.0),
width: MediaQuery
.of(context)
.size
.width / 6,
decoration: BoxDecoration(
color: currentSelection == 5
? Theme
.of(context)
.colorScheme
.primary
: Colors.transparent,
borderRadius: BorderRadius.only(topRight: Radius.circular(16.0)),
border: Border.all(
color: Theme
.of(context)
.colorScheme
.primary,
style: BorderStyle.solid,
width: 2.0,
),
),
child: Center(
child: Text(
statusCodes.e,
style: TextStyle(
color: currentSelection == 5
? Colors.white
: Theme
.of(context)
.colorScheme
.primary),
),
),
),
),
],
),
SizedBox(height: 4,),
Center(
child: Text(
_getDescription(currentSelection),
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
)),
],
);
}
}

Answer 1

You are updating your parent, to avoid that change changeSelection to this:
changeSelection(String selection){
_status = selection;
}
then change your CategoryDisplay to StatefulWidget and define new _status inside CategoryDisplay and after that change onTap to this:
GestureDetector(
onTap: () {
setState(() {
_status = 1;
});
callBackFunction("1"),
}
repeat this for all your onTap.