FloatingActionButton

Un FloatingActionButton (FAB) es un botón de icono circular que se desplaza sobre el contenido para promover una acción principal en la aplicación. Los botones de acción flotante se usan más comúnmente en el campo Scaffold.floatingActionButton.

Utilice como máximo un único botón de acción flotante por pantalla. Los botones de acción flotantes deben usarse para acciones positivas como «crear«, «compartir» o «navegar«. (Si se usa más de un botón de acción flotante dentro de una Ruta, entonces asegúrese de que cada botón tenga una etiqueta de héroe única, de lo contrario se lanzará una excepción).

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Floating Action Button Sample'),
    ),
    body: Center(
      child: Text('Press the button below!')
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        // Add your onPressed code here!
      },
      child: Icon(Icons.thumb_up),
      backgroundColor: Colors.blue,
    ),
  );
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, initialIndex: 0, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Titulo'),
      ),
      body: Center(child: Text('Presiona el botón de abajo!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Se ejecuta este codigo al hacer clic en el action button
        },
        child: Icon(Icons.thumb_up),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

Podemos elegir la posición de nuestro FAB con el parámetro floatingActionButtonLocation, que recibe un valor FloatingActionButtonLocation, que nos dá algunos valores predeterminados:

Las opciónes que marcan «Docked» significa que nuestro FAB Se incrustará en la BottomNavigationBar:

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.green,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.clear),
            title: Text("Algo"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Algo"),
          ),
        ],
      ),

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, initialIndex: 0, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Titulo'),
      ),
      body: Center(child: Text('Presiona el botón de abajo!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Se ejecuta este codigo al hacer clic en el action button
        },
        child: Icon(Icons.thumb_up),
        backgroundColor: Colors.blue,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.green,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.clear),
            title: Text("Algo"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Algo"),
          ),
        ],
      ),
    );
  }
}

Este Widget crea profesionalismo en tus Apps, te recomiendo usarlo para agregar botones de acciones relevantes, Como Crear, Compartir, etc.

Hasta la próxima! 😀