Flutter floating action button with speed dial

Question

Is there any ready made widget or where to get started floating action button with speed dial actions in Flutter.

Answer 1

Here's a sketch of how to implement a Speed dial using FloatingActionButton.

import 'package:flutter/material.dart'; import 'dart:math' as math;  void main() {   runApp(new MyApp()); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(       home: new MyHomePage(),     );   } }  class MyHomePage extends StatefulWidget {   @override   State createState() => new MyHomePageState(); }  class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {   AnimationController _controller;    static const List<IconData> icons = const [ Icons.sms, Icons.mail, Icons.phone ];    @override   void initState() {     _controller = new AnimationController(       vsync: this,       duration: const Duration(milliseconds: 500),     );   }    Widget build(BuildContext context) {     Color backgroundColor = Theme.of(context).cardColor;     Color foregroundColor = Theme.of(context).accentColor;     return new Scaffold(       appBar: new AppBar(title: new Text('Speed Dial Example')),       floatingActionButton: new Column(         mainAxisSize: MainAxisSize.min,         children: new List.generate(icons.length, (int index) {           Widget child = new Container(             height: 70.0,             width: 56.0,             alignment: FractionalOffset.topCenter,             child: new ScaleTransition(               scale: new CurvedAnimation(                 parent: _controller,                 curve: new Interval(                   0.0,                   1.0 - index / icons.length / 2.0,                   curve: Curves.easeOut                 ),               ),               child: new FloatingActionButton(                 heroTag: null,                 backgroundColor: backgroundColor,                 mini: true,                 child: new Icon(icons[index], color: foregroundColor),                 onPressed: () {},               ),             ),           );           return child;         }).toList()..add(           new FloatingActionButton(             heroTag: null,             child: new AnimatedBuilder(               animation: _controller,               builder: (BuildContext context, Widget child) {                 return new Transform(                   transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),                   alignment: FractionalOffset.center,                   child: new Icon(_controller.isDismissed ? Icons.share : Icons.close),                 );               },             ),             onPressed: () {               if (_controller.isDismissed) {                 _controller.forward();               } else {                 _controller.reverse();               }             },           ),         ),       ),     );   } }