带有快速拨盘的Flutter浮动动作按钮 [英] Flutter floating action button with speed dial

问题描述

是否有任何现成的小部件或从何处开始

 导入'package：flutter / material.dart'; 
以数学形式导入 dart：math； 
 
 void main（）{
 runApp（new MyApp（））; 
} 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new MaterialApp（
 home：new MyHomePage（），
）; 
} 
} 
 
类MyHomePage扩展了StatefulWidget {
 @override 
 State createState（）=>新的MyHomePageState（）; 
} 
 
类MyHomePageState扩展了State< MyHomePage>与TickerProviderStateMixin {
 AnimationController _controller; 
 
静态const List< IconData> icons = const [Icons.sms，Icons.mail，Icons.phone]; 
 
 @override 
 void initState（）{
 _controller = new AnimationController（
 vsync：this，
 duration：const Duration（milliseconds：500）， 
）; 
} 
 
小部件build（BuildContext context）{
 Color backgroundColor = Theme.of（context）.cardColor; 
 Color frontColor = Theme.of（context）.accentColor; 
返回新的Scaffold（
 appBar：new AppBar（标题：new Text（'快速拨号示例'）），
 floatActionButton：new Column（
 mainAxisSize：MainAxisSize.min，
子代：new List.generate（icons.length，（int index）{
小部件子代= new Container（
高度：70.0，
宽度：56.0，
对齐：FractionalOffset.topCenter，
子级：new ScaleTransition（
缩放度：new CurvedAnimation（
父级：_controller，
曲线：new Interval（
 0.0，
 1.0-index / icons.length / 2.0，
曲线：Curves.easeOut 
），
），
子级：new FloatingActionButton（
 heroTag：null，
 backgroundColor：backgroundColor，
 mini：true，
 child：new Icon（icons [index]， color：前景颜色），
 onPressed：（）{}，
），
），
）; 
个回返孩子； 
}}。toList（）.. add（
 new FloatingActionButton（
 heroTag：null，
 child：new AnimatedBuilder（
 animation：_controller，
 builder：（BuildContext上下文，Widget子项）{
 return new Transform（
 transform：new Matrix4.rotationZ（_controller.value * 0.5 * math.pi），
对齐方式：FractionalOffset.center 
的孩子：new Icon（_controller.isDismissed？Icons.share：Icons.close），
），
}，
），
 onPressed：（）{
 if（_controller.isDismissed）{
 _controller.forward（）; 
} else {
 _controller.reverse（）; 
} 
}，
），
），
），
）； 
} 
} 
  

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

解决方案

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();
              }
            },
          ),
        ),
      ),
    );
  }
}

这篇关于带有快速拨盘的Flutter浮动动作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！