Android 有没有更好的方法在Flatter应用程序中只添加一次AppBar，并在所有路由中使用它，而不在这些路由中重复相同的AppBar代码？

我试图找到一种方法，只添加一次AppBar，而不必在不同的路由上复制AppBar代码。我尝试了不同的方法，但仍然不能得到我想要的结果

这是主.dart文件

导入“包装：颤振/材料.省道”；
导入“package:com.example.simple_app/pages/page_one.dart”；
导入“package:com.example.simple_app/pages/page_one.dart”；
void main（）=>runApp（SimpleApp（））；
最终路线={
“/”：（BuildContext）=>new PageOne（），
“/pageone”：（BuildContext上下文）=>new pageone（），
“/pagetwo”：（BuildContext上下文）=>new pagetwo（），
};
类SimpleApp扩展StatefulWidget{
@凌驾
_SimpleAppState createState（）；
}
类_SimpleApp扩展状态{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“简单应用程序”，
主题：主题数据(
//这是应用程序的主题。
//
//尝试使用“flutter run”运行应用程序。您将看到
//应用程序有一个蓝色工具栏。然后，在不退出应用程序的情况下，重试
//将下面的primarySwatch更改为Colors.green，然后调用
//“热重新加载”（在运行“颤振运行”的控制台中按“r”，
//或者只需将更改保存到颤振IDE中的“热重新加载”。
//请注意，计数器没有重置回零；应用程序
//未重新启动。
原始样本：颜色。蓝灰色，
),
initialRoute:“/”，
路线:路线,，
);
}
}

下面是我硬编码AppBar代码的PageOne.dart文件

导入“包装：颤振/材料.省道”；
类PageOne扩展StatefulWidget{
第一页（{Key}）：超级（Key:Key）；
@凌驾
_PageOneState createState（）；
}
类PageOneState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“简单应用栏”），
),
);
}
}

下面是PageTwo.dart文件，我还通过编写整个代码来放置AppBar，我正在复制AppBar代码，这并不酷

导入“包装：颤振/材料.省道”；
类PageOne扩展StatefulWidget{
第一页（{Key}）：超级（Key:Key）；
@凌驾
_PageTwoState createState（）；
}
类_PageTwoState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“简单应用栏”），
),
);
}
}

我是个新手，但我希望你能理解我的意思

---

我想要的是能够在不同的路径中使用AppBar，而无需重复代码例如当我们转到web development时，一个用php构建的网站，您可以简单地包含视图。我希望这里有类似或更好的东西，谢谢。

您可以创建一个单独的应用程序栏小部件来实现这一点，如：

创建一个appbar.dart文件，如下所示：

import 'package:flutter/material.dart';

Widget appbar(BuildContext context, String title, dynamic otherData) {
  return AppBar(
    title: Text(title),

    //Other data you want to show

  );
}

并导入显示。将dart文件放置在要显示应用程序栏的任何位置

屏幕1：

import 'appbar.dart';
import 'package:flutter/material.dart';

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: appbar(context, 'Chat App', {'icons' : Icons.menu}),
    );
  }
}

导入“appbar.dart”；
进口“包装：颤振/材料.省道”；
类Page1扩展了StatefulWidget{
@凌驾
_Page1State createState（）；
}
类_Page1State扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（上下文，“聊天应用程序”，“图标”：icons.menu}），
);
}
}

屏幕2：

import 'appbar.dart';
import 'package:flutter/material.dart';

class Page12 extends StatefulWidget {
  @override
  _Page12State createState() => _Page12State();
}

class _Page12State extends State<Page12> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: appbar(context, 'Chat App', {'icons' : Icons.menu}),
    );
  }
}

导入“appbar.dart”；
进口“包装：颤振/材料.省道”；
类Page12扩展StatefulWidget{
@凌驾
_Page12State createState（）；
}
类_page12状态扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（上下文，“聊天应用程序”，“图标”：icons.menu}），
);
}
}

---

实现这一点的方法还有很多。这是我尝试过的简单方法。

使用

MaterialApp

中的

builder

属性为每个页面构建公共容器

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Theme.of(context).copyWith(highlightColor: Colors.amber),
      //TODO: Use `builder` to add top most container for all page
      builder: (context, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Simple AppBar"),
          ),
          body: child, //this child is dynamically replaced with corresponding page when we navigate
        );
      },
      home: FirstPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("This is First Page"),
        RaisedButton(
          child: Text("Goto Second Page"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(),
              ),
            );
          },
        ),
      ],
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("This is First Page"),
        RaisedButton(
          child: Text("Go Back"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：theme.of（context）.copyWith（highlightColor:Colors.amber），
//TODO:使用“生成器”为所有页面添加最顶部的容器
生成器：（上下文，子对象）{
返回脚手架(
appBar:appBar(
标题：文本（“简单应用栏”），
),
body:child，//当我们导航时，此子项将动态替换为相应的页面
);
},
主页：首页（），
debugShowCheckedModeBanner:false，
);
}
}
类FirstPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“这是第一页”），
升起的按钮(
子：文本（“转到第二页”），
已按下：（）{
导航器。推(
上下文
材料路线(
生成器：（上下文）=>SecondPage（），
),
);
},
),
],
);
}
}
类SecondPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“这是第一页”），
升起的按钮(
子：文本（“返回”），
已按下：（）{
Navigator.pop（上下文）；
},
),
],
);
}
}

首先，创建一个文件，例如appBar.dart 然后将您的个人应用程序栏按如下方式放置：

 import 'package:flutter/material.dart';

final appBar = AppBar(
 backgroundColor: Colors.orange,
 elevation: 5.0,
 title: Center(
 child: SizedBox(
   height: 40.0,
   child:Image.asset("assets/images/myLogo.png"),
  ),
),
 );

现在，导入并在任意位置使用appBar

import 'package:myApp/pages/appBar.dart';

return Scaffold(
    appBar: appBar,
    body:......

做