How To Create Popup Menu Bottom Nav Bar Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

PopupMenu Bottom Nav Bar

How To Create Popup Menu Bottom Nav Bar Using Flutter App

PopupMenu Bottom Nav Bar
Complete Code For PopupMenu Bottom Nav Bar In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Transform',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = 'Home';

  _onTap(int index) async {
    switch (index) {
      case 0:
        setState(() => text = 'Home');
        break;
      case 1:
        setState(() => text = 'Favorite');
        break;
      case 2:
        setState(() => text = 'Profile');
        break;
      case 3:
        setState(() => text = 'Settings');
        await showMenu(
          context: context,
          position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
          items: [
            PopupMenuItem(
              child: Text("Bajarangisoft.com"),
            ),
            PopupMenuItem(
              child: Text("Yahoo.com"),
            ),
            PopupMenuItem(
              child: Text("Google.com"),
            ),
          ],
          elevation: 8.0,
        );
        break;
      default:
        setState(() => text = 'Home');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: Text("PopupMenu Bottom Nav Bar"),
      ),
      body: Center(
        child: Text(text,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            )),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.cyan,
        type: BottomNavigationBarType.fixed,
        currentIndex: 0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(

            icon: Icon(Icons.home,color: Colors.white,),
            title: Text("Home",style: TextStyle(color: Colors.white),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite,color: Colors.white,),
            title: Text("Favorite",style: TextStyle(color: Colors.white),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person,color: Colors.white,),
            title: Text("Profile",style: TextStyle(color: Colors.white),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add,color: Colors.white,),
            title: Text("More",style: TextStyle(color: Colors.white),),
          ),
        ],
        onTap: _onTap,
      ),
    );
  }
}

Related Post