振颤后使FlattButton的图标居中问题

时间:2020-10-04 16:04:06

标签: flutter flutter-layout

如何使该箭头图标位于按钮中心

enter image description here

看到图标的边缘是图标的中心,我要使拍打看到图标的中心是图标的中心

更多说明:

enter image description here

我的代码:

AppBar(
      backgroundColor: Colors.transparent,
      leading:
      // Here the code of the button
       SizedBox(
        height: getProportionateScreenHeight(20),
        width: getProportionateScreenWidth(10),
        child: Padding(
          padding: EdgeInsets.all(8),
          child: FlatButton(
            padding: EdgeInsets.zero,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            color: Colors.white,
            onPressed: () {
              Navigator.pop(context);
            },
            child: Center(
              child: Icon(
                Icons.arrow_back_ios,
              ),
            ),
          ),
        ),
      ),
      // ....
      actions: [
        IconButton(
          icon: Icon(
            Icons.favorite,
            color: favFlag ? Colors.red : Colors.red[100],
          ),
          onPressed: () {
            setState(() {
              favFlag = !favFlag;
            });
          },
        ),
      ],
    );

在上一次升级之前,它一直在与我合作。

2 个答案:

答案 0 :(得分:0)

我认为height使用widthSizedBox因子存在一些问题。我为此使用了简单的值,效果很好。

实际上,我删除了SizedBox小部件,并且没有这种效果。我在代码后也附有图片:)

appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading:
            // Here the code of the button
            SizedBox(
          height: 20,
          width: 20,
          child: Padding(
            padding: EdgeInsets.all(8),
            child: FlatButton(
              padding: EdgeInsets.zero,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              color: Colors.white,
              onPressed: () {
                // Navigator.pop(context);
              },
              child: Center(
                child: Icon(
                  Icons.arrow_back_ios,
                ),
              ),
            ),
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(
              Icons.favorite,
              color: favFlag ? Colors.red : Colors.red[100],
            ),
            onPressed: () {
              setState(() {
               favFlag = !favFlag;
              });
            },
          ),
        ],
      ),

输出:

enter image description here

答案 1 :(得分:0)

我的解决方案

 AppBar(
      backgroundColor: Colors.transparent,
      // Here the code of the button

      leading: Padding(
        padding: EdgeInsets.all(8),
        child: FlatButton(
          padding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          color: Colors.white,
          onPressed: () {
            Navigator.pop(context);
          },
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned.directional(
                textDirection: Directionality.of(context),
                end: 3,
                child: Icon(
                  Icons.arrow_back_ios,
                ),
              ),
            ],
          ),
        ),
      ),
      // ....
      actions: [
        IconButton(
          icon: Icon(
            Icons.favorite,
            color: favFlag ? Colors.red : Colors.red[100],
          ),
          onPressed: () {
            setState(() {
              favFlag = !favFlag;
            });
            AdsService.listByPagination();
          },
        ),
      ],
    );

我将其定位为手动居中,因此,我希望有其他干净的短解决方案。

相关问题