How To Change Screens By Pressing On Icons in Flutter?

You can copy paste run full code below
You can use onTap of CurvedNavigationBar and in body call pageChooser

code snippet

  final Page1 page1 = Page1();
  final Page2 page2 = Page2();
  final Page3 page3 = Page3();
  final Page4 page4 = Page4();
  final Page5 page5 = Page5();

  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return page1;
      case 1:
        return page2;
      case 2:
        return page3;
      case 3:
        return page4;
      case 4:
        return page5;
    }
  }
...
onTap: (index) {
      setState(() {
        _page = index;
      });
    },
  ),
  body: pageChooser(_page),

working demo

full code

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _page = 0;

  final Page1 page1 = Page1();
  final Page2 page2 = Page2();
  final Page3 page3 = Page3();
  final Page4 page4 = Page4();
  final Page5 page5 = Page5();

  @override
  void initState() {
    super.initState();
  }

  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return page1;
      case 1:
        return page2;
      case 2:
        return page3;
      case 3:
        return page4;
      case 4:
        return page5;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF4F4F4),
      appBar: AppBar(
        title: Text(
          "Home",
        ),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        color: Color.fromRGBO(3, 9, 23, 1),
        backgroundColor: Colors.transparent,
        buttonBackgroundColor: Colors.white,
        height: 70.0,
        items: <Widget>[
          Icon(
            Icons.home,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.chat_bubble,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            FontAwesomeIcons.heart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.school,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.show_chart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
        ],
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: pageChooser(_page),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page1");
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page2");
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page3");
  }
}

class Page4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page4");
  }
}

class Page5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page5");
  }
}

In your case wrap your icon widget with. InkWell and use Navigtor.push() or Navigator.pushReplacemnt(). That should help I believe.

you Just need to use onTap method in each BottomNavigationBar item as Follows:

 Widget build(BuildContext context) {
return new BottomNavigationBar(
    // showSelectedLabels: false,   // <-- HERE
    // showUnselectedLabels: false,
    backgroundColor: Color(0xff38547C),
    type: BottomNavigationBarType.fixed,
    // showUnselectedLabels: false,
    currentIndex: 0, // this will be set when a new tab is tapped
    items: [
      BottomNavigationBarItem(
        icon: new Icon(
          Icons.home,
          color: Colors.white,
        ),
        title: new Text(
          'Home',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      BottomNavigationBarItem(
        icon: ImageIcon(
          AssetImage("assets/images/ball.png"),
          color: Colors.white,
        ),
        title: Text(
          'Matches',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.live_tv, color: Colors.white),
        title: new Text(
          'Live',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.poll, color: Colors.white),
        title: Text(
          'Ranking',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.more_horiz, color: Colors.white),
        title: Text(
          'More',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ],
    onTap: (int index) {
      var _index;
      setState(() => _index = index);
      if (_index == 0) {
        var route = new MaterialPageRoute(
            builder: (BuildContext context) => new Home());
        Navigator.of(context).push(route);
      }
      else if (_index == 1) {
        var route = new MaterialPageRoute(
            builder: (BuildContext context) => new Matches());
        Navigator.of(context).push(route);
      } else if (_index == 2) {
        var route = new MaterialPageRoute(
            builder: (BuildContext context) => new Live());
        Navigator.of(context).push(route);
      } else if (_index == 3) {
        var route = new MaterialPageRoute(
            builder: (BuildContext context) => new Ranking());
        Navigator.of(context).push(route);
      } else if (_index == 4) {
        var route = new MaterialPageRoute(
            builder: (BuildContext context) => new More());
        Navigator.of(context).push(route);
      }
    });