'Floating action button with text label. Flutter

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

dart flutter

Solution 1:^[1]

You can use this flutter package flutter_fab Or you can refer from this article Create Animated FAB in flutter.

Solution 2:^[2]

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,
)

Solution 3:^[3]

You can also use this flutter_speed_dial

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

Solution 4:^[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),
      ),
    );
  }
}

Solution 5:^[5]

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

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

Solution 6:^[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	yashthakkar2898
Solution 2	Jatin Pandey
Solution 3	SilenceCodder
Solution 4	Mehran Ullah
Solution 5
Solution 6	Jigar Fumakiya

'Floating action button with text label. Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]