I want to select an image from the gallery and display it at the bottom of the container when the container is clicked using image_picker. But ‘The argument type ‘File?’ can’t be assigned to the parameter type ‘File’. ‘ error occurs. I searched hard for an answer on Google and StackOverFlow, but couldn’t solve it. What should I do?
This is my code:
import 'dart:io';
import 'package:flutter/material.dart';
import '../../../constants.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
class UploadFishingVesselImages extends StatefulWidget {
const UploadFishingVesselImages({Key? key}) : super(key: key);
@override
State<UploadFishingVesselImages> createState() =>
_UploadFishingVesselImagesState();
}
class _UploadFishingVesselImagesState extends State<UploadFishingVesselImages> {
File? _image;
final _picker = ImagePicker();
Future choiceImage() async {
var pickedImage = await _picker.pickImage(source: ImageSource.gallery);
if (pickedImage == null) return null;
setState(() {
_image = File(pickedImage.path);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: baseColor10,
elevation: 0,
leading: IconButton(
onPressed: () {
Get.back();
},
icon: Icon(Icons.arrow_back),
color: baseColor50,
),
title: Text(
'선박판매등록',
style: TextStyle(
color: baseColor50,
fontFamily: 'semi-bold',
fontSize: titleMedium,
),
),
),
body: GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: SingleChildScrollView(
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TopBar(context),
marginHeight32,
buildTextColumn(),
Row(
children: [
GestureDetector(
onTap: () async {
await choiceImage();
},
child: Expanded(
child: Container(
height: 90,
width: MediaQuery.of(context).size.width * 0.3,
decoration: BoxDecoration(
color: baseColor20,
),
),
),
),
SizedBox(width: 10),
Expanded(
child: Container(
height: 90,
width: MediaQuery.of(context).size.width * 0.3,
decoration: BoxDecoration(
color: baseColor20,
),
),
),
SizedBox(width: 10),
Expanded(
child: Container(
height: 90,
width: MediaQuery.of(context).size.width * 0.3,
decoration: BoxDecoration(
color: baseColor20,
),
),
),
],
),
// Error occurs. 'The argument type 'File?' can't be assigned
// to the parameter type 'File'.
Image.file(_image),
],
),
),
),
),
),
floatingActionButton: Visibility(
visible: MediaQuery.of(context).viewInsets.bottom == 0,
child: FloatingActionButton(
backgroundColor: primaryColor50,
foregroundColor: baseColor10,
focusColor: primaryColor50,
onPressed: () {},
child: Icon(
Icons.arrow_forward_ios_rounded,
),
),
),
);
}
// 상단 텍스트
Column buildTextColumn() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'사진 등록',
style: TextStyle(
color: baseColor50,
fontSize: titleMedium,
fontFamily: 'semi-bold',
),
),
marginHeight4,
Text(
'판매선박의 사진을 등록해주세요.(최대 20장)'
'n다양하고 선명한 사진을 올릴 경우, 판매 확률이 더욱 높아집니다.',
style: TextStyle(
fontSize: bodySmall,
),
),
marginHeight32,
],
);
}
// 상단바
Column TopBar(BuildContext context) {
return Column(
children: [
Row(
children: [
Expanded(
child: Container(
height: 3,
color: baseColor30,
width: MediaQuery.of(context).size.width * 0.2,
),
),
Expanded(
child: Container(
height: 3,
color: baseColor30,
width: MediaQuery.of(context).size.width * 0.2,
),
),
Expanded(
child: Container(
height: 3,
color: baseColor30,
width: MediaQuery.of(context).size.width * 0.2,
),
),
Expanded(
child: Container(
height: 3,
color: primaryColor50,
width: MediaQuery.of(context).size.width * 0.2,
),
),
Expanded(
child: Container(
height: 3,
color: baseColor30,
width: MediaQuery.of(context).size.width * 0.2,
),
),
],
),
marginHeight4,
Row(
children: [
Expanded(
child: Container(
child: Center(
child: Text(
'선박정보',
style: TextStyle(
fontFamily: 'medium',
fontSize: labelSmall,
color: baseColor30,
),
),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
'옵션',
style: TextStyle(
fontFamily: 'medium',
fontSize: labelSmall,
color: baseColor30,
),
),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
'설명등록',
style: TextStyle(
fontFamily: 'medium',
fontSize: labelSmall,
color: baseColor30,
),
),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
'사진등록',
style: TextStyle(
fontFamily: 'medium',
fontSize: labelSmall,
color: primaryColor50,
),
),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
'결제',
style: TextStyle(
fontFamily: 'medium',
fontSize: labelSmall,
color: baseColor30,
),
),
),
),
),
],
),
],
);
}
}
2
Answers
If youre sure that your
File?
object is not null, you can use null check operator!
to get rid of that error. Likeyou are facing this error cause Image.file() does not accept nullable variable and your _image variable is nullable so you have to set condition for it you can set like this.
this condition will not throw any nullable error. and you can put any different widget instead of container if you want to show anything else when the _image is null.