web-dev-qa-db-ja.com

FlutterでRaisedButtonの幅を設定する方法は？

FlutterでRaisedButtonの幅を設定できないことがわかりました。よく理解していれば、RaisedButtonをSizedBoxに入れる必要があります。その後、ボックスの幅または高さを設定できます。それが正しいか？別の方法がありますか？

これは、すべてのボタンの周りにSizedBoxを作成するのは少し面倒なので、なぜこのように選択するのか疑問に思っています。彼らにはそうする正当な理由があると確信していますが、私はそれを見ません。足場は読みやすく、初心者向けに構築するのがかなり困難です。

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

ドキュメントで述べたように ここ

上げられたボタンの最小サイズは88.0 x 36.0で、ButtonThemeでオーバーライドできます。

あなたはそのようにすることができます

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

match_parentには次を使用できます

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

使用できる特定の値

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

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

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

  • ウィジェットの子は制約を定義します。その情報に基づく親のサイズ自体。 ex：Padding、これは子制約を取り、それを増やします。
  • 親は、子に制約を適用します。例：SizedBoxだけでなく、ストレッチモードのColumnも、...

RaisedButtonは最初のケースです。つまり、独自の高さ/幅を定義するのはボタンです。また、重要な規則に従って、上げられたボタンのサイズは固定されています。

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

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

8
Rémi Rousselet

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

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

すべてのRaisedButtonsの高さとminWidthをグローバルに変更する場合は、ThemeData内でMaterialAppをオーバーライドできます。

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

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

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

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

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

RainseButtonが親のスペースを占めるようにする場合は、 Expanded Widget を試してください。

0
xinthink

コメントで言われているとおりに行うこともできますし、労力を節約して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,),
              ),
              )
)
0
youssef ali