How to push to a new screen in Flutter without the appbar from the previous screen in Flutter?

Question

I have two screens. In screen1 I have an appbar and a card in the body. IF I click the card it should take me to new screen 'screen2'. I am getting the screen2 but I am also getting the appbar from screen1 as well.. I am doing a push from screen1 to screen2.. May I know how to avoid the appbar from the screen1 in screen2? I have onTap method in VideoCard widget which pushes to screen2... it looks like body of the screen1 is being replaced by screen2.. instead i need to push to screen2 from screen1...

enter image description here

    class _AllVideosPageTabletState extends State<AllVideosPageTablet> {
  bool searchFlag = false;
  String searchText = '';

  @override
  void initState() {
    searchFlag = false;
    searchText = '';

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final isLandscape = MediaQuery.of(context).orientation ==
        Orientation.landscape; 
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(10.0),
        child: Column(
          children: [
            CupertinoSearchTextField(
              onChanged: (value) {
                if (value != '') {
                  setState(
                    () {
                      searchFlag = true;
                      searchText = value;
                    },
                  );
                }
              },
              onSubmitted: (value) {
                if (value != '') {
                  setState(
                    () {
                      searchFlag = true;
                      searchText = value;
                    },
                  );
                }
              },
            ),
            Divider(),
            Row(
              children: [
                IconButton(
                  icon: Image.asset('lib/assets/icons/back.png'),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Expanded(
                  child: Container(
                    child: Center(
                      child: Text(
                        'All Videos',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: '#D86300'.toColor(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            searchFlag
                ? SearchResultsListView(searchText)
                : Expanded(
                    child: FutureBuilder(
                      future: VideoXML().getDataFromXML(context),
                      builder: (context, data) {
                        if (data.hasData) {
                          List<Video> videoList = data.data;
                          return GridView.count(
                            scrollDirection: Axis.vertical,
                            crossAxisCount: isLandscape ? 4 : 2,
                            crossAxisSpacing: 10.0,
                            mainAxisSpacing: 10.0,
                            children: videoList.map(
                              (video) {
                                return Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: VideoCard(
                                      video.title,
                                      video.name,
                                      video.image,
                                      ),
                                );
                              },
                            ).toList(),
                          );
                        } else {
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }

Answer 1

Flutter works in a way that every new screen is based on a new Scaffold widget. This way you can customize, whether to show the appBar at all or should be display different appBar on different screens.

For example:

Screen 1 should be a scaffold of its own:

class FirstScreen extends StatelessWidget {
  @override 
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBar(title:'Screen 1'), 
      body:  InkWell(onTap: () => Navigator.of(context).pushedName(routeToSecondScreen),
        child: Text('Navigate to secondScreen'),
        );
    );
  }
}

Screen 2 should be a scaffold of its own:

class SecondScreen extends StatelessWidget {
      @override 
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(title:'Screen 2'), 
          body:  Text('Screen 2'),
        );
      }
    }

This way you can have different appBars for each screen. If you do not wish to display appBar on the second screen at all, simply do not specify appBar on the second screen as follows.

class SecondScreen extends StatelessWidget {
      @override 
      Widget build(BuildContext context) { 
        return Scaffold(
          body:  Text('Screen 2'),
        );
      }
    }