flutter AppBar leading内容过长导致宽度不够的问题

我爱模板网在用flutter做app时，需要做下面的效果：


这个左边的icon+文字，肯定要用AppBar的leading写了，再设置个宽度，于是写了下面的代码：

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Container(
          margin: EdgeInsets.only(left: ScreenUtil().setWidth(30)),
          width: ScreenUtil().setWidth(160),
          child:Row(
            children: <Widget>[
              Image.asset(
                'images/icon-addr.png',
                width: ScreenUtil().setWidth(28),
                height: ScreenUtil().setHeight(28),
              ),
              Text(
                '合肥市',
                style: TextStyle(fontSize: ScreenUtil().setSp(28)),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              )
            ],
          )
        ),
        title: Text(
          '云仓网',
          style: TextStyle(
            fontSize: ScreenUtil().setSp(34),
          ),
        ),
        centerTitle: true,
      ),
      body: Center(
        child: Text('首页'),
      ),
    );
  }
}

结果却是下面的效果：


leading里面的Container宽度根本不起作用。

百度了好久没找到解决办法，倒是遇到很多和我一样问题的人，只能去google找找了：

结果我找到了下面的效果：


这个左边两个图标，这肯定超出了leading的范围了，查看了代码：

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    titleSpacing: 0.0,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.mail_outline),
              onPressed: _onClickNotification,
            ),
            Positioned(
              top: 12.0,
              right: 10.0,
              width: 10.0,
              height: 10.0,
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColors.notification,
                ),
              ),
            )
          ],
        ),
        Expanded(
          child: Center(child: Text('test')),
        )
      ],
    ),
    automaticallyImplyLeading: false,
    centerTitle: true,
    actions: <Widget>[
      Row(
        children: <Widget>[
          Text('Online'),
          Switch(
            value: true,
            onChanged: (bool value) {},
          )
        ],
      )
    ],
  ),
  drawer: Drawer(
    child: _buildDrawer(),
  ),
  body: Container(
    color: Colors.orange,
  ),
);

原来根本没有用leading来做，而是用了title，经过改造，终于实现了（标题不太居中，稍微调整即可）：


最终代码：

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset(
                  'images/icon-addr.png',
                  width: ScreenUtil().setWidth(28),
                  height: ScreenUtil().setHeight(28),
                ),
                Text(
                  '合肥市',
                  style: TextStyle(fontSize: ScreenUtil().setSp(28)),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                )
              ],
            ),
            Expanded(
              child: Center(
                child: Text('云仓网',style: TextStyle(fontSize: ScreenUtil().setSp(34),),)
              ),
            )
          ],
        ),
        centerTitle: true,
      ),
      body: Center(
        child: Text('首页'),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！