Getting this error while using imagepicker File - flutter

Question

I'm trying to pick an image from device and store it on firebase and display it in chat screen. But, whenever I'm using this file its showing following error. Last time when I used File there was no posational arg errors . Is it due to new update?
Here's my debug console
here's my chatroom source code
import 'dart:html';
import 'dart:typed_data';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class ChatRoom extends StatefulWidget {
final Map<String, dynamic> userMap;
final String chatRoomId;
ChatRoom({required this.chatRoomId, required this.userMap});
#override
State<ChatRoom> createState() => _ChatRoomState();
}
class _ChatRoomState extends State<ChatRoom> {
final FirebaseAuth _auth = FirebaseAuth.instance;
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
final TextEditingController _massage = TextEditingController();
File? imageFile;
Future getImage() async {
ImagePicker _picker = ImagePicker();
await _picker.pickImage(source: ImageSource.gallery).then((xFile) {
if (xFile != null) {
imageFile = File(xFile.path);
}
});
}
onSendMassage() async {
if (_massage.text.isNotEmpty) {
Map<String, dynamic> massages = {
"sendby": _auth.currentUser!.displayName,
"massage": _massage.text,
"time": FieldValue.serverTimestamp(),
"type": "text"
};
await _firestore
.collection("chatroom")
.doc(widget.chatRoomId)
.collection("chat")
.add(massages);
_massage.clear();
} else {
_firestore
.collection('chatroom')
.doc(widget.chatRoomId)
.collection('chats')
.orderBy("time", descending: false)
.snapshots();
print("please input some massage");
}
}
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
leading: new Container(
child: new IconButton(
icon: new Icon(Icons.arrow_back_ios),
onPressed: () {/* Your code */},
),
),
title: Text('username'),
backgroundColor: Colors.grey[850],
),
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 16,
),
Container(
height: size.height / 1.25,
width: size.width,
child: StreamBuilder<QuerySnapshot>(
stream: _firestore
.collection('chatroom')
.doc(widget.chatRoomId)
.collection('chat')
.orderBy("time", descending: false)
.snapshots(),
builder: (BuildContext context, snapshot) {
if (snapshot.data != null) {
return ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
Map<String, dynamic> map = snapshot.data!.docs[index]
.data() as Map<String, dynamic>;
return messages(size, map, context);
},
);
} else {
return Container(
child: Center(
child: Text('data'),
),
);
}
},
),
),
Container(
height: size.height / 10,
width: size.width,
alignment: Alignment.center,
child: Container(
height: size.height / 12,
width: size.width / 1.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PhysicalModel(
color: Colors.white,
elevation: 42,
shadowColor: Color.fromARGB(255, 64, 64, 65),
borderRadius: BorderRadius.circular(20),
child: Container(
height: size.height / 16,
width: size.width / 1.3,
child: TextField(
controller: _massage,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(12),
border: InputBorder.none,
suffixIcon: IconButton(
onPressed: () {},
icon: Icon(Icons.photo),
),
hintText: "Send Message",
),
),
),
),
IconButton(
icon: Icon(
Icons.arrow_circle_right_rounded,
size: 38,
),
onPressed: onSendMassage),
],
),
),
)
],
),
),
);
}
}
Widget messages(Size size, Map<String, dynamic> map, BuildContext context) {
final FirebaseAuth _auth = FirebaseAuth.instance;
return map['type'] == "text"
? Container(
width: size.width,
alignment: map['sendby'] == _auth.currentUser!.displayName
? Alignment.centerRight
: Alignment.centerLeft,
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 14),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
child: Text(
map['massage'] ?? "",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
)
: Container(
height: size.height / 2.5,
width: size.width,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
alignment: map['sendby'] == _auth.currentUser!.displayName
? Alignment.centerRight
: Alignment.centerLeft,
);
}
id now to give in map arg I don't have any use of map here

Answer 1

First of all, you are combining the Future.then, with the async/await syntax, which, is not correct in this case.
When it comes to Future's (which are the equivalent of Promise's if you are used to Javascript), if you await them, there's no need to use the then method.
In this case, you should do:
Future getImage() async {
ImagePicker _picker = ImagePicker();
// Use final if you won't reassing the variable
final XFile file = await _picker.pickImage(source: ImageSource.gallery);
if (file != null && file.path != null) {
imageFile = File(file.path);
}
}
We are awaiting the result and then assigning it to the variable. Alternatively, if you want to use the Future.then syntax, the method should be:
Future getImage() {
ImagePicker _picker = ImagePicker();
// Use final if you won't reassing the variable
_picker.pickImage(source: ImageSource.gallery).then((file) {
if (file != null && file.path != null) {
imageFile = File(file.path);
}
})
}
See as the method signature does not include the async keyword.