flutter - 显示多张从相机拍摄的照片

Question

我正在使用颤振的“image_picker”插件来拍照并在我的应用程序上显示。我的问题是我需要展示不止一张图片。因此，如果您拍摄第二张照片，它应该显示在前一张照片的旁边。

到目前为止，我已尝试将拍摄的图像保存到列表中，因此我可以通过构建器中的“_imageList [index]”显示它们

 List<File> _imageList = []; 

  void _getImage(File _image) {
    setState(() {
      _imageList.add(_image);
    });
  }


  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: ListView(
        padding: EdgeInsets.only(top: 70.0),
        children: [Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: TextField(
                  textAlign: TextAlign.center, 
                  style: TextStyle(
                    color: Colors.white
                  ),
                  decoration: InputDecoration(
                    hintText: "Ingrese título opcional",
                    hintStyle: TextStyle(color: Colors.red[200]),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Theme.of(context).accentColor)
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Theme.of(context).accentColor)
                      ),  
                    )
                  ),
                )
              ],
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: ListView.builder(
                itemCount: _imageList.length,
                itemBuilder: (context, index) {
                  return Image.file(_imageList[index]);
                },
              ),
            ),
        ],)]
        ,),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.camera_alt),
                color: Theme.of(context).primaryColor,
                onPressed: () async {
                  File _image = await ImagePicker.pickImage(source: ImageSource.gallery);
                  _getImage(_image);
                },
              ),
              IconButton(
                icon: Icon(Icons.videocam),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
              IconButton(
                icon: Icon(Icons.mic),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
              IconButton(
                icon: Icon(Icons.create),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
            ],
          ),
        ),
    );
  }
}

请帮忙，我真的不知道还能做什么

它没有显示错误，它让我拍照，但它们没有显示

标签： flutterdart

Answer 1

class _MyHomePageState extends State<MyHomePage> {

  List<File> _imageList = [];


  void _addImage(File _image) {
    setState(() {
      _imageList.add(_image);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          MaterialButton(
            child: Text("Add Image:  ${_imageList.length}"),
            onPressed: () async {
              var _image =
                  await ImagePicker.pickImage(source: ImageSource.gallery);
              print(_image.path);
              _addImage(_image);
            },
          ),
          Expanded(
            child: ListView.builder(
                itemCount: _imageList.length,
                itemBuilder: (context, index) {
                  return InkWell(
                      onTap: () {
                        return null;
                      },
                      child: Card(
                        child: Container(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(_imageList[index].path),
                          ),
                        ),
                      ));
                }),
          ),
        ],
      ),
    );
  }
}