带有文本标签的浮动操作按钮。 扑

Question

I need floating action button like this:

.

Are there standard tools for implementation? I watched both the standard version of the button and the extended one, but did not find anything

Answer 1

You don't need to use an external library because it will grow the size of your bundle.

This is the code:

FloatingActionButton.extended(
    onPressed: () {
      // Add your onPressed code here!
    },
    label: Text('Approve'),
    icon: Icon(Icons.thumb_up),
    backgroundColor: Colors.pink,
) 

Answer 2

你可以使用这个flutter包flutter_fab或者你可以参考这篇文章在flutter中创建动画FAB 。

Answer 3

You can also use this flutter_speed_dial

https://pub.dev/packages/flutter_speed_dial#-readme-tab-

Answer 4

You can use FloatingActionButton.Extended.

just copy and paste the code and see the result itself

  import 'package:flutter/material.dart';

class TestClass extends StatefulWidget {
  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  bool floatExtended = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
        width: 272,
        height: 168,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20), color: Colors.indigo),
      )),
      floatingActionButton: FloatingActionButton.extended(
        tooltip: 'Create Card',
        label: Row(
          children: [
            IconButton(onPressed: () {}, icon: Icon(Icons.save)),
            IconButton(onPressed: () {}, icon: Icon(Icons.library_add_check)),

            // Text('1'),
            // Text('2'),
            // Text('3'),
          ],
        ),
        isExtended: floatExtended,
        icon: Icon(
          floatExtended == true ? Icons.close : Icons.radio_button_on,
          color: floatExtended == true ? Colors.red : Colors.black,
        ),
        onPressed: () {
          setState(() {
            floatExtended = !floatExtended;
          });
        },
        backgroundColor: floatExtended == true
            ? Colors.blueGrey
            : Colors.white.withOpacity(.7),
      ),
    );
  }
}

Answer 5

Add a Text("YourText") widget in child of FloatingActionButton. Then it will work.

FloatingActionButton.extended(
     child: Text('Login'),
     backgroundColor: Colors.pink,
     onPressed: null,) 

Answer 6

Use Flow class. It's built-in flutter No need for an external package. The flow was built for this kind of feature.

Here is the doc link https://api.flutter.dev/flutter/widgets/Flow-class.html