preface

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.

This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.

This series of articles is for those who already have some of the basics of FLUTTER

The body of the

The wheel

  • Wheel name: Flutter_speed_dial
  • Overview of wheels: Float buttons for flutter options.
  • Wheels by [email protected]
  • ★★★★ ★
  • ★★★
  • Effect preview:

The installation

dependencies:
  flutter_speed_dial: ^ 1.
Copy the code
import 'package:flutter_speed_dial/flutter_speed_dial.dart';
Copy the code

Method of use

Easiest to use:

return Scaffold(
    body: Container(),
    floatingActionButton: SpeedDial(
     	child: Icon(Icons.add),
     	children:[
            SpeedDialChild(
                child: Icon(Icons.accessibility),
                backgroundColor: Colors.red,
                label: 'First button',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('FIRST CHILD')
            ),
            SpeedDialChild(
                child: Icon(Icons.brush),
                backgroundColor: Colors.orange,
                label: 'Second button',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('SECOND CHILD'),
            ),
            SpeedDialChild(
                child: Icon(Icons.keyboard_voice),
                backgroundColor: Colors.green,
                label: 'Third button',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('THIRD CHILD'(), [(), [().Copy the code

All options that can be configured:

floatingActionButton: SpeedDial(
    marginRight: 25./ / the right margin
    marginBottom: 50./ / bottom margin
    animatedIcon: AnimatedIcons.menu_close,// Push the button to draw
    animatedIconTheme: IconThemeData(size: 22.0),
    visible: isShow,// Whether to display the button
    closeManually: false.// Whether to close the expansion item after clicking the child button
    curve: Curves.bounceIn,// Expand the animation curve
    overlayColor: Colors.black,// Mask layer color
    overlayOpacity: 0.5.// Mask layer transparency
    onOpen: () => print('OPENING DIAL'),// Expand the callback
    onClose: () => print('DIAL CLOSED'),// Close the callback
    tooltip: 'Speed Dial'.// Long press the prompt text
    heroTag: 'speed-dial-hero-tag'./ / hero
    backgroundColor: Colors.blue,// Button background color
    foregroundColor: Colors.white,// Button foreground color/text color
    elevation: 8.0./ / the shadow
    shape: CircleBorder(),/ / shape modification
    children: [/ / button
        SpeedDialChild(
            child: Icon(Icons.accessibility),
            backgroundColor: Colors.red,
            label: 'First button',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(1);
            }
        ),
        SpeedDialChild(
            child: Icon(Icons.brush),
            backgroundColor: Colors.orange,
            label: 'Second button',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(2);
            },
        ),
        SpeedDialChild(
            child: Icon(Icons.keyboard_voice),
            backgroundColor: Colors.green,
            label: 'Third button',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(3); }),]),Copy the code

At the end

  • Address of wheel warehouse: pub.flutter-io.cn/packages/fl…
  • Series demo source: github.com/826327700/f…