Flutter에서 RaisedButton의 너비를 설정하는 방법은 무엇입니까?

RaisedButtonFlutter에서 a의 너비를 설정할 수 없음을 보았습니다 . 내가 잘 이해 한 경우, 나는을 넣어해야 RaisedButton에 SizedBox. 그런 다음 상자의 너비 또는 높이를 설정할 수 있습니다. 맞습니까? 다른 방법이 있습니까?

이것은 SizedBox모든 버튼 주위 에 생성하는 것이 약간 지루 하므로 왜 이런 식으로 선택했는지 궁금합니다. 나는 그들이 그렇게 할 타당한 이유가 있다고 확신하지만 나는 그것을 보지 못합니다. 스캐 폴딩은 초보자를 위해 읽고 만들기가 매우 어렵습니다.

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

여기 문서 에서 말했듯이

돌출 된 버튼의 최소 크기는 88.0 x 36.0이며 ButtonTheme로 덮어 쓸 수 있습니다.

그렇게 할 수 있습니다

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

들어 match_parent당신이 사용할 수있는

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

특정 값에 대해 사용할 수 있습니다.

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

플러터는 크기에 관한 것이 아니기 때문입니다. 제약에 관한 것입니다.

일반적으로 두 가지 사용 사례가 있습니다.

• 위젯의 자식은 제약 조건을 정의합니다. 상위 크기 자체는 해당 정보를 기반으로합니다. ex : Padding, 자식 제약 조건을 취하고 증가시킵니다.
• 부모는 자식에게 제약을 적용합니다. 예 : SizedBox,하지만 Columnstrech 모드에서도 ...

RaisedButton첫 번째 경우입니다. 즉, 자체 높이 / 너비를 정의하는 버튼입니다. 그리고 재료 규칙에 따라 올린 버튼 크기가 고정됩니다.

이러한 동작을 원하지 않으므로 두 번째 유형의 위젯을 사용하여 버튼 제약 조건을 재정의 할 수 있습니다.

어쨌든 이것이 많이 필요하다면 당신을 위해 일하는 새로운 위젯을 만드는 것을 고려하십시오. 또는 MaterialButton높이 속성이있는를 사용하십시오 .

다음과 같이 할 수있는 것보다 MaterialButton을 사용하는 것이 좋습니다.

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

확장 된 위젯을 사용해야합니다. 그러나 버튼이 열에있는 경우 확장 된 위젯이 나머지 열을 채 웁니다. 따라서 확장 된 위젯을 한 행으로 묶어야합니다.

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

Raise 버튼을 부모와 일치시키는 가장 선호하는 방법은 컨테이너로 감싸는 것입니다. 아래는 샘플 코드입니다.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

이 코드는 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,
    );

FractionallySizedBox, where widthFactor및 heightFactor 앱 / 부모 크기의 비율을 정의하기 만하면됩니다 .

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

미디어 쿼리를 사용하여 크고 작은 화면에서 동일하게 실행되는 솔루션에 너비를 현명하게 사용하십시오.

  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수도 있습니다.

모든의 높이와 minWidth를 전역 적으로 변경하려면 내부에서 RaisedButton재정의 할 수 있습니다 .ThemeDataMaterialApp

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

컨테이너 내부에 RaisedButton을 감싸고 컨테이너 위젯에 너비를 제공합니다.

예 :

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

앱 전체에서 사용되는 버튼과 같은 전역 메서드를 만들 수 있습니다. 컨테이너 내부의 텍스트 길이에 따라 크기가 조정됩니다. FittedBox 위젯은 그 안의 자식에 따라 위젯을 맞추는 데 사용됩니다.

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

특정 너비와 높이의 버튼을 원한다면 RawMaterialButton의 제약 속성을 사용하여 버튼의 최소 최대 너비와 높이를 제공 할 수 있습니다.

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

주석에서 말한대로 수행하거나 노력을 절약하고 RawMaterialButton으로 작업 할 수 있습니다. 모든 것이 있고 테두리를 원형으로 변경할 수 있고 다른 속성을 많이 사용할 수 있습니다. ex shape (반경을 늘려 더 원형을 만듭니다)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

위젯 인 GestureDetector를 사용하여 원하는 모양을 버튼으로 사용할 수 있으며 하위 속성 아래에 다른 위젯을 허용합니다. 여기 다른 예 에서처럼

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

버튼이 Flex위젯 ( Row& 포함 Column)에 배치 된 경우 확장 된 위젯 을 사용하여 사용 가능한 공간을 채울 수 있습니다.

제 경우에는 여백을 사용하여 크기를 변경할 수 있습니다.

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

그것을 시도

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

모든 버튼 테마 설정을 제거하지 않으려면.

ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Column () 안에 버튼이 있고 버튼이 최대 너비를 갖도록하려면 다음을 설정하십시오.

crossAxisAlignment : CrossAxisAlignment.stretch

열 위젯에서. 이제이 Column () 아래의 모든 것은 사용 가능한 최대 너비를 갖습니다.

이것은 나를 위해 일했습니다. 컨테이너는 높이를 제공하고 FractionallySizedBox는 RaisedButton의 너비를 제공합니다.

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

전체 너비 버튼을위한 짧고 달콤한 솔루션 :

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)