Flutter博客应用中如何创建File类实现设备图片上传？

问题场景 #

用Flutter开发博客应用，需要实现从设备上传图片的功能，但在声明File _image;时代码报错。

报错代码 #

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class AddBlog extends StatefulWidget {
const AddBlog({super.key});

@override
State<AddBlog> createState() => _AddBlogState();
}

class _AddBlogState extends State<AddBlog> {
@override // 此处多余的@override是错误原因之一
File _image; // 该行代码报错
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    title: const Text("Post Blog"),
  ),
  body: SingleChildScrollView(
    reverse: true,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Container(
              decoration: BoxDecoration(
                  color: Colors.green.shade200,
                  borderRadius: BorderRadius.circular(10.0)),
              height: MediaQuery.of(context).size.height * .3,
              width: MediaQuery.of(context).size.width * 1,
              child: const ClipRect()),
          const SizedBox(
            height: 50.0,
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Form(
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: "Title",
                      border: const OutlineInputBorder(),
                      enabledBorder: const OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(
                    height: 40.0,
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: "Description",
                      border: const OutlineInputBorder(),
                      enabledBorder: const OutlineInputBorder(),
                    ),
                  ),
                  const SizedBox(
                    height: 40.0,
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * .06,
                    child: ElevatedButton(
                      child: const Text(
                        "Post",
                        style: TextStyle(
                          fontSize: 20.0,
                        ),
                      ),
                      onPressed: () {},
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);
 }
}

flutter doctor检测结果 #

• [√] Flutter (稳定版 3.7.1，Windows 10 10.0.22623.1095，en-US)
  • Flutter路径：C:\src\flutter
  • Framework版本：7048ed95a5（2023-02-01）
  • Engine版本：800594f1f4
  • Dart版本：2.19.1
  • DevTools版本：2.20.1
• [√] Windows版本（已安装Windows 10及以上）
• [√] Android工具链（Android SDK 33.0.1）
  • SDK路径：C:\Users\sures\AppData\Local\Android\sdk
  • 平台：android-33-ext4，build-tools 33.0.1
  • Java路径：C:\Program Files\Android\Android Studio\jre\bin\java
  • Java版本：OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
  • 已接受所有Android许可证
• [√] Chrome（Web开发支持）
• [√] Visual Studio Community 2022 17.4.4（Windows应用开发）
• [√] Android Studio 2022.1
• [√] VS Code 1.75.0（Flutter扩展3.58.0）
• [√] 已连接设备（4台）：M2003J15SC（Android 12）、Windows桌面、Chrome、Edge
• [√] HTTP主机可用性

解决步骤 #

1. 导入File类依赖库：File类属于dart:io库，需要在代码顶部添加导入：

import 'dart:io';

2. 移除多余的@override：自定义类成员变量不能用@override修饰，直接删掉变量前的@override
3. 处理变量初始化：Dart要求非空变量必须初始化，这里推荐使用可空类型声明（初始状态无选中图片）：

File? _image;

修改后的关键代码片段：

import 'dart:io'; // 新增导入
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class _AddBlogState extends State<AddBlog> {
File? _image; // 修正后的变量声明
// ... 其余代码保持不变
}

内容的提问来源于stack exchange，提问作者Suresh Yadav