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.0x 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(...)
)

これは、フラッターがサイズではないためです。それは制約についてです。

通常、2つのユースケースがあります。

• ウィジェットの子は制約を定義します。親のサイズ自体は、その情報に基づいています。例：Padding、子制約を取得して増加させます。
• 親は子に制約を適用します。例：SizedBox、しかしColumnストレッチモードでも、..。

RaisedButton最初のケースです。つまり、それ自体の高さ/幅を定義するボタンです。また、素材のルールにより、浮き上がったボタンのサイズは固定されています。

このような動作は望ましくないため、2番目のタイプのウィジェットを使用して、ボタンの制約をオーバーライドできます。

とにかく、これがたくさん必要な場合は、あなたのために仕事をする新しいウィジェットを作成することを検討してください。またはMaterialButton、heightプロパティを持つを使用します。

次のようにするよりも、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,
)

親が一致する[レイズ]ボタンを作成するための私の好ましい方法は、コンテナーでラップすることです。以下はサンプルコードです。

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

拡張ウィジェットを使用する必要があります。ただし、ボタンが列にある場合、展開ウィジェットは列の残りの部分を埋めます。したがって、拡張ウィジェットを行で囲む必要があります。

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

を使用するだけですFractionallySizedBox。ここで、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場合はThemeData、MaterialApp：内でオーバーライドできます。

 @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: 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(...),
    ),
  ],
)