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 pos

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: [
        new Row(
          children: [
            new Column(
              children: [
                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,
              ),
            ),
          ],
        ),
      ],
    );
  }
 @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}