Rotate Image in Flutter
205
I've played a bit and got this code. I put a reverse rotation for the picture and changed the indents.
class Test extends StatelessWidget {
Test({Key? key}) : super(key: key);
final kInnerDecoration = BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(32),
);
final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
borderRadius: BorderRadius.circular(32),
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 50)),
Expanded(
child: Transform(
alignment: FractionalOffset.center,
transform: Matrix4.rotationZ(
3.1415926535897932 / 4,
),
child: Container(
// margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationZ(
-3.1415926535897932 / 4,
),
child: Image.asset(
"assets/image.png",
height: 100,
width: 100,
),
),
decoration: kInnerDecoration,
),
),
height: 100,
width: 150,
decoration: kGradientBoxDecoration,
),
),
),
Padding(padding: EdgeInsets.only(top: 50)),
Expanded(
child: Text("Name Row"),
),
],
),
),
Expanded(
child: Text("Bottom"),
),
],
),
),
),
);
}
}
Author by
3Bady
Updated on November 26, 2022Comments
-
3Bady over 1 year
I'm trying to rotate image inside rotated box in flutter, I know the image is inside the box and because of that it's also rotating with it, but I want to rotate it back "only the image inside the box, I want to keep the box rotated as it is" as normal.
Here is my current code:
body: Center( child: Column( children: <Widget>[ Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Transform( alignment: Alignment.center, transform: Matrix4.rotationZ( 3.1415926535897932 / 4, ), child: Container( margin: const EdgeInsets.only(top: 20.0), child: Padding( padding: const EdgeInsets.all(2.0), child: Container( child: Image.asset("assets/images/man.png"), decoration: kInnerDecoration, ), ), height: 66.0, decoration: kGradientBoxDecoration, ), ), ), Expanded( child: Text("Name Row"), ), ], ), ), Expanded( child: Text("Bottom"), ), ], ), )
-
3Bady about 2 yearsIt's the image in the semi diamond shape, I don't think there is a use for it here ...
-
nagendra nag about 2 yearsdo you want container to be in same position?
-
3Bady about 2 yearsI updated the question with how I want it to look like, the drawing is kind of bad but hopefully it's clear. Please take a look at it
-