Flutter FloatingActionButton extended – Icon With Label

Flutter FloatingActionButton.extended()

For FloatingActionButton button, you have a child, where you generally provide icon, image or text.

But using FloatingActionButton.extended(), you can provide icon and label. The FloatingActionButton.extended() with an icon and label looks as shown below.

Flutter FloatingActionButton.extended() - Icon With Label

In this tutorial, we will learn how to use FloatingActionButton.extended() with an example application.

Example: FloatingActionButton.extened() with an icon and label

In this example, we will create a basic Flutter Application, and place a FloatingActionButton.extended() in a Scaffold as shown in the following main.dart file.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: (){},
        icon: Icon(Icons.refresh),
        label: Text('Refresh'),
      ),
    );
  }
}

Screenshot

Summary

In this Flutter Tutorial, we learned how to use FloatingActionButton.extended() to display an icon along with a label for a Floating Action Button.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.