how to use bottomNavigationBar while using ListView.builder-CodePudding

I want to use bottomNavigationBar with listview, I tried each one of them separately and they work fine, but when I use them together, the bottomNavigationBar doesn't work, you can press the icons but nothing happens.

note: I'm using an older version of dart to avoid null-safety which is dumb, but the reason is the book I read is from 2019 so I couldn't follow without using an older version.

note 2: I'm very new to programming.

main.dart

    //@dart=2.9
import 'package:flutter/material.dart';
import 'package:ch8_bottom_navigation/pages/home.dart';

void main() => runApp(Myapp());

class Myapp extends StatelessWidget {
  //this widget is the root of the app
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Starter Template',
      theme: ThemeData  (
        primarySwatch: Colors.blue,
        platform: TargetPlatform.iOS,

      ),
      home: Home(),
    );

  }

}

home.dart

   //@dart=2.9
import 'package:flutter/material.dart';
import 'discover.dart';
import 'home2.dart';
import 'account.dart';



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

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

class _HomeState extends State<Home> {

  int _currentIndex = 0;
  List _listPages = [];
  Widget _currentPage;
  @override
  void initState() {
    super.initState();

    _listPages
    ..add(Home2())
    ..add(Discover())
    ..add(Account());
    _currentPage = Discover();
  }
  void _changePage(int selectedIndex) {
    setState(() {
      _currentIndex = selectedIndex;
      _currentPage = _listPages[selectedIndex];
    });

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount:20 ,
          itemBuilder: (BuildContext context , int index) {
            if (index >= 0 && index <= 0) {
              return Home2 (index:index);
            }
            else return null;
          },
        ),
      ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.live_tv),
                label: ('Home'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.explore_outlined),
              label: ('Discover'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_box_outlined),
              label: ('Account'),
            ),
          ],
          onTap: (selectedIndex) => _changePage(selectedIndex),
        ),



    );

  }
}

home2.dart

//@dart=2.9
import 'package:flutter/material.dart';

class Home2 extends StatelessWidget {
  const Home2({Key key , @required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return Container(
        child:Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          color: Colors.white70,
          child: ListTile(
            leading: Image(
              image: AssetImage('assets/images/blackwidow.jpg'),
            ),
            title: Text('Black Widow'),
            subtitle: Text('By Disney'),
            trailing: Icon(Icons.movie),
            selected: true,
            onTap: () {
              print('Trapped on Row $index');
            },
          ),
        )
    );

  }
}

CodePudding user response：

body: SafeArea(child: _currentPage),

body: SafeArea(child: _listPages[selectedIndex]),

Did you try this way?