Botón de acción flotante Flutter con marcación rápida

Luego de investigar con especialistas en esta materia, programadores de diversas ramas y profesores dimos con la respuesta al dilema y la plasmamos en esta publicación.

Solución:

Aquí hay un esquema de cómo implementar un De marcación rápida usando 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 with TickerProviderStateMixin 
  AnimationController _controller;

  static const List 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();
              
            ,
          ),
        ),
      ),
    );
  

Este complemento podría servirte: https://pub.dartlang.org/packages/flutter_speed_dial

Necesitas declarar la dependencia en el pubspect.yaml expediente

dependencies:
  flutter:
    sdk: flutter
  flutter_speed_dial: ^1.0.9

Aquí hay un ejemplo:

Widget build(BuildContext context) 
return Scaffold(
    floatingActionButton: SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 22.0),
      // this is ignored if animatedIcon is non null
      // child: Icon(Icons.add),
      visible: _dialVisible,
      curve: Curves.bounceIn,
      overlayColor: Colors.black,
      overlayOpacity: 0.5,
      onOpen: () => print('OPENING DIAL'),
      onClose: () => print('DIAL CLOSED'),
      tooltip: 'Speed Dial',
      heroTag: 'speed-dial-hero-tag',
      backgroundColor: Colors.white,
      foregroundColor: Colors.black,
      elevation: 8.0,
      shape: CircleBorder(),
      children: [
        SpeedDialChild(
          child: Icon(Icons.accessibility),
          backgroundColor: Colors.red,
          label: 'First',
          labelStyle: TextTheme(fontSize: 18.0),
          onTap: () => print('FIRST CHILD')
        ),
        SpeedDialChild(
          child: Icon(Icons.brush),
          backgroundColor: Colors.blue,
          label: 'Second',
          labelStyle: TextTheme(fontSize: 18.0),
          onTap: () => print('SECOND CHILD'),
        ),
        SpeedDialChild(
          child: Icon(Icons.keyboard_voice),
          backgroundColor: Colors.green,
          label: 'Third',
          labelStyle: TextTheme(fontSize: 18.0),
          onTap: () => print('THIRD CHILD'),
        ),
      ],
    ),
);

---

---

Utiliza Nuestro Buscador