Flutter让按钮填充满所在container

反例:

Container(
              alignment: Alignment.topLeft,
              // padding: EdgeInsets.all(1),
              // margin:new EdgeInsets.only(right:1.0),
              decoration: BoxDecoration(
                color: Colors.green,
                //每条列表项底部加一个边框
                border: Border(
                    bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
              ),
              child: FlatButton(
                // padding: new EdgeInsets.only(right: 200),
                color: Colors.blueGrey,
                child: Text(
                  "A. ${Provider.of<GetData>(context).answerA}",
                  style: TextStyle(fontSize: 22.0, color: Colors.white),
                ),
                onPressed: () {
                 
                },
              ),
            ),

效果: 灰色背景是按钮, 绿色背景是所在container, 这里可以看出, button并没有占满所在container. image.png

改用row实现代码:

Row(
              children: <Widget>[
                Expanded(
                  child: FlatButton(
                    color: Colors.blueGrey,
                    child: Container(
                      alignment: Alignment.topLeft,
                      child: Text(
                        "A. ${Provider.of<GetData>(context).answerA}",
                        style: TextStyle(fontSize: 22.0, color: Colors.white),
                        textAlign: TextAlign.start,
                        maxLines: 1,
                      ),
                    ),
                    onPressed: () {
                      
                    },
                  ),
                )
              ],
            ),

效果对比: A选项是使用row实现的按钮,占满了整个空间 image.png

这里FlatButton里的child没有直接使用text,而是嵌套了container的原因是, 直接用text,会导致文本居中, 用textAlign也没有办法修改为左对齐,所以只好中间加了个container实现左对齐.