如何删除 Flutter 中的第二个应用栏

Question

我正在尝试使用 Flutter 构建一个演示聊天应用程序。在我的主屏幕之后，我正在使用 Navigator.push 转到详细信息屏幕。问题截图：

第一个屏幕的构建方法：

@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,),
);
}

Navigator.push 方法代码：

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

第二屏的build方法，问题产生的地方：

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,
  ),
);

Answer 1

我猜你设置 Material App 的地方有问题？

app.dart:

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

home_page 和 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();
          },)),
        ));
  }
}

产生：

Answer 2

问题原来是，我在脚手架的主体中创建了一个 MaterialApp 小部件。因此，当调用 onTap 方法时，新屏幕被替换为 MaterialApp 的区域。没有更换整个屏幕。

诀窍是删除 return new MaterialApp()。

谢谢大家。

如何删除 Flutter 中的第二个应用栏

How to remove the second appbar in Flutter

appbar

flutter