mirror of
https://github.com/AyanDas-99/Flutter-animations.git
synced 2025-05-17 05:45:59 +08:00
added radial menu animation
This commit is contained in:
115
lib/Screens/practice2.dart
Normal file
115
lib/Screens/practice2.dart
Normal file
@ -0,0 +1,115 @@
|
||||
// ignore_for_file: public_member_api_docs, sort_constructors_first
|
||||
import 'dart:math';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:vector_math/vector_math_64.dart' show radians;
|
||||
|
||||
class Practice2 extends StatefulWidget {
|
||||
final String title;
|
||||
const Practice2({
|
||||
Key? key,
|
||||
required this.title,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<Practice2> createState() => _Practice2State();
|
||||
}
|
||||
|
||||
class _Practice2State extends State<Practice2>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
controller =
|
||||
AnimationController(vsync: this, duration: Duration(milliseconds: 700));
|
||||
// ..forward();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List angles = List.generate(6, (index) => index * 360 / 6);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(widget.title)),
|
||||
body: Center(
|
||||
child: RotationTransition(
|
||||
turns: Tween<double>(begin: 0, end: 0.3).animate(controller),
|
||||
child: Stack(
|
||||
children: [
|
||||
Btn(const Icon(Icons.call), 100, angles.removeAt(0), controller),
|
||||
Btn(const Icon(Icons.ac_unit_sharp), 100, angles.removeAt(0),
|
||||
controller),
|
||||
Btn(const Icon(Icons.access_time_filled_rounded), 100,
|
||||
angles.removeAt(0), controller),
|
||||
Btn(const Icon(Icons.account_balance), 100, angles.removeAt(0),
|
||||
controller),
|
||||
Btn(const Icon(Icons.add_a_photo), 100, angles.removeAt(0),
|
||||
controller),
|
||||
Btn(const Icon(Icons.adb), 100, angles.removeAt(0), controller),
|
||||
Btn(const Icon(Icons.close), 0, 0, controller),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
if (controller.isCompleted) {
|
||||
controller.reverse();
|
||||
} else {
|
||||
controller.forward();
|
||||
}
|
||||
},
|
||||
child: IgnorePointer(
|
||||
child: ScaleTransition(
|
||||
scale:
|
||||
Tween<double>(begin: 1, end: 0).animate(controller),
|
||||
child: Btn(
|
||||
const Icon(Icons.open_with), 0, 0, controller)))),
|
||||
],
|
||||
),
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Btn extends StatefulWidget {
|
||||
final Widget icon;
|
||||
final double radius;
|
||||
final double angle;
|
||||
final AnimationController controller;
|
||||
|
||||
const Btn(this.icon, this.radius, this.angle, this.controller);
|
||||
|
||||
@override
|
||||
State<Btn> createState() => _BtnState();
|
||||
}
|
||||
|
||||
class _BtnState extends State<Btn> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
late Animation<Offset> animation = Tween<Offset>(
|
||||
begin: Offset(0, 0),
|
||||
end: Offset(widget.radius * cos(radians(widget.angle)),
|
||||
widget.radius * sin(radians(widget.angle))))
|
||||
.animate(CurvedAnimation(
|
||||
parent: widget.controller,
|
||||
curve: const Interval(0, 0.7, curve: Curves.easeOut)));
|
||||
|
||||
return AnimatedBuilder(
|
||||
animation: widget.controller,
|
||||
builder: (context, child) => Transform.translate(
|
||||
offset: animation.value,
|
||||
child: IconButton(
|
||||
onPressed: () {},
|
||||
icon: widget.icon,
|
||||
style: const ButtonStyle(
|
||||
backgroundColor: MaterialStatePropertyAll(Colors.red),
|
||||
iconColor: MaterialStatePropertyAll(Colors.white)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -9,6 +9,7 @@ import 'package:animations/Screens/lecture6.dart';
|
||||
import 'package:animations/Screens/lecture8.dart';
|
||||
import 'package:animations/Screens/lecture9.dart';
|
||||
import 'package:animations/Screens/practice1.dart';
|
||||
import 'package:animations/Screens/practice2.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'Screens/lecture1.dart';
|
||||
@ -50,7 +51,8 @@ class MyApp extends StatelessWidget {
|
||||
'lec8/': (context) => const Lecture8(title: "3D Drawer"),
|
||||
'lec9/': (context) => const Lecture9(
|
||||
title: "Animated Prompt",
|
||||
)
|
||||
),
|
||||
'practice2/': (context) => const Practice2(title: "Radial Menu"),
|
||||
},
|
||||
);
|
||||
}
|
||||
@ -93,6 +95,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||
Link(link: 'lec7/', title: "CustomPainter & Polygons"),
|
||||
Link(link: 'lec8/', title: "3D Drawer"),
|
||||
Link(link: 'lec9/', title: "Animated Prompt"),
|
||||
Link(link: 'practice2/', title: "Radial Menu")
|
||||
],
|
||||
),
|
||||
),
|
||||
|
Reference in New Issue
Block a user