Flutter - Add a Row above Bottom Navigation Bar

Question

I would like to know how to add a row, which upon clicking on will function like Bottom Sheet above Bottom Navigation Bar.

Like this image Example

(The darker row).

Thanks!

Darrin

Can you add some code snippets that you have tried or some research that you have already done – Osrick

Answer 1

you can use a Scaffold property that called persistentFooterButtons, and you can add a widget to it, this is an image of the app https://i.sstatic.net/Tb4iA.jpg, and this is the code for making the app.

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

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

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

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

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

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.white,
        ),

=================== this is all you need ==============================

        persistentFooterButtons: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              IconButton(
                iconSize: 35,
                icon: Icon(Icons.play_arrow),
                onPressed: null,
              ),
              Container(child: Text("Some data over hereSome data ")),
              IconButton(
                icon: Icon(Icons.favorite),
                onPressed: null,
              )
            ],
          )
        ],

=================================================

        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Business'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('School'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Reductive

Answer 2

An Expanded Widget should solve your issue. The video and documentation is at the link. It should allow for a row to be placed/pushed to the bottom of the screen so that it is "above" the navigation bar. Simply wrap your widget with an expanded widget.

Eakins