FLUI

# AppBar

AppBar is the navigation bar at the top of the App.

# FLAppBarTitle

FLAppBarTitle supports the display of subtitle, supports loading animation and custom accessory widget.

# subtitle

AppBar(
    title: FLAppBarTitle(
      title: 'AppBar',
      subtitle: '(subtitle)',
    ),
    centerTitle: true,
),

The title layout can also be arranged vertically.

AppBar(
    title: FLAppBarTitle(
      title: 'AppBar',
      subtitle: '(subtitle)',
      layout: FLAppBarTitleLayout.vertical // default is horizontal
    ),
    centerTitle: true,
),

# accessory

FLAppBarTitle can display a custom component via the customAccessoryWidget property.

AppBar(
    title: FLAppBarTitle(
      title: 'AppBar',
      customAccessoryWidget: Icon(Icons.keyboard_arrow_down, color: Colors.white)
    ),
    centerTitle: true,
),

Property accessoryPosition can be used to switch the position of the accessory widget.

AppBar(
    title: FLAppBarTitle(
      title: 'AppBar',
      customAccessoryWidget: Icon(Icons.keyboard_arrow_down, color: Colors.white),
      accessoryPosition: FLAppBarPosition.left
    ),
    centerTitle: true,
),

# loading

AppBar(
    title: FLAppBarTitle(
      title: 'AppBar',
      subtitle: '(subtitle)',
      layout: FLAppBarTitleLayout.vertical,
      showLoading: true
    ),
    centerTitle: true,
),

The loading indicator can also be switched to the left by the loadingPosition property.

Tips

You can also render FLAppBarTitle as a middle widget on CupertinoNavigationBar.

# API

# FLAppBarTitle

property description type default value
title title text String
titleStyle title text style TextStyle
subtitle subtitle text String
subtitleStyle subtitle text style TextStyle
showLoading display loading indicator bool false
layout layout FLAppBarTitleLayout FLAppBarTitleLayout.horizontal
loadingPosition loading indicator position FLAppBarPosition FLAppBarPosition.left,
customAccessoryWidget custom accessory widget Widget
accessoryPosition accessory widget position FLAppBarPosition FLAppBarPosition.right

← NoticeBar →