How to remove the second appbar in Flutter

Question

I am trying to build a demo chat app with Flutter. After my main screen, I am using Navigator.push to go to the details screen. Screenshot of problem:

build method of 1st screen:

@override
 Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: const Text("Chat Thread App"),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            Navigator.pushNamed(context, '/settings');
          },
        )
      ],
    ),
    body: isLoading
        ? Center(
            child: CircularProgressIndicator(),
          )
        : new ChatThreadListCard(messageThreads: _messageThreadLists, user: _user,),
);
}

code of Navigator.push method:

Navigator.push(context, MaterialPageRoute(
        builder: (context) => ChatDetailsScreen(threadModel: new ThreadModel(
              user.id, 
              user.fullName, 
              user.pic, 
              "otherId", 
              "otherName", 
              "otherPic", 
              post.threadId
            )
          ),
      ),);

build method of 2nd screen, where the problem is produced:

return Scaffold(
  appBar: AppBar(
    title: Text("Chat demo"),
  ),
  body: WillPopScope(
    child: isLoading
        ? Center(
            child: CircularProgressIndicator(),
          )
        : Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              SizedBox(
                width: 300,
                height: 300,
              ),
              Column(
                children: <Widget>[
                  buildChat(),
                  buildInput(),
                ],
              )
            ],
          ),
    onWillPop: onBackPress,
  ),
);

Solution 1

I'm guessing something isn't working right with where you're setting up the Material App?

app.dart:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage());
  }
}

home_page and second_page

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  @override
  State createState() => HomePageState();
}
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('First Page'),
        ),
        body: Container(
          child: Center(child: RaisedButton(child: Text('Forward'), onPressed: () async {
            await Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
          },)),
        ));
  }
}
class SecondPage extends StatefulWidget {
  @override
  State createState() => SecondPageState();
}
class SecondPageState extends State<SecondPage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: Container(
          child: Center(child: RaisedButton(child: Text('Backward'), onPressed: () {
            Navigator.of(context).pop();
          },)),
        ));
  }
}

Which produces:

Solution 2

the problem turns out to be, i was creating a MaterialApp widget in scaffold's body. so, when the onTap method was called, the new screen was replaced insdie the MaterialApp's area. didnt replace the whole screen.

the trick was to remove the return new MaterialApp().

thanks everyone.