I am new to flutter trying to create image selection and rotation app. I do not know how to make an image placed inside GridTile of GridView widget rotate on predefined angle on tap event while keeping the state of the last angle rotation.
I've tried using Transform.rotate widget linked to GridTile on tap event but I am unsuccessful. I am using multi_image_picker dart plugin to select and
import 'dart:math';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:developer' as developer;
import 'package:multi_image_picker/multi_image_picker.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Asset> images = List<Asset>();
String _error = 'No Error Dectected';
@override
void initState() {
super.initState();
}
Future goToDetailsPage(BuildContext context, Asset asset) async {
String path = await asset.filePath;
developer.log(path, name: 'my.app.main');
Transform.rotate(
angle: pi/2,
child: AssetThumb(
asset: asset,
width: 300,
height: 300,
)
);
}
Widget buildGridView() {
return GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
return GestureDetector(
child: GridTile(child: AssetThumb(
asset: asset,
width: 300,
height: 300,
),),
onTap: () {
goToDetailsPage(context, asset);
},
);
}),
);
}
Future<void> loadAssets() async {
List<Asset> resultList = List<Asset>();
String error = 'No Error Dectected';
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 300,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Example App",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
for (var r in resultList) {
var t = await r.filePath;
print(t);
}
} on Exception catch (e) {
error = e.toString();
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
images = resultList;
_error = error;
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Plugin example app'),
),
body: Column(
children: <Widget>[
Center(child: Text('Error: $_error')),
RaisedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
)
],
),
),
);
}
}
No responses yet.