Wie stelle ich die Breite eines RaisedButton in Flutter ein?

108

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,
  ),
),
OlivierGrenoble
quelle
2
Lesen Sie diese Ausgabe: github.com/flutter/flutter/issues/10492
Blasanka
3
Bitte beachten Sie, dass ein UI-Design mit festen Breiten Kopfschmerzen verursachen kann, wenn Sie sich jemals dafür entscheiden, Ihre App zugänglich (größere Schriftgrößen) oder mehrsprachig (einige Sprachen sind ausführlicher als andere) zu machen.
Ruud Helderman

Antworten:

210

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"),
  ),
);
Airon Tark
quelle
8
Gibt es so etwas wie "match_parent"?
Pawan
2
Sie könnten verwenden width:MediaQuery.of(context).size.widthoderwidth:double.infinity
Oush
1
Wickeln Sie es einfach in ein erweitertes Widget
janosch
2
es entfernt alle Basis-Buttontheme-Werte
Murat Özbayraktar
84

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(...)
)
CopsOnRoad
quelle
Interessante Lösung. Ich denke, wir sollten dann einen Rand verwenden, um etwas freien Raum an den Seiten zu lassen.
OlivierGrenoble
In diesem Fall sollten Sie Containeranstelle vonSizedBox
CopsOnRoad
16

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.

Rémi Rousselet
quelle
13

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,
)
hui00
quelle
Die Verwendung von minWidth beantwortet die Frage der Einstellung der Breite nicht vollständig. Die Verwendung eines übergeordneten Wrap-Widgets kann hier hilfreich sein.
AlanKley
Das ist perfekt, um kleinere Knöpfe zu erhalten, die ihre Etiketten fest umwickeln.
Hawkbee
6

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),
                      ),
                    ),
                  )
Hitesh Dhamshaniya
quelle
5

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,
    );
Fayaz
quelle
Wenn Sie möchten, dass Ihre Schaltfläche beispielsweise 80% des Bildschirms ausmacht, können Siewidth * 0.8
Kirill Karmazin
5

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,
    ),
  ),),])
Elton Morais
quelle
"the Expanded You" - meinst du das erweiterte Widget?
Yasir
Der Flex-Standardwert ist 1, es ist nicht erforderlich, ihn anzugeben.
c49
3

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

quelle
3

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),
Shikhar Singh
quelle
3

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,
)),
MST
quelle
2

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,
       ),
    ));
  }
Saeed Masoumi
quelle
2

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 .

jitsm555
quelle
1

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,),
              ),
              )
)
youssef ali
quelle
1

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.

xinthink
quelle
2
Erweitert kann nur funktionieren, wenn deine Eltern dich dabei unterstützen.
CopsOnRoad
Expandedsoll in Multi-Child-Widgets wie Rowund verwendet werden Column.
Loolooii
0

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"),
        ),
      ),
Amir Vazirifar
quelle
0

Versuch es

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