[flutter] 버튼 너비 일치 부모

부모 레이아웃 너비 와 일치하도록 너비를 어떻게 설정할 수 있는지 알고 싶습니다.

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,
  ),
),

나는 Expanded위젯 에 대해 조금 알고 있지만 Expanded두 방향으로보기를 확장합니다. 어떻게 해야할지 모르겠습니다.



답변

올바른 해결책은 SizedBox.expand위젯 을 사용하여 child부모의 크기와 일치하도록 강제하는 것입니다.

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

더 많거나 적은 사용자 정의를 허용하는 많은 대안이 있습니다.

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

또는 사용 ConstrainedBox

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


답변

사이즈 속성하여 제공 될 수 ButtonThememinWidth: double.infinity

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

또는 https://github.com/flutter/flutter/pull/19416 착륙 후

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


답변

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


답변

가장 간단한 방법은 FlatButton내부 에 래핑 된 을 사용하는 것입니다 Container. 버튼은 기본적으로 부모의 크기를 사용하므로 원하는 너비를 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,
                      ),
                    ),
                  ),
                )

산출:

여기에 이미지 설명 입력


답변

조사 끝에 몇 가지 해결책을 찾았고 @ Günter Zöchbauer 덕분에

컨테이너 대신 열을 사용하고

속성을 열 CrossAxisAlignment.stretch 로 설정하여 Button의 부모와 일치합니다.

    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,
                ),
              ],
            ),


답변

위젯의 부모 일치를 설정할 수 있습니다.

1) 너비를 double.infinity로 설정 하십시오 .

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) 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,
          ),
        ),


답변

@Mohit Suthar,

부모 를 아래와 같이 너비높이일치 시키는 최상의 솔루션 중 하나를 찾았 습니다.

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")),
        ), 

여기에서 ExpandedController 가 전체 잔여 너비높이를 획득 하는지 확인할 수 있습니다 .