Flutter 合并图像列表

Posted 2023-02-23

【中文标题】Flutter 合并图像列表

【英文标题】：Flutter Merging List of Images

【发布时间】：2021-02-11 20:45:10

【问题描述】：

我正在合并几张图像并将其显示为一张。 我有两个 dart 文件，一个用于添加图像，另一个用于显示合并结果。

第一个文件代码是，

class SingleImageUpload extends StatefulWidget 
  @override
  _SingleImageUploadState createState() 
    return _SingleImageUploadState();
  


class _SingleImageUploadState extends State<SingleImageUpload> 
  List<Object> images = List<Object>();
  
  File _selectedFile;
  bool _inProcess = false;
  Map data = ;
  Readerservice _readerservice;
  @override
  void initState() 
    // TODO: implement initState
    super.initState();
    setState(() 
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    );
  

  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          leading: Padding(
            padding: EdgeInsets.only(left: 12),
            child: IconButton(
              icon: Icon(Icons.arrow_back_ios,
                color: Colors.black,
                size: 30,),
              onPressed: () 
                Navigator.pushNamed(context, '/');

              ,
            ),
          ),
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children:<Widget>[
                Text('Basic AppBar'),
              ]
          ),
          actions: <Widget>[

            IconButton(
              icon: Icon(Icons.more_vert,
                color: Colors.black,
                size: 30,),
              onPressed: () 
                print('Click start');
              ,
            ),
          ],

        ),
        body:
        Column(
          children: <Widget>[
            SizedBox(height: 10),
            Row(children: <Widget>[
              Text('Image',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 33,
                    fontWeight: FontWeight.bold,
                  )),
              Text('Merger',
                  style: TextStyle(
                    color: Colors.orange,
                    fontSize: 33,
                    fontWeight: FontWeight.bold,
                  )),
            ]),
            SizedBox(height: 40),
            Text(' merge it here'),
            SizedBox(height: 10),
            Expanded(
              child: buildGridView(),
            ),
            RaisedButton(
              textColor: Colors.white,
              color: Colors.orange,
              child: Text("Finish",
                style: TextStyle(fontSize: 15),),
              onPressed: () 
                pasimage();
              ,
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(8.0),
              ),
            ),
          ],

        ),
      ),

    );
  

  Widget buildGridView() 
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      childAspectRatio: 1,
      children: List.generate(images.length, (index) 
        if (images[index] is ImageUploadModel) 
          ImageUploadModel uploadModel = images[index];
          return Card(
            clipBehavior: Clip.antiAlias,
            child: Stack(
              children: <Widget>[
                Image.file(
                  uploadModel.imageFile,
                  width: 300,
                  height: 300,
                ),
                Positioned(
                  right: 5,
                  top: 5,
                  child: InkWell(
                    child: Icon(
                      Icons.remove_circle,
                      size: 20,
                      color: Colors.red,
                    ),
                    onTap: () 
                      setState(() 
                        images.replaceRange(index, index + 1, ['Add Image']);
                      );
                    ,
                  ),
                ),
              ],
            ),
          );
         else 
          return Card(
            child: IconButton(
              icon: Icon(Icons.add),
              onPressed: () 
                //popup
                showDialog(
                  context: context,
                  builder: (context) 
                    return Dialog(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      elevation: 16,
                      child: Container(
                        height: 180.0,
                        width: 330.0,
                        child: ListView(
                          children: <Widget>[
                            SizedBox(height: 20),
                            //Center(
                            Padding(
                              padding: const EdgeInsets.only(left: 15.0),
                              child: Text(
                                "Add a Receipt",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    fontSize: 24,
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                            // ),
                            SizedBox(height: 20),
                            FlatButton(
                              child: Text(
                                'Take a photo..',
                                textAlign: TextAlign.left,
                                style: TextStyle(fontSize: 20),
                              ),
                              onPressed: () 
                                _onAddImageClick(index,ImageSource.camera);
                                Navigator.of(context).pop();

                                // picker.getImage(ImageSource.camera);
                              ,
                              textColor: Colors.black,
                            ),
                            FlatButton(
                              child: Text(
                                'Choose from Library..',
                                style: TextStyle(fontSize: 20),
                                textAlign: TextAlign.left,
                              ),
                              onPressed: () 
                                _onAddImageClick(index,ImageSource.gallery);
                                Navigator.of(context).pop();
                              ,
                              textColor: Colors.black,
                            ),
                          ],
                        ),
                      ),
                    );
                  ,
                );
                //pop ends
              
              ,
            ),
          );
        
      ),
    );

  

  Future  _onAddImageClick(int index, ImageSource source ) async 
    setState(() 
      _inProcess = true;
    );
    File image = await ImagePicker.pickImage(source: source);
      if(image != null)
        File cropped = await ImageCropper.cropImage(
            sourcePath: image.path,
            maxWidth: 1080,
            maxHeight: 1080,

            compressFormat: ImageCompressFormat.jpg,
            androidUiSettings: AndroidUiSettings(
                toolbarColor: Colors.black,
                toolbarWidgetColor: Colors.white,
                //toolbarTitle: "RPS Cropper",
                statusBarColor: Colors.deepOrange.shade900,
                backgroundColor: Colors.black,
                initAspectRatio: CropAspectRatioPreset.original,
                lockAspectRatio: false
            ),
            iosUiSettings: IOSUiSettings(
              minimumAspectRatio: 1.0,
            )
        );

        this.setState(()
          _selectedFile = cropped ;
          _inProcess = false;
        );
       else 
        this.setState(()
          _inProcess = false;
        );
      
      getFileImage(index);
    


  void getFileImage(int index) async 
//    var dir = await path_provider.getTemporaryDirectory();


      setState(() 
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.isUploaded = false;
        imageUpload.uploading = false;
        imageUpload.imageFile = _selectedFile;
        imageUpload.imageUrl = '';
        images.replaceRange(index, index + 1, [imageUpload]);
      );

  
void pasimage()


  Navigator.pushReplacementNamed(context, '/crop',arguments: 
    'imageList':ImagesMerge(
      images,///required,images list
    direction: Axis.vertical,///direction
  backgroundColor: Colors.black26,///background color
  fit: false,///scale image to fit others
  
  ),
  );




class ImageUploadModel 
  bool isUploaded;
  bool uploading;
  File imageFile;
  String imageUrl;

  ImageUploadModel(
    this.isUploaded,
    this.uploading,
    this.imageFile,
    this.imageUrl,
  );

当我在添加图像后点击完成按钮时显示错误 处理手势时抛出以下_TypeError： “List”类型不是“List”类型的子类型

刚刚打开的页面捕获上面代码发送的数据并显示图像。

请如果有人知道错误原因并帮助我。

【参考方案1】：

将images 更改为List<Object> images = []。

【讨论】：

图像合并将只接受图像列表而不接受对象列表或文件列表。