Độ rộng của nút đối sánh gốc

Tôi muốn biết rằng làm cách nào để đặt chiều rộng phù hợp với chiều rộng bố cục mẹ

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

Tôi biết một chút về Expandedwidget nhưng Expandedmở rộng tầm nhìn sang cả hai hướng, tôi không biết phải làm thế nào.

Giải pháp chính xác sẽ là sử dụng SizedBox.expandtiện ích con, tiện ích này bắt buộc nó childphải phù hợp với kích thước của phụ huynh.

SizedBox.expand(
  child: RaisedButton(...),
)

Có nhiều lựa chọn thay thế, cho phép tùy chỉnh nhiều hơn hoặc ít hơn:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

hoặc sử dụng một ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

Thuộc tính kích thước có thể được cung cấp sử dụng ButtonThemevớiminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

hoặc sau khi https://github.com/flutter/flutter/pull/19416 hạ cánh

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

Cách đơn giản nhất là sử dụng một FlatButtonbao bọc bên trong a Container, Nút theo mặc định có kích thước bằng kích thước cha của nó và do đó, gán chiều rộng mong muốn cho Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Đầu ra:

Sau một số nghiên cứu, tôi đã tìm ra một số giải pháp và cảm ơn @ Günter Zöchbauer,

Tôi đã sử dụng cột thay vì Vùng chứa và

đặt thuộc tính thành cột CrossAxisAlignment.stretch để Điền đối sánh cha của Nút

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

@Mohit Suthar,

Đã tìm thấy một trong những giải pháp tốt nhất để đối sánh cha mẹ với chiều rộng cũng như chiều cao như bên dưới

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

Ở đây bạn có thể kiểm tra các Expandedđiều khiển Có được toàn bộ vẫn chiều rộng và chiều cao .

Điều này đã làm việc cho tôi.

Cách đơn giản nhất để cung cấp chiều rộng hoặc chiều cao của đối sánh gốc trong mã đã cho ở trên.

...
width: double.infinity,
height: double.infinity,
...

Cho match_parentbạn có thể sử dụng

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Đối với bất kỳ giá trị cụ thể nào bạn có thể sử dụng

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

Bạn có thể đặt phụ huynh phù hợp của tiện ích bằng cách

1) đặt chiều rộng thành gấp đôi. Vô cực :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Sử dụng MediaQuery:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

Đoạn mã sau phù hợp với tôi

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))

Điều này đang làm việc cho tôi trong một widget độc lập.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

Điều này đang làm việc cho tôi.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 

Sử dụng một ListTilecũng hoạt động, vì một danh sách lấp đầy toàn bộ chiều rộng:

ListTile(
  title: new RaisedButton(...),
),

bạn có thể làm điều đó với MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

Cái này làm việc cho tôi

width: MediaQuery.of(context).size.width-100,

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Nó làm việc cho tôi.

Cách tiếp cận cơ bản nhất là sử dụng Container bằng cách xác định chiều rộng của nó là vô hạn. Xem ví dụ dưới đây về mã

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)

         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(
                  “Log in”,
                  textAlign: TextAlign.center,
                ),
              ),
            )

Một cái gì đó như thế này làm việc cho tôi.

Đặt của bạn RaisedButton(...)trong mộtSizedBox

SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)