Блог

Я работал над объединением нескольких изображений и отображением их как одного. У меня есть два файла 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’

Только что включенная страница фиксирует данные, отправленные из приведенного выше кода, и отображает изображение.

пожалуйста, если кто-нибудь знает причину ошибки и поможет мне.

Измените значение images на List<Object> images = [] .