This is the 18th day of my participation in Gwen Challenge

preface

In this article, we will talk about the use of BottomNavigationBar FloatingActionButton and BottomAppBar. Only the two widgets work together, and there’s not much value in talking about them individually because they’re easier to use.

See the effect

Like these weird navigation things, how are we going to do that?

Bump menu The rounded navigation The waves navigation

FloatingActionButton

To do this, let’s talk about FloatingActionButton (blue plus button in the middle) and then combine it with BottomAppBar

Let’s look at the overall structure

Scaffold(
  body:[bodyWidget],
  // Set the hover button here
  floatingActionButton: FloatingActionButton(
    // Set an ➕ button
    child: Icon(Icons.add),
    // Add click events
    onPressed: () {
    },
  ),
)
Copy the code

Normally we just set it up in Scaffold and of course it is a Widget that we can use anywhere.

The effect

Properties in

backgroundColor: Colors.orange foregroundColor: Colors.orange splashColor: Colors.orange
elevation: 0 Elevation: 6 (default) highlightElevation: 12
mini: true shape: RoundedRectangleBorder shape: ContinuousRectangleBorder

In the code

FloatingActionButton(
  child: Icon(Icons.add),
  // backgroundColor: Colors.orange,
  // foregroundColor: Colors.orange,
  // splashColor: Colors.orange,
  // elevation: 6,
  // highlightElevation: 12,
  // mini: true,
  // shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  // shape: ContinuousRectangleBorder(
  // side: BorderSide(
  // width: 4,
  // color: Colors.orange,
  / /),
  // borderRadius: BorderRadius.circular(12),
  // ),
  // shape: BeveledRectangleBorder(
  // side: BorderSide(
  // width: 4,
  // color: Colors.orange,
  / /),
  // borderRadius: BorderRadius.circular(12),
  // ),
  onPressed: () {
  },
)
Copy the code

These are the properties that write the basic Settings, and sometimes we have special requirements like

Change the size

You’ll notice that there are no properties to set the size other than mini and the default size, so we’ll just wrap a SizedBox around it.

SizedBox(
  width: 80,
  height: 80,
  child: FloatingActionButton(...),
)
Copy the code

Arrangement of multiple

For example, if we want to make a Column, we just need to add a Column and put multiple FloatingActionButtons in it

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    FloatingActionButton(
      child: Icon(Icons.ac_unit_rounded),
      backgroundColor: Colors.orange,
      onPressed: () {},
    ),
    SizedBox(height: 10),
    FloatingActionButton(
      child: Icon(Icons.adb_sharp),
      backgroundColor: Colors.green,
      onPressed: () {},
    ),
    SizedBox(height: 10),
    FloatingActionButton(
      child: Icon(Icons.more_horiz_outlined),
      onPressed: () {},
    ),
  ],
)
Copy the code

See the effect

Handle exceptions

FloatingActionButton also has a heroTag property that we haven’t talked about, but what does that do? This is the label of the Hero widget. If we click to jump to a new page, an error will be reported, because according to the Material design specification, each screen can only have one hover button. If there are more than one hover button, there will be a label conflict in the route navigation (the default label object is not set). The solution is to set a different heroTag.

Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            child: Icon(Icons.ac_unit_rounded),
            backgroundColor: Colors.orange,
            / / set the tag1
            heroTag: 'tag1',
            onPressed: () {},
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            child: Icon(Icons.adb_sharp),
            backgroundColor: Colors.green,
            / / set tag2
            heroTag: 'tag2',
            onPressed: () {},
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            child: Icon(Icons.more_horiz_outlined),
            / / set tag3
            heroTag: 'tag3',
            onPressed: () {},
          ),
        ],
      )
Copy the code

Position setting



As shown above, we can pass throughScaffold 的 floatingActionButtonLocationProperty to setFloatingActionButtonIn order to better display, we add aBottomAppBarTo help us understand the allocation of attributes

BottomAppBar

In the last article we talked about BottomNavigationBar. Here we change the BottomNavigationBar property to BottomAppBar because all the controls in a Flutter are widgets

Scaffold(
  // Set position, center stop
  floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
  / / set BottomAppBar
  bottomNavigationBar: BottomAppBar(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        TextButton.icon(
          icon: Icon(Icons.home),
          label: Text('home'),
          onPressed: () {},
        ),
        SizedBox(),
        TextButton.icon(
          icon: Icon(Icons.people),
          label: Text('I'),
          onPressed: () {},
        ),
      ],
    ),
  )
)
Copy the code

See the effect

Location allocation

  • The mini

Small table shows a variety of position effects, think useful remember to support me oh

startFloat centerFloat endFloat
startDocked centerDocked endDocked
startTop centerTop endTop
  • The mini type

The need to cooperate with the mini FloatingActionButton attribute to use, and added prefix mini location attribute, such as FloatingActionButtonLocation. MiniCenterDocked, position and the above is the same.

The difference is that when the BottomAppBar sets the notch Shape, the radius of the notch is different

centerDocked miniCenterDocked

More Shape Shape

Shape custom shapes are available in many Flutter widgets, from the border lines of the input field to the background.

  • Circular notched rectangle
BottomAppBar(
  /// Circular notched rectangle
  shape: CircularNotchedRectangle(),
  child: [childWidget],
)
Copy the code

  • Bevel rectangle
BottomAppBar(
  /// Automatic notch shape
  shape: AutomaticNotchedShape(
    // Bevel rectangle
    BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  child: [childWidget],
)
Copy the code

  • The rounded rectangle
BottomAppBar(
  /// Automatic notch shape
  shape: AutomaticNotchedShape(
    // Rounded rectangle
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(40),
    ),
  ),
  child: [childWidget],
)
Copy the code

  • Custom shape

If some of the above effects do not satisfy our needs, we can choose to customize our Shape. For details, see the following code. It is better if you read the Flutter source code.

BottomAppBar(
  /// Custom shape
  shape: MyShape(),
  child: [childWidget],
)
Copy the code
  • jagged
/// The custom Shape
class MyShape extends NotchedShape {
  @override
  Path getOuterPath(Rect host, Rect? guest) {
    var path = Path();
    int wallCount = 10;
    double step = host.width / wallCount;
    double wall = host.height / 4;
    for (var i = 0; i < wallCount; i++) {
      // Jagged up and down
      path.relativeLineTo(step, i.isEven ? -wall : wall);
    }
    // Connect to the lower right corner, the lower left corner, and close the upper left cornerpath .. lineTo(host.right, host.bottom) .. lineTo(host.left, host.bottom) .. close();returnpath; }}Copy the code

  • wavy

/// The custom Shape
class MyShape extends NotchedShape {
  @override
  Path getOuterPath(Rect host, Rect? guest) {
    var path = Path();
    int wallCount = 10;
    double step = host.width / wallCount;
    double wall = host.height / 4;
    for (var i = 0; i < wallCount; i++) {
      // Rounded wave
      path.relativeArcToPoint(
        Offset(step, i.isEven ? -wall : wall),
        radius: Radius.circular(20)); }// Connect to the lower right corner, the lower left corner, and close the upper left cornerpath .. lineTo(host.right, host.bottom) .. lineTo(host.left, host.bottom) .. close();returnpath; }}Copy the code

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • FloatingActionButton (Flutter Widget of the Week)
  • Flutter-FloatingActionButton
  • Flutter-BottomAppBar

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible