Flutter AppBar with PreferredSize | Bottom Text or Line

Flutter PreferredSize() widget could be used in AppBar() to controller the height of the app bar as well as show text or a line on the AppBar.

Actually show the text on the bottom of the app bar. Not only a text, you may also show a line

  AppBar buildAppBar() {
    return AppBar(
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(1.0),
            child: Container(
              color: Colors.blue,
              height: 1.0,
            )),
        title: Text(
          "Log In",
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.normal,
          ),
        ));
  }

Here PreferredSize should be assigned to the bottom property of AppBar() and it will create extra space right below your normal AppBar().

Here we used preferredSize property inside PreferredSize() widget to create the space. We also used Size.fromHeight() to achieve this result. You may pass any number to Size.fromHeight() to create the space below the AppBar().

If you just pass 1 pixel to Size.fromHeight() it would look like a line. If you pass bigger number, then it would look like bigger space.

And inside PreferredSize() the child could be a container and you may any widget like Text() widget to it.