webentwicklung-frage-antwort-db.com.de

Breite der Schaltflächenbreite Übergeordnetes Element: Flattern

Ich bin neu in Flutter, also möchte ich wissen, wie ich eine Breite einstellen kann, die auf layout_ Elternteil passt

 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ß etwas über Expanded - Tag, aber die erweiterte Ansicht in beide Richtungen erweitern, ich weiß nicht, wie es geht. Helfen Sie mir, wenn Sie es wissen, vielen Dank im Voraus.

13
Mohit Suthar

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

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

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

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

oder mit einer ConstrainedBox

new ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: new RaisedButton(...),
)
58
Rémi Rousselet

Das Größenattribut kann mit ButtonTheme mit minWidth: double.infinity angegeben werden. 

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

oder nach https://github.com/flutter/flutter/pull/19416 landen

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),
8
    new Container {
         width: double.infinity,
         child: new RaisedButton(...),
    }
5
Vinoth Kumar

die Verwendung einer ListTile funktioniert auch, da eine Liste die gesamte Breite ausfüllt:

new ListTile(
              title: new RaisedButton(...),
),
1
Bryan Ibrahim

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

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.
0
PaulDef515

@Mohit Suthar,

Eine der besten Lösungen für übergeordnete Übereinstimmung bis Breite sowie Höhe wurde gefunden

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 die Expanded Controller Ganzes erfassenBreite und Höhe bleiben.

0
TejaDroid

Nach einiger Recherche fand ich eine Lösung und dank @ Günter Zöchbauer 

Ich habe Spalte anstelle von Container und verwendet 

setzen Sie die Eigenschaft auf column CrossAxisAlignment.stretch , um den übergeordneten Button 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,
                ),
              ],
            ),
0
Mohit Suthar

Die einfachste Methode ist die Verwendung eines FlatButton-Objekts, das in einem Container eingeschlossen ist. Der Button nimmt standardmäßig die Größe des übergeordneten Elements an und weist dem Container daher die gewünschte Breite zu. 

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

das obige Widget erzeugt die folgende Ausgabe

 enter image description here

0
maheshmnj
 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)
0
Raj008