溢出1.0像素的Raisedbutton - 翩翩起舞

Question

我试图为我的家庭自动化项目个性化一个RaisedButton里面的内容，在我添加不同类型的文字和图标到Button上，但由于某些原因，我得到一个溢出的1像素。

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: SizedBox(
                width: 90.0,
                height: 90.0,
                child: RaisedButton(
                  onPressed: () {},
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Icon(Icons.stay_primary_portrait),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(left: 0),
                            child: Text('Lock'),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 0),
                            child: Text('100%'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),

该应用程序。

Answer 1

RaisedButton有一些默认的padding。通过删除默认的padding来解决它.这将完美地工作，检查它。

     ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: SizedBox(
            width: 90.0,
            height: 90.0,
            child: RaisedButton(
              // remove the default padding the raised button has 
              padding: EdgeInsets.zero,
              onPressed: () {},
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.stay_primary_portrait),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 0),
                        child: Text('Lock'),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 0),
                        child: Text('100%'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),

输出看起来像这样截图

Answer 2

我不明白为什么你会得到这样的结果，但你可以用InkWell+Container代替RaisedButton。

ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: SizedBox(
                      width: 90.0,
                      height: 90.0,
                      child: InkWell(
                        onTap: () {},
                        child: Container(
                          color: Colors.grey,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Icon(Icons.stay_primary_portrait),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                    padding: EdgeInsets.only(left: 0),
                                    child: Text('Lock'),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(left: 0),
                                    child: Text('100%'),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),