我正在尝试制作一个前面有一个按钮来从图库中选择图像并将其替换为当前图像

Question

我很难从图库按钮中进行选择，我尝试了很多教程和视频，并且 IDK 我做错了什么，请帮我解决这个问题。 我刚开始用颤振，这是我无法解决的一件事。

The image of the interface

  final formKey = GlobalKey<FormState>(); //key for form
  @override
  Widget build(BuildContext context) {
    final double height= MediaQuery.of(context).size.height;
    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

    return Scaffold(

        appBar: AppBar(
          elevation:0,
           brightness: Brightness.light,
           backgroundColor:Colors.white,
           leading: Icon(Icons.arrow_back_outlined,size: 20,color: Colors.black),
           title:Text('Enregistrer',style: TextStyle(fontSize: 15,color:Colors.blue),textAlign:TextAlign.right),
        ),

    body: SingleChildScrollView(

      padding: EdgeInsets.symmetric(horizontal: 20 ),

      child: Form(
          key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:<Widget> [
          Column(
           children:  [

            if(Image ==null ?(Image.asset("images/emilia.jpeg",height: 150,width: 150))):null,
              pickImage != null ? FileImage(pickImage): null,


          Row(
            children:[
            OutlineButton.icon(
             icon:Icon(Icons.camera_alt_outlined,color:Colors.black),
              onPressed: (){pickImage(ImageSource.camera);},
              label: Text('Appareil photo',style: TextStyle(fontSize: 10.0)),

            ),
              OutlineButton.icon(
                icon:Icon(Icons.photo_album_rounded,color:Colors.black),
                onPressed: (){pickImage(ImageSource.gallery);},
                label: Text('ouvrir la Gallerie',style: TextStyle(fontSize: 10.0)),
              )
            ]
          ),
      ],
          ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,

          children:<Widget> [
            Text('nom',
                textAlign:TextAlign.left),
            SizedBox(width:2.0),
            TextFormField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'nom',
                hintText: 'Entrer votre nom',
              ),
                validator:(value) {
                  if (value!.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(value!));
                  return "entrer votre nom";
                }
            ),

Answer 1

这里可以看一个简单的例子：

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  XFile? file;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            file != null
                ? Center(
                    child: Image.file(
                      File(file!.path),
                      width: 159,
                      height: 159,
                    ),
                  )
                : const Text('placeholder'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () async {
                    file = await ImagePicker().pickImage(
                      source: ImageSource.camera,
                    );
                    setState(() {});
                  },
                  icon: const Icon(Icons.camera_alt_outlined),
                ),
                IconButton(
                  onPressed: () async {
                    file = await ImagePicker().pickImage(
                      source: ImageSource.gallery,
                    );
                    setState(() {});
                  },
                  icon: const Icon(Icons.photo_album),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

结果：确保授予相机和存储访问权限