I want to make this type of menu items in bottom of appbar

enter image description here


Solution 1: Yeasin Sheikh

This is using Tabs

Example code from doc:

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}


Solution 2: Fuad Saneen

@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: const Text('Tabs Demo'),
),

    ),
  ),
);

}

enter image description here


Solution 3: Roman Jaquez

Try this codelab I created that might give you an inspiration for this type of navigation, which I custom created in Flutter. It is not a replacement but an alternative https://romanejaquez.github.io/flutter-codelab-cr2-2/#11. You can check out the whole series here

https://romanjustcodes.web.app/#/workshops#flutter-workshop4.

Here's what it looks like

enter image description here