FloatingActionButton in Flutter with four sizes: Extended, Large, Regular, and Small

- Andrés Cruz

En español
FloatingActionButton in Flutter with four sizes: Extended, Large, Regular, and Small

FloatingActionButton is a Flutter widget that provides a circular floating button that is commonly used for secondary actions and additional functionality in an app. The button can have an icon or text inside it, and it can float on top of other UI elements. The button's visual layout automatically adapts to the platform the app is running on. It can be used in combination with other widgets, such as the Scaffold and AppBar, to improve the functionality and visual appearance of the application.

One of the latest additions that Flutter brings us, is that now the FloatingActionButton class allows us to define the size of the button:

For that we can use the named constructors, if we want to apply the NEW buttons:

4 Botones de tipo flotante para Flutter
4 Botones de tipo flotante para Flutter

Extended floating button

FloatingActionButton.extended(
            onPressed: () {}, label: Text("Extendido")),

FloatingActionButton Long or big

FloatingActionButton.large(
         child: Icon(Icons.plus_one),
         onPressed: (){
       }),

Regular

 floatingActionButton: FloatingActionButton(
          child: Icon(Icons.plus_one),
          onPressed: (){
        }),

Small floating button

floatingActionButton: FloatingActionButton.small(
          child: Icon(Icons.plus_one),
          onPressed: (){
        }),

Conclusions

  • As you can see, the regular button is the standard or default button and therefore we should not indicate any named constructor.
  • We have to define one more parameter for the extended button, the label, which due to its composition would be a text; the rest of the buttons is the definition that we follow with the previous scheme, to indicate a child for the icon and other additional aspects that you want to customize.
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.