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.