How to validate image in flutter on pressing submit button? - firebase

Question

My every textfield is getting validated. But if the image is not selected and I press submit. It successfully gets uploaded to firestore without an image. But I want to make it stop incase image is null. When i load image it gets display in buildGridView. I guess i need to apply logic somewhere here. That if buildGridView is null. Stop or something. How can i achieve it. Thanks
Widget AddPost() {
return Form(
key: _key,
autovalidate: _validate,
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
child: Column(
children: <Widget>[
_getPropertyTypeDropDown(),
_getPropertyTypeDetailDropDown(),
UploadPropertyImages(),
Container(
margin: EdgeInsets.only(left: 7),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
width: 200,
height: MediaQuery.of(context).size.height / 4,
//color: Colors.green,
child: buildGridView(),
),
RaisedButton(
child: Text("Submit"),
onPressed: () async {
if (_key.currentState.validate()) {
_key.currentState.save();
Alert(
context: context,
style: alertStyle,
type: AlertType.info,
title: "YEY !!",
desc: "Your Ad will be displayed soon.",
buttons: [
DialogButton(
child: Text(
"Thankyou",
style: TextStyle(color: Colors.white, fontSize: 20),
),
// onPressed: () => Navigator.pop(context),
color: Color.fromRGBO(0, 179, 134, 1.0),
radius: BorderRadius.circular(0.0),
),
],
).show();
await runMyFutureGetImagesReference();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RoleCheck()));
} else {
setState(() {
_validate = true;
});
}
},
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
splashColor: Colors.grey,
),
],
),
),
//_showSubmitButton(),
],
)),
);
}
Widget buildGridView() {
return GridView.count(
crossAxisCount: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
print(asset.getByteData(quality: 100));
return Padding(
padding: EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 2)),
child: AssetThumb(
asset: asset,
width: 300,
height: 300,
),
),
),
// ),
);
}),
);
}
Widget UploadPropertyImages() {
return Container(
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
NiceButton(
width: 250,
elevation: 8.0,
radius: 52.0,
text: "Select Images",
background: Colors.blueAccent,
onPressed: () async {
List<Asset> asst = await loadAssets();
if (asst.length == 0) {
showInSnackBar("No images selected");
}
// SizedBox(height: 10,);
else {
showInSnackBar('Images Successfully loaded');
}
}),
],
),
)));
}
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: Colors.grey[600],
key: _scaffoldKey,
body: Container(
padding: EdgeInsets.all(16.0),
child: Form(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(
child: Text(
"Post New Ad",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
),
AddPost(),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 16),
),
], //:TODO: implement upload pictures
),
),
),
);
}
Future<List<Asset>> loadAssets() async {
List<Asset> resultList = List<Asset>();
String error = "No error Detected";
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 10,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Upload Image",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
print(resultList.length.toString() + "it is result list");
/* print((await resultList[0].getThumbByteData(122, 100)));
print((await resultList[0].getByteData()));
print((await resultList[0].metadata));*/
print("loadAssets is called");
} on Exception catch (e) {
error = e.toString();
print(error.toString() + "on catch of load assest");
}

Answer 1

By default Image Picker field is not a form element. You can pick a plugin to do so for your application. Here I am adding one. Please include it and it will give you the scope to validate the picked image as your requirements.
https://pub.dev/packages/image_picker_form_field
You will have to include it in pubspec.yaml and you are ready to use the widget it provides. Just use that like below:
ImagePickerFormField(
child: Container(
height: 40,
child: Center(child: Text("Select Photo")),
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
border: Border.all(
color: Theme.of(context).disabledColor, width: 1)),
),
previewEnabled: true,
autovalidate: true,
context: context,
onSaved: (File value) {
print("on saved called");
},
validator: (File value) {
if (value == null)
return "Please select a photo!";
else return null; },
initialValue: null, //File("some source")
)