Schaltflächenbreite Übergeordnetes Element

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.

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

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

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

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:

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,

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 .

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

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

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

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

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.

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

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

ListTile(
  title: new RaisedButton(...),
),

Sie können dies mit MaterialButton tun

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

Dieser hat für mich gearbeitet

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

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

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

    )
)

         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.

Legen Sie Ihre RaisedButton(...)in eineSizedBox

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