How to customize appbar and place an Imageview in flutter

Question

I want to design a layout as given image,

I have used PreferredSize and my code is,

PreferredSize(
          preferredSize: Size.fromHeight(200.0),
          child: AppBar(
            // title: Text('Profile'),
            title: Row(
              children: <Widget>[
                Icon(Icons.account_circle, size: 150.0),
                Text('data'),
              ],
            ),
            bottom: TabBar(
              tabs: [
              .
              .
              ],
            ),
          ),
        ),

The output is different from expected design check this,

How could I fix this?

Answer 1

Here is the Code for the Layout that you Want.

class MyHomePage1 extends StatefulWidget {
  @override
  _MyHomePage1State createState() => _MyHomePage1State();
}

class _MyHomePage1State extends State<MyHomePage1> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: 0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.account_circle,
                    size: 70.0,
                    color: Colors.white,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Account Name',
                        style: TextStyle(color: Colors.white),
                      ),
                      Text(
                        'Email Address',
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          bottom: PreferredSize(
            preferredSize: Size.square(140.0),
            child: TabBar(
              tabs: [
                Icon(Icons.train),
                Icon(Icons.directions_bus),
                Icon(Icons.motorcycle)
              ],
            ),
          ),
        ),
      ),
    );
  }
}