How to add scroll into bottom navigation bar items

Question

I have implemented an app that navigates through a few screens. I have added the bottom navigation bar and 1st tab I add a page with list view items with sqlflite data.I can't scroll list view data. other tabs I have added to show another screen. code is below.

//this is my homepage screen

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late List<LeaveModel> _leaveList = [];
  final _userService = LeaveService();
  int _selectedIndex = 0;

  @override
  void initState() {
    getAllUserDetails();

    super.initState();
  }

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

I have create botom navigation bar with 4 item.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {},
        ),
        title: const Text('Leave Tracker'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.notifications),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.add_box),
            onPressed: () {
              Navigator.push(context,
                      MaterialPageRoute(builder: (context) => AddLeave()))
                  .then((data) {
                if (data != null) {}
                getAllUserDetails();
              });
            },
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.man),
            label: 'All',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.sick_rounded),
            label: 'Sick',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.holiday_village),
            label: 'Casual',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.weekend),
            label: 'Other',
          ),
        ],
      ),

From this 4 items goto different 3 screens.1st item link to same page.(HomePage())

 body: Center(
        child: _selectedIndex == 0
            ? myListView(context)
            : _selectedIndex == 1
                ? AllSickLeave()
                : _selectedIndex == 2
                    ? AllCasualLeave()
                    : ViewOtherLeave(),
      ),
    );
  }

In HomePage() i have add listview and data taking from sqlflite database.

getAllUserDetails() async {
    var users = await _userService.readAllLeave();
    _leaveList = <LeaveModel>[];
    users.forEach((leave) {
      setState(() {
        var leaveModel = LeaveModel();
        leaveModel.id = leave['id'];
        leaveModel.leaveType = leave['leaveType'];
        leaveModel.leaveStartDate = leave['leaveStartDate'];
        leaveModel.leaveEndDate = leave['leaveEndDate'];
        leaveModel.reason = leave['reason'];
        leaveModel.leaveDays = leave['leaveDays'];
        _leaveList.add(leaveModel);
      });
    });
  }

  Widget myListView(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 5.0,
            ),
            Text(
              'All Leave Details',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
            ListView.builder(
                shrinkWrap: true,
                itemCount: _leaveList.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(
                          'Leave Type : ${_leaveList[index].leaveType ?? ''}'),
                      subtitle: Text('Reason : ${_leaveList[index].reason}'),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                              onPressed: () {},
                              icon: Icon(
                                Icons.edit,
                                color: Colors.teal,
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Icon(
                                Icons.delete,
                                color: Colors.red,
                              )),
                        ],
                      ),
                    ),
                  );
                }),
          ],
        ),
      ),
    );
  }
}

Answer 1

You dont need to have multiple scaffold, and try this format

Widget myListView(BuildContext context) {
  return ListView.builder(
      padding: EdgeInsets.only(top: 25),
      itemCount: _leaveList.length + 1,
      itemBuilder: (context, index) {
        if (index == 0)
          return Text(
            'All Leave Details',
            style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
          );
        return Card(
          child: ListTile(