Flutter Birleştirme Görüntü Listesi

Oct 29 2020

Birkaç resmi birleştirip tek bir görüntü olarak göstermeye çalışıyordum. Biri resim eklemek ve diğeri birleştirilmiş sonucu görüntülemek için iki dart dosyam var.

ilk dosya kodu,


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,
  });
}

resimleri ekledikten sonra bitir düğmesine dokunduğumda bir hata gösteriyor Aşağıdaki _TypeError bir hareket işlenirken atıldı: 'Liste' türü 'Liste' türünün bir alt türü değil

Hemen üzerindeki sayfa, yukarıdaki koddan gönderilen verileri yakalar ve resmi gösterir.

lütfen hata neden olduğunu bilen varsa ve bana yardım et

Yanıtlar

ahmed Oct 30 2020 at 08:09

Değişim imagesTo List<Object> images = [].