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.
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(...),
)
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'),
),
),
new Container {
width: double.infinity,
child: new RaisedButton(...),
}
die Verwendung einer ListTile funktioniert auch, da eine Liste die gesamte Breite ausfüllt:
new ListTile(
title: new RaisedButton(...),
),
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.
@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.
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,
),
],
),
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
new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)