单独处理应用程序栏

我是新来的飞镖。我试着通过开发一个应用程序来学习两者。我参加了学习课程,但它只给了我基本知识。我想知道的是是否可以单独处理appBar代码。

目前,这是我所拥有的:

class HomePage extends StatelessWidget {

  HomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.menu),
          tooltip: 'Menu',
          onPressed: () {
            print('Pressed Menu');
          },
        ),
        title: new Text(title),
        titleSpacing: 0.0,
        actions: <Widget>[
          new Row(
            children: <Widget>[
              new Column(
                children: <Widget>[
                  new Text(
                    'Firstname Lastname',
                    textAlign: TextAlign.right,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 12.0,
                    ),
                  ),
                  new Text("username@email.com",
                      textAlign: TextAlign.right,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 12.0,
                      )),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
              new Padding(
                padding: new EdgeInsets.all(8.0),
                child: new Image.network(
                  'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
                  width: 42.0,
                  height: 42.0,
                ),
              ),
            ],
          ),
        ],
      ),
      body: new Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

不过,我想单独处理appbar代码,因为我相信它可以膨胀得更大一些。我试过这样的方法:

class HomePage extends StatelessWidget {

  HomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: MyAppBar(),
      body: new Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

class MyAppBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new AppBar(
      leading: new IconButton(
        icon: new Icon(Icons.menu),
        tooltip: 'Menu',
        onPressed: () {
          print('Pressed Menu');
        },
      ),
      title: new Text(title),
      titleSpacing: 0.0,
      actions: <Widget>[
        new Row(
          children: <Widget>[
            new Column(
              children: <Widget>[
                new Text(
                  'Firstname Lastname',
                  textAlign: TextAlign.right,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: 12.0,
                  ),
                ),
                new Text("username@email.com",
                    textAlign: TextAlign.right,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 12.0,
                    )),
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            ),
            new Padding(
              padding: new EdgeInsets.all(8.0),
              child: new Image.network(
                'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
                width: 42.0,
                height: 42.0,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

但是我得到了一个信息:

无法将参数类型“MyAppBar”分配给参数类型“PreferredSizeWidget”

我有一种直觉,这可能是不可能的。正如我所说,我是新来的飞镖和飞镖,我试图在文件和其他职位上没有任何用处。抱歉,如果这看起来很愚蠢。我真的很想有人给我指一下文档,如果有的话,关于如何实现这种事情或任何资源,可以帮助我更好地理解这是如何工作的。

感谢您的好意和宝贵帮助,非常感谢!