带快速拨号的颤动浮动动作按钮

问题描述

是否有现成的小部件或从哪里开始

import 'package:flutter/material.dart';导入 'dart:math' 作为数学；无效主(){运行应用程序(新的我的应用程序())；}class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回新的 MaterialApp(主页:新的我的主页()，);}}class MyHomePage 扩展了 StatefulWidget {@覆盖状态 createState() =>新的 MyHomePageState();}类 MyHomePageState 扩展了 State与 TickerProviderStateMixin {动画控制器_控制器；静态常量列表图标 = const [ Icons.sms, Icons.mail, Icons.phone ];@覆盖无效的初始化状态(){_controller = 新的动画控制器(垂直同步:这个，持续时间:const 持续时间(毫秒:500)，);}小部件构建(BuildContext 上下文){颜色 backgroundColor = Theme.of(context).cardColor;颜色 foregroundColor = Theme.of(context).accentColor;返回新的脚手架(appBar: new AppBar(title: new Text('Speed Dial Example')),浮动操作按钮:新列(mainAxisSize: MainAxisSize.min,孩子:新 List.generate(icons.length, (int index) {小部件孩子 = 新容器(高度:70.0，宽度:56.0，对齐:FractionalOffset.topCenter，孩子:新的ScaleTransition(比例:新的曲线动画(父级:_controller，曲线:新间隔(0.0,1.0 - 索引/icons.length/2.0，曲线:Curves.easeOut),),孩子:新的浮动操作按钮(英雄标签:空，背景颜色:背景颜色，迷你:真的，孩子:新图标(图标[索引]，颜色:前景颜色)，onPressed: () {},),),);返回孩子；}).toList()..add(新的浮动操作按钮(英雄标签:空，孩子:新的AnimatedBuilder(动画:_controller，生成器:(BuildContext 上下文，小部件子项){返回新的变换(变换:新 Matrix4.rotationZ(_controller.value * 0.5 * math.pi)，对齐:FractionalOffset.center，孩子:新图标(_controller.isDismissed?Icons.share:Icons.close)，);},),按下: () {如果(_controller.isDismissed){_controller.forward();} 别的 {_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();
              }
            },
          ),
        ),
      ),
    );
  }
}

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