Flutter - Bottom Navigation Bar

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyPage(),
      
    );
  }
}

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  int selectedRadioTile = 0;
  setSelectedRadioTile(val) {
    setState(() {
      selectedRadioTile = val;
    });
  }

  int _selectedIndex = 0;
  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,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Bottom Navigation"),),
      body: Center(
        child: Container(
          child: TextButton.icon(
            icon: const Icon(
              Icons.sort,
              size: 28,
            ),
            label: const Text("Sort", style: TextStyle(fontWeight: FontWeight.bold)),
            // Button to press sort
            onPressed: (() {
              showModalBottomSheet(
//             useRootNavigator: true,
                  // show modal
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)),
                  context: context,
                  builder: (BuildContext build) {
                    return BottomFilter(
                        selected: selectedRadioTile,
                        setSelected: setSelectedRadioTile);
                  });
            }),
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class BottomFilter extends StatelessWidget {
  const BottomFilter(
      {Key? key, required this.selected, required this.setSelected})
      : super(key: key);

  final int selected;
  final Function setSelected;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        // radio values
        RadioListTile(
          value: 1,
          groupValue: selected,
          title: Text("Case Earliest to Latest"),
          onChanged: (val) {
            print("Radio Tile pressed $val");
            setSelected(val!);
            print(selected);
            Navigator.pop(context);
          },
          activeColor: Colors.amber,
        ),
        RadioListTile(
          value: 2,
          groupValue: selected,
          title: Text("Case Latest to Earliest "),
          onChanged: (val) {
            print("Radio Tile pressed $val");
            setSelected(val!);
            print(selected);
            Navigator.pop(context);
          },
          activeColor: Colors.amber,
        )
      ],
    );
  }
}