我发现无法在扑动中设置提升按钮的宽度。如果我已经很好地理解了,我应该把提升按钮放入大小框中。然后,我将能够设置框的宽度或高度。正确吗?还有别的办法吗?

在每个按钮周围创建一个大小框有点乏味,所以我想知道为什么他们选择这样做。我很确定他们这么做有一个很好的理由,但我不这么认为。 对于初学者来说,脚手架很难阅读和构建。

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: ElevatedButton(
    child: Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

当前回答

您需要使用扩展小部件。但是,如果按钮位于列上,则Expanded Widget将填充列的其余部分。因此,您需要将Expanded Widget包含在一行中。

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

其他回答

这段代码将帮助你更好地解决你的问题,因为我们不能直接为RaisedButton指定宽度,我们可以为它的子按钮指定宽度

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

将RaisedButton包装在容器内,并为容器小部件赋予宽度。

e.g

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

用Column PLUS包装你的ElevatedButton,为按钮添加样式的填充:

                          Column(
                            children: [
                              ElevatedButton(
                                  style: TextButton.styleFrom(
                                    backgroundColor: Colors.green,
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 20 * 1.5, vertical: 20),
                                  ),
                                  onPressed: () {},
                                  child: const Text('text')),],),

在Flutter 2.0中,RaisedButton已弃用,并被ElevatedButton取代。

考虑到这一点,为ElevatedButton提供自定义大小的更清晰的方法是ElevatedButton小部件的minimumSize属性。

输出

完整代码

          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              onPrimary: Colors.white,
              shadowColor: Colors.greenAccent,
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32.0)),
              minimumSize: Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: Text('Hey bro'),
          )

注意:也要记住,同样的方法可以用在新的小部件,如TextButton和OutlinedButton使用TextButton。styleFrom(minimumSize: Size(100,40))和outline button。styleFrom(minimumSize: Size(100,40))分别。

使用媒体查询明智地使用宽度为您的解决方案,这将运行相同的小屏幕和大屏幕

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

您也可以将类似的解决方案应用于SizeBox。