Wie stelle ich die Breite eines RaisedButton in Flutter ein?

Ich habe gesehen, dass ich die Breite von a RaisedButtonin Flutter nicht einstellen kann . Wenn ich gut verstanden habe, sollte ich das RaisedButtonin eine setzen SizedBox. Ich kann dann die Breite oder Höhe der Box einstellen. Ist es richtig? Gibt es einen anderen Weg, es zu tun?

Es ist etwas mühsam, SizedBoxum alle Schaltflächen herum eine zu erstellen, daher frage ich mich, warum sie sich dafür entschieden haben, dies auf diese Weise zu tun. Ich bin mir ziemlich sicher, dass sie einen guten Grund dafür haben, aber ich sehe es nicht. Das Gerüst ist für Anfänger ziemlich schwer zu lesen und zu bauen.

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

Wie in der Dokumentation hier gesagt

Erhöhte Schaltflächen haben eine Mindestgröße von 88,0 x 36,0, die mit ButtonTheme überschrieben werden kann.

Sie können es so machen

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

Für match_parentSie können verwenden

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

Für einen bestimmten Wert können Sie verwenden

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

Das liegt daran, dass es beim Flattern nicht um Größe geht. Es geht um Einschränkungen.

Normalerweise haben wir 2 Anwendungsfälle:

• Das untergeordnete Element eines Widgets definiert eine Einschränkung. Die übergeordnete Größe selbst basiert auf diesen Informationen. Beispiel : Padding, wodurch die untergeordnete Einschränkung übernommen und erhöht wird.
• Der Elternteil erzwingt eine Einschränkung für sein Kind. Bsp.: SizedBoxaber auch Columnim Streckmodus, ...

RaisedButtonist der erste Fall. Das heißt, es ist die Schaltfläche, die ihre eigene Höhe / Breite definiert. Und gemäß den Materialregeln ist die Größe der erhöhten Tasten festgelegt.

Sie möchten dieses Verhalten nicht, daher können Sie ein Widget des zweiten Typs verwenden, um die Schaltflächenbeschränkungen zu überschreiben.

Wenn Sie dies häufig benötigen, sollten Sie entweder ein neues Widget erstellen, das die Aufgabe für Sie erledigt. Oder verwenden Sie MaterialButton, die eine Höheneigenschaft besitzt.

Ich würde empfehlen, einen MaterialButton zu verwenden, als Sie es so machen können:

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

Meine bevorzugte Methode, um die Schaltfläche "Erhöhen" mit einem übergeordneten Element zu erstellen, besteht darin, sie mit "Container" zu umschließen. Unten finden Sie einen Beispielcode.

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

Dieser Code hilft Ihnen dabei, Ihr Problem besser zu lösen, da wir die Breite nicht direkt für den RaisedButton angeben können, sondern die Breite für das untergeordnete Element

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

Sie müssen ein erweitertes Widget verwenden. Befindet sich Ihre Schaltfläche jedoch in einer Spalte, füllt das erweiterte Widget den Rest der Spalte aus. Sie müssen das erweiterte Widget also in eine Zeile einschließen.

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

Wickeln Sie den RaisedButton in den Container und geben Sie dem Container-Widget die Breite.

z.B

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

Sie können eine globale Methode erstellen, z. B. für Schaltflächen, die in der gesamten App verwendet werden. Die Größe wird entsprechend der Textlänge im Container geändert. Das FittedBox-Widget wird verwendet, um das Widget an das darin enthaltene Kind anzupassen.

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

Wenn Sie eine Schaltfläche mit einer bestimmten Breite und Höhe wünschen, können Sie die Einschränkungseigenschaft von RawMaterialButton verwenden, um die minimale maximale Breite und Höhe der Schaltfläche anzugeben

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

Kann einfach FractionallySizedBox verwenden.

Dabei definieren widthFactor & heightFactor den Prozentsatz der App- / Elterngröße

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

Wenn Sie global die Höhe und die minWidth aller Ihrer ändern möchten RaisedButtons, dann können Sie außer Kraft setzen ThemeDatain Ihrem MaterialApp:

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

Verwenden Sie Media Query, um die Breite für Ihre Lösung sinnvoll zu verwenden, die für kleine und große Bildschirme gleich ist

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

Sie können eine ähnliche Lösung SizeBoxauch anwenden .

Sie können tun, was in den Kommentaren steht, oder Sie können den Aufwand sparen und mit RawMaterialButton arbeiten. die alles haben und Sie können den Rand so ändern, dass er kreisförmig ist und viele andere Attribute. ex-Form (vergrößern Sie den Radius, um eine kreisförmigere Form zu erhalten)

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

und Sie können jede gewünschte Form als Schaltfläche verwenden, indem Sie GestureDetector verwenden, ein Widget, das ein anderes Widget unter dem untergeordneten Attribut akzeptiert. wie im anderen Beispiel hier

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

Wenn die Schaltfläche in einem FlexWidget (einschließlich Row& Column) platziert ist, können Sie sie mit einem erweiterten Widget umbrechen , um den verfügbaren Platz zu füllen.

In meinem Fall habe ich margin verwendet, um die Größe ändern zu können:

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

Versuch es

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