DEV Community: Rui.Z

Use Floating Action Button in Flutter

Rui.Z — Mon, 07 Jun 2021 19:48:21 +0000

FloatingActionButton(FAB) is the widget to create a icon button that hovers over content to promote a quick action in a app screen.

Design guidance

One screen should have at most one single floating action button. If you want to have more than one quick action, you may consider ExpandableFab.

Style

A normal FAB can be constructed via FloatingActionButton(…) and a FAB with stadium shape can be constructed via FloatingActionButton.expanded(…) as the example below. You can add text label to the expanded one.

Location

The location of FAB is set on its parent Scaffold widget’s floatingActionButtonLocation property. If appBottomBar is used for a BottomNavigationBar, it can be set to one of the ‘docked’ location such as floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked

Refer this for more location details.

Tips

If the FAB triggers an asynchronous action which may take a few seconds to process(such as login or getting device location), it would be good to have some animation to provide better user experience. I find using a variable ‘_isLoading’ to switch to a CircularProgressIndicator() provide a good feedback to user’s action.

…
floatingActionButton: Visibility(
    visible: _isButtonVisible,
    child: _isLoading
        ? const CircularProgressIndicator()
        : FloatingActionButton(
            onPressed: () {
                setState(() {
                    _isLoading = true;
                });
                // some actions
            },
            child: const Icon(Icons.navigation),
            backgroundColor: Colors.green,
          ),
),
…

Code example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'FAB Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FAB AppBar Label'),
      ),
      body: const Center(
        child: Text('Center Text'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // Action of the button
        },
        label: const Text('Submit'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.green,
      ),
    );
  }
}

Create Bottom Navigation Bar in Flutter

Rui.Z — Sun, 06 Jun 2021 19:52:54 +0000

To implement a navigation bar for user to navigate between views in Flutter, we can use a Material Widget called BottomNavigationBar.

The BottomNavigationBar is usually used as tha argument of Scaffold.bottomNavigationBar.

Guidance

Material design guidance suggests that BottomNavigationBar should have no more than 5 items.

Style

The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

Example

import 'package:flutter/material.dart';

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

/// Main application
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'App title';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// The stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
    Text('Index 0: Home'),
    Text('Index 1: Business'),
    Text('Index 2: School'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App with BottomNavBar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        unselectedItemColor: Colors.blue,
        selectedItemColor: Colors.black,
        onTap: _onItemTapped,

        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
    );
  }
}

Tips

However, switching between views would dispose and rebuild the widgets. It means the status of each view cannot be retained when being switched away. A solution for this is to use IndexedStack. I will write another article on how to use IndexedStack. You may also want to explore it by reading this.

How to keep all constants in Flutter

Rui.Z — Fri, 04 Jun 2021 20:20:54 +0000

A clean and simple way to keep constants in Flutter is to make an own Dart library in the project for the constants.

For example, we have a project structure like this.

constats.dart

const String BUTTON_LABEL = 'Submit';

The const keyword is used to represent a compile-time constant. Variables declared with const keyword are implicitly final. Link

You can then use import statement to access to the constants:

import 'package:<project_name>/assets/constants.dart' as constants;
...
ElevatedButton(
  child: const Text(constants.BUTTON_LABEL),
)
...