Split/Dividing Image into 6 pieces using Image package

Viewed 701

I Was trying a Flutter package called Image [ https://pub.dev/packages/image ] to split Images into 6 different pieces as in the Image Below.

https://i.stack.imgur.com/vlSXh.jpg

But when I try to call A method it is throwing an error called

type 'Image' is not a subtype of type 'Image' in type cast where
I/flutter (18965):   Image is from package:flutter/src/widgets/image.dart
I/flutter (18965):   Image is from package:image/src/image.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as imglib;
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      image = File(pickedFile.path);
    });
  }

  List<Image> splitImage(
      {Image inputImage, int horizontalPieceCount, int verticalPieceCount}) {
    imglib.Image image = inputImage as imglib.Image;

    final int xLength = (image.width / horizontalPieceCount).round();
    final int yLength = (image.height / verticalPieceCount).round();
    List<imglib.Image> pieceList = List<imglib.Image>();

    for (int y = 0; y < verticalPieceCount; y++)
      for (int x = 0; x < horizontalPieceCount; x++) {
        pieceList.add(
          imglib.copyCrop(image, x, y, x * xLength, y * yLength),
        );
      }

    //Convert image from image package to Image Widget to display
    List<Image> outputImageList = List<Image>();
    for (imglib.Image img in pieceList) {
      outputImageList.add(Image.memory(imglib.encodeJpg(img)));
    }

    return outputImageList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            child: Center(
              child: image == null
                  ? Text('No image selected.')
                  : Image.file(image),
            ),
          ),
          Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  getImage();
                },
                child: Text('Upload Image'),
              ),
              RaisedButton(
                onPressed: () {
                  splitImage(
                    inputImage: Image.asset("img1.jpg"),
                    horizontalPieceCount: 3,
                    verticalPieceCount: 3,
                  );
                },
                child: Text('Split Image'),
              )
            ],
          )
        ],
      ),
    );
  }
}

Here I am Trying to get Image from Gallary And Split it into different Parts.

0 Answers
Related