Handling the app bar separately

Question

I'm new to flutter and dart. I am trying to learn both by developing an app. I have taken the udacity course but it only gave me the basics. What I want to know is if it is possible to handle the appBar code separately.

Currently, this is what I have:

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("[email protected]",
                      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!'),
      ),
    );
  }
}

However, I would like to handle the appbar code separately as I believe it can swell a bit more. I have tried something like this:

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("[email protected]",
                    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,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

But then I'm getting this message:

The argument type 'MyAppBar' can't be assigned to the parameter type 'PreferredSizeWidget'

I have an intuition that this might not be possible. As I said, I'm new to flutter and dart and I have tried looking in the documentation and in other posts to no avail. Sorry if this seems stupid. I would just really like for someone to point me to the documentation, if there is any, on how to achieve this kind of things or any resource that can help me better understand how this works.

For your kind and valuable help, many thanks in advance!

Answer 1

the appBar widget must implement the PreferredSizeWidget class so you have to :

class MyAppBar extends StatelessWidget implements PreferredSizeWidget 

and then you have to implemt this method also

  Size get preferredSize => new Size.fromHeight(kToolbarHeight);

Full Example :

class MyAppBar extends StatelessWidget implements PreferredSizeWidget  {

  @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("[email protected]",
                    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,
              ),
            ),
          ],
        ),
      ],
    );
  }
 @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}