I want to ask a question about my code. First, the function I want is for the user to load and stack photos, decorate the blank screen, and finally save the entire screen as a single photo. So, I made a blank screen in a widget "ipage". And by using the imagepicker package, And I made the user pick the photo in “image” in a class "pickimage". But when I try to run the code, "A value of type 'File' can't be assigned to a variable of type 'Widget?'." <- at the setState(() => this.image = imageTemp); How can I fix it?

I am a non-major who lacks coding knowledge. Please forgive me for the lack of questions. Thanks in advance to everyone who replies. My code is in the below. (The code for the row icons below has been omitted.)

class Makeipage2_2 extends StatefulWidget {
  @override
  State<Makeipage2_2> createState() => _Makeipage2_2State();
}


class _Makeipage2_2State extends State<Makeipage2_2> {
  Widget? image;
  double? _x;
  double? _y;

  Widget ipage() {
   return Stack(
   children: [
      Container(
        height: 500,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black, width: 0.8),
        ),
        child: Positioned(
          left: _x,
          top: _y,
          child: Draggable(
            child: image!,
            feedback: image!,
            childWhenDragging: const SizedBox(),
            onDragEnd: (dragdetails) {
              setState(() {
                  _x = dragdetails.offset.dx;
                  _y = dragdetails.offset.dy;
                },
              );
            },
          ),
        ),
      ),
    ],
  );
}


  Future pickImage() async {
   try {
    final image = await ImagePicker().pickImage(source: ImageSource.gallery);

    if (image == null) return;

    final imageTemp = File(image.path); 
    setState(() => this.image = imageTemp);
   } catch (e) {
     print('Failed to pick image: $e');
   }
   }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     body: SafeArea(
       child: Container(
         margin: EdgeInsets.all(20),
         child: Column(
           children: <Widget>[
             ipage(),
             const SizedBox(
               height: 10,
             ),
             Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
               FadingImageButton(
                 onPressed: () {
                   pickImage();
                 },

CodePudding user response：

You only have a File of an image, to display it, you need an Image widget.

There is a constructor just for that:

this.image = Image.file(imageTemp)

This will create an Image widget from the file you got from the picker.