it-swarm-ko.tech

Flutter : 버튼을 부모 크기로 확장하는 방법은 무엇입니까?

사각형 버튼을 만들려고하는데 확장이 컨테이너와 동일하게 작동하지 않는 것 같습니다. 예를 들어 다음 코드를 사용하십시오.

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

가로로 확장되지만 세로로 확장되지 않은 두 개의 단추가 표시됩니다. 동시에 컨테이너는 수평 및 수직으로 확장됩니다. 다음을 수행하면 동일한 효과가 발생합니다.

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

여기서 행을 열로 변경했습니다. 버튼은 세로로 확장되지만 가로로 확장되지는 않지만 컨테이너는 두 가지를 모두 수행합니다.

부모가 세로 및 가로로 버튼을 확장 할 수있는 방법이 있습니까?

17
fuzzylogical

crossAxisAlignment 속성을 Row;

crossAxisAlignment: CrossAxisAlignment.stretch
34
aziza

ButtonTheme로 감싸기 minWidth: 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'),
    ),
  ),
12
Günter Zöchbauer

시도해 볼 수도 있습니다

  1. SizedBox 사용

    SizedBox(
      width: double.maxFinite, // set width to maxFinite
      child: RaisedButton(...),
    )
    
  2. MaterialButtonminWidth 속성을 사용하십시오.

    MaterialButton(
      minWidth: double.maxFinite, // set minWidth to maxFinite
      color: Colors.blue,
      onPressed: () {},
      child: Text("Button"),
    )
    
1
CopsOnRoad