Schaltflächenbreite Übergeordnetes Element

118

Ich möchte wissen, wie ich eine Breite einstellen kann, die der übergeordneten Layoutbreite entspricht

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

Ich weiß ein wenig über ExpandedWidget, aber Expandederweitert die Ansicht in beide Richtungen, ich weiß nicht, wie es geht.

Mohit Suthar
quelle
1
Vielleicht stattdessen eine Spalte?
Günter Zöchbauer
Ja, ich füge eine Spalte anstelle eines Containers hinzu, aber die Breite der Schaltfläche ist Wrap Content. Wie kann die Breite auf das übergeordnete
Element ausgedehnt werden?
Sie können einfach einen FlatButton verwenden und ihn in einen Container einwickeln und die Breite des Containers zur Bildschirmbreite hinzufügen, indem Sie die Medienabfrage verwenden. Suchen Sie nach meiner Antwort unten
maheshmnj

Antworten:

262

Die richtige Lösung wäre die Verwendung des SizedBox.expandWidgets, das erzwingt child, dass es der Größe des übergeordneten Elements entspricht.

SizedBox.expand(
  child: RaisedButton(...),
)

Es gibt viele Alternativen, die mehr oder weniger Anpassungen ermöglichen:

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

oder mit a ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)
Rémi Rousselet
quelle
31
Mit SizedBox.expand wird die Schaltfläche in voller Breite und Höhe angezeigt, worum es nicht geht. Die Frage betrifft einen Knopf, der nur die volle Breite und nicht die Höhe abdeckt.
Vinoth Kumar
3
@ RémiRousselet Vinoths Kommentar ist gültig. Können Sie die richtigen Konstruktoren für SizedBox hinzufügen, um nur die Breite zu erweitern, da dies jetzt die akzeptierte Antwort ist?
user823447
Ich Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
erhalte
Danke für die Lösung
Ajay Kumar
Ich liebe die Antwort in beide Richtungen, sie ist vollständiger.
Raiden Core
30

Das Größenattribut kann ButtonThememit verwendet werdenminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

oder nachdem https://github.com/flutter/flutter/pull/19416 gelandet ist

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),
Günter Zöchbauer
quelle
25
Container(
  width: double.infinity,
  child: RaisedButton(...),
),
Vinoth Kumar
quelle
24

Am einfachsten ist es, ein FlatButtonin a eingeschlossenes zu verwenden Container. Die Schaltfläche nimmt standardmäßig die Größe ihres übergeordneten Elements an und weist dem so eine gewünschte Breite zu Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

maheshmnj
quelle
16

Nach einigen Recherchen habe ich eine Lösung gefunden und danke an @ Günter Zöchbauer,

Ich habe Spalte anstelle von Container und verwendet

Setzen Sie die Eigenschaft auf die Spalte CrossAxisAlignment.stretch , um das übergeordnete Element von Button zu füllen

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),
Mohit Suthar
quelle
8
Column/ Rowsollte nicht für ein untergeordnetes Layout verwendet werden. Verwenden Sie stattdessen die Alternative für ein Kind. Wie Align, SizedBoxund ähnliche.
Rémi Rousselet
4

@ Mohit Suthar,

Wir haben eine der besten Lösungen gefunden, um Eltern über Breite und Höhe wie unten anzupassen

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

Hier können Sie überprüfen, ob der ExpandedController die gesamte verbleibende Breite und Höhe erfasst .

TejaDroid
quelle
1
Bisher ist es die beste Lösung
M David
4

Das hat bei mir funktioniert .

Der einfachste Weg, um die Breite oder Höhe der übergeordneten Elemente im obigen Code anzugeben.

...
width: double.infinity,
height: double.infinity,
...
Hase
quelle
4

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
4

Sie können die Übereinstimmung des Widgets mit festlegen

1) Setzen Sie die Breite auf double.infinity :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Verwenden Sie MediaQuery:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),
Hetal
quelle
1

Der folgende Code funktioniert für mich

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
Rinkesh
quelle
1

Dies funktioniert für mich in einem eigenständigen Widget.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.
PaulDef515
quelle
1

Das funktioniert bei mir.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 
Kelvinzer
quelle
1

Die Verwendung von a ListTilefunktioniert auch, da eine Liste die gesamte Breite ausfüllt:

ListTile(
  title: new RaisedButton(...),
),
Oush
quelle
1

Sie können dies mit MaterialButton tun

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)
Mahmoud Abu Elheja
quelle
0
 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)
Raj008
quelle
0

Dieser hat für mich gearbeitet

width: MediaQuery.of(context).size.width-100,
kapsid
quelle
0

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Für mich geht das.

TaoZang
quelle
0

Der grundlegendste Ansatz ist die Verwendung von Container, indem die Breite auf unendlich definiert wird. Siehe das folgende Codebeispiel

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)
Tajul Asri
quelle
0
         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(Log in,
                  textAlign: TextAlign.center,
                ),
              ),
            )

So etwas funktioniert bei mir.

Adam Smaka
quelle
0

Legen Sie Ihre RaisedButton(...)in eineSizedBox

SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)
Guter Mann
quelle