Flutter Persistent Bottom App Bar to Display Text Only (no nav)

Question

my two page Flutter app needs a persistent bottom app bar, just to display up to a few lines of text, no navigation. Also, this bottom section should not overlap any content; rather constrain it, like the top app bar. suggestions appreciated. examples super appreciated. thanks!

================@chunhunghan================
thanks for the suggestion. unfortunately bottom sheet is hiding content:

score 1 · Answer 1 · answered Jun 23 '20 at 03:16

You can copy paste run full code below
You can use bottomSheet and wrap AppBar with Container set kToolbarHeight

bottomSheet: Container(
        height: kToolbarHeight,
        child: AppBar(
          title: Text("bottom sheet"),
        ),
      ),

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView(
                  children:
                      List.generate(100, (i) => Text("line" + i.toString()))),
            ),
          ],
        ),
      ),
      bottomSheet: Container(
        height: kToolbarHeight,
        child: AppBar(
          title: Text("bottom sheet"),
        ),
      ),
    );
  }
}

score 0 · Answer 2 · answered Jun 22 '20 at 22:31

would suggest to go ahead and use the bottomNavigationBar like so:

Widget build(BuildContext context) {
    
    return new Scaffold(
      body: new Center(
        child: new ListView(
         children: List.generate(100, (i) => Text("this is a line" + i.toString()))
        ),
      ),
      bottomNavigationBar:Text(
        "this is some info"
      ) 
    );
  }

In this example, you can see that all the items in the list are displayed and not hidden under the bottom app bar.

Flutter Persistent Bottom App Bar to Display Text Only (no nav)

2 Answers2