Flutter Bottomtab Navigator How to Carry It to New Page?

Question

How can i use my bottom tabs in A,B,C,D ? I created 4 extra pages for bottom tabs as you can see.Home,Search,Books,Messages and Profile.And i want to when i enter to "A" page my tabs are lost.How can i carry it to the pages ? What's the solution about this code ? I can share other page's codes if you want but there is only one text in them anyway.So i am sharing the Tabs Navigator codes and images so that you can help more easily.Thanks in advance for your help. Anyone ? :/

import 'package:flutter/material.dart';
import 'package:tahand/components/apage.dart';
import 'package:tahand/components/bpage.dart';
import 'package:tahand/components/cpage.dart';
import 'package:tahand/components/dpage.dart';


class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("My App"),automaticallyImplyLeading: false,
        backgroundColor: Colors.black54,
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 550.0),
              child: Center(
                child: Container(
                    width: 200,
                    height: 150,
                    child: Image.asset('assets/images/logo.png')),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                  left: 15.0, right: 15.0, top: 0, bottom: 250),
              child:Center(
                child : new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:[
                    Container(
                      height: 80,
                      width: 150,
                      decoration: BoxDecoration(
                          color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                      child: TextButton(
                        onPressed: () {
                          Navigator.push(
                              context, MaterialPageRoute(builder: (_) => Apage()));
                        },
                        child: Text(
                          'A',
                          style: TextStyle(color: Colors.white, fontSize: 25),
                        ),
                      ),
                    ),
                    SizedBox(width: 20),
                    Container(
                      height: 80,
                      width: 150,
                      decoration: BoxDecoration(
                          color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                      child: TextButton(
                        onPressed: () {
                          Navigator.push(
                              context, MaterialPageRoute(builder: (_) => Bpage()));
                        },
                        child: Text(
                          'B',
                          style: TextStyle(color: Colors.white, fontSize: 25),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only  (left: 20.0, right: 15.0, top: 560, bottom: 0),
              child: Container(
                height: 80,
                width: 380,
                decoration: BoxDecoration(
                    color: Colors.black, borderRadius: BorderRadius.circular(10)),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(
                        context, MaterialPageRoute(builder: (_) => Dpage()));
                  },
                  child: Text(
                    'D',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only  (left: 125.0, right: 15.0, top: 320, bottom: 0),
              child: Container(
                height: 80,
                width: 150,
                decoration: BoxDecoration(
                    color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(
                        context, MaterialPageRoute(builder: (_) => Cpage()));
                  },
                  child: Text(
                    'C',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

    );
  }
}

Answer 1

start with,

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: 'Call'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Message'),
        ],
      ),
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = Page1();
          if (settings.name == 'page2') page = Page2();
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

then add two pages as below, //i am using only two pages now for refrence

1st Page:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.pushNamed(context, 'page2'),
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
} 

2nd Page:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}