flutter - [Flutter]如何从图库中动态导入图片

Question

我是一个新的颤振学习者，正在尝试创建我的第一个应用程序。我的问题是...

(1)。我使用一种方法为来自画廊或相机的图像构建一个位置（小部件）。

    void _showPicker(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return SafeArea(
            child: Container(
              child: new Wrap(
                children: <Widget>[
                  new ListTile(
                      leading: new Icon(Icons.photo_library),
                      title: new Text('Gallery'),
                      onTap: () {
                        _imgFromGallery();
                        Navigator.of(context).pop();
                      }),
                  new ListTile(
                    leading: new Icon(Icons.photo_camera),
                    title: new Text('Camera'),
                    onTap: () {
                      _imgFromCamera();
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            ),
          );
        });
  }

(2)。我创建了一种使用image_picker包导入图像的方法。

Future _imgFromGallery() async {
    final pickedImage =
        await _picker.getImage(source: ImageSource.gallery, imageQuality: 50);

    setState(() {
      if (pickedImage != null) {
        this._image = new File(pickedImage.path);
      }
    });
  }

(3)。我创建了一个按钮，如果按下该按钮，将调用方法 (1) 和方法 (1) 包含方法 (2)。

(4)。当我添加第一张图片时，一切都很好，但是当我添加第二张图片时，第一张图片也变成了第二张

图片

那么，你能帮我解决这个问题吗？

抱歉，我没有分享调用 _showPicker（显示图像的函数）的代码，这里是代码...请关注GestureDetector(...),

_createListStepRow(String item, int index) {
    return Column(children: [
      Container(
        margin: EdgeInsets.only(top: 3),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: new BorderRadius.circular(15),
            border: Border.all(color: Colors.black)),
        child: Column(children: [
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
            Container(
              width: 1175.0.w,
              child: TextField(
                  autofocus: this.autoFocus,
                  cursorColor: Colors.black,
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.restaurant_outlined,
                      color: Constants.primaryColor,
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(15),
                      borderSide: BorderSide(color: Colors.white, width: 1.5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide(color: Colors.white, width: 0),
                    ),
                    contentPadding: EdgeInsets.symmetric(vertical: 8),
                    hintText: item,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  )),
            ),
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _itemsStep.removeAt(index);
                });
              },
            ),
          ]),
          GestureDetector(
            onTap: () async {
              _showPicker(context);
            },
            child: Container(
              padding: EdgeInsets.all(8),
              // height: 800.0.h,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                // image: DecorationImage(
                //   image: AssetImage('assets/images/food1.jpg'),
                //   fit: BoxFit.fill,
                // ),
                shape: BoxShape.rectangle,
              ),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    new Column(children: [
                      Container(
                        // height: 200.0.h,r
                        child: _image == null
                            ? _nullImage
                            : Image.file(_image, fit: BoxFit.contain),
                      ),
                      // Text(
                      //   'Click to Add Step Image',
                      //   style: GoogleFonts.poppins(fontSize: 14),
                      // ),
                    ]),
                  ]),
            ),
          ),
          SizedBox(height: 60.0.h),
        ]),
      ),
      SizedBox(height: 30.0.h),
    ]);
  }

标签： flutter

Answer 1

首先，您没有存储图像。你基本上是在选择最新的。让我们解决这个问题。找到您声明的位置var _image;并将其更改为final List<File> _images;.

接下来，将Columnin更改GestureDetector为_showPicker：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    new ListView.builder(
      itemBuilder: (context, index) {
        return Container(
          // height: 200.0.h,r
          child: _images[index] == null
              ? _nullImage
              : Image.file(_images[index], fit: BoxFit.contain),
        );
      },
      itemCount: _images.length,
      // Text(
      //   'Click to Add Step Image',
      //   style: GoogleFonts.poppins(fontSize: 14),
      // ),
    )
  ],
),

如果您提供的代码如您之前所说的那样工作，那么这应该可以工作。