flutter - 如何自定义 appbar 并在 flutter 中放置 Imageview

Question

我想设计一个给定图片的布局，

我使用了 PreferredSize，我的代码是，

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: [
              .
              .
              ],
            ),
          ),
        ),

输出与预期的设计检查不同，

我该如何解决这个问题？

Answer 1

这是您想要的布局代码。

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)
              ],
            ),
          ),
        ),
      ),
    );
  }
}