Flutter Circle Menu onPressed Action
196
In your _buildButton
you can an action callback like this
_buildButton(double angle, Function callback, {Color color, IconData icon}) {
// ...
}
Then by building a button you can either pass _open
or _close
Author by
Wolf
Updated on December 26, 2022Comments
-
Wolf over 1 year
I'm a beginner with Flutter, I have create a circle menu with Flutter, I got 6 buttons inside it and i want to go to different page depend of what button have been clicked. I know how to navigate to another page, but the problem is I can only use 1 action ("close action"). Maybe I can put an argument on the _buildbutton for the onPressed ?
import 'package:flutter/material.dart'; import 'dart:math'; import 'package:vector_math/vector_math.dart' show radians; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFFB3E5FC), body: SizedBox.expand(child: RadialMenu())), ); } } class RadialMenu extends StatefulWidget { createState() => _RadialMenuState(); } class _RadialMenuState extends State<RadialMenu> with SingleTickerProviderStateMixin { AnimationController controller; void initState() { super.initState(); controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this); } Widget build(BuildContext context) { return RadialAnimation(controller: controller); } } class RadialAnimation extends StatelessWidget { RadialAnimation({Key key, this.controller}) : scale = Tween<double>( begin: 1.5, end: 0.0, ).animate( CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn), ), translation = Tween<double>( begin: 0.0, end: 100.0, ).animate( CurvedAnimation(parent: controller, curve: Curves.linear), ), rotation = Tween<double>(begin: 0.0, end: 360.0).animate( CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.7, curve: Curves.decelerate, )), ), super(key: key); final AnimationController controller; final Animation<double> scale; final Animation<double> translation; final Animation<double> rotation; build(context) { return AnimatedBuilder( animation: controller, builder: (context, builder) { return Transform.rotate( angle: radians(rotation.value), child: Stack(alignment: Alignment.center, children: [ _buildButton(0, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.chartBar), _buildButton(60, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.clipboard), _buildButton(120, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.chartBar), _buildButton(180, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.book), _buildButton(240, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.arrowsAltV), _buildButton(300, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.phoneAlt), _buildButton(360, color: Color(0xFF29B6F6), icon: FontAwesomeIcons.compressAlt), Transform.scale( scale: scale.value - 1.5, child: FloatingActionButton( child: Icon(FontAwesomeIcons.timesCircle), onPressed: _close, backgroundColor: Color(0xFF29B6F6)), ), Transform.scale( scale: scale.value, child: FloatingActionButton( child: Icon(FontAwesomeIcons.solidDotCircle), onPressed: _open, backgroundColor: Color(0xFF29B6F6)), ), ])); }); } _buildButton(double angle, {Color color, IconData icon}) { final double rad = radians(angle); return Transform( transform: Matrix4.identity() ..translate( (translation.value) * cos(rad), (translation.value) * sin(rad)), child: FloatingActionButton( child: Icon(icon), backgroundColor: color, onPressed: _close)); } _open() { controller.forward(); } _close() { controller.reverse(); } }
-
Wolf over 3 yearsThanks you, for your answer !
-