It is very simple using conditional operators: build(context) => condition ? MaterialButton(...) : Container(); In this case, condition is a boolean expression (returning bool , same thing you would put into an if-statement) and the empty Container will render as empty space and will not take up any space.
Actually you can use if/else
and switch
and any other statement inline in dart / flutter.
class StatmentExample extends StatelessWidget {
Widget build(BuildContext context) {
return Text((() {
if(true){
return "tis true";}
return "anything but true";
})());
}
}
ie wrap your statements in a function
(() {
// your code here
}())
I would heavily recommend against putting too much logic directly with your UI 'markup' but I found that type inference in Dart needs a little bit of work so it can be sometimes useful in scenarios like that.
condition ? Text("True") : null,
children: [
...manyItems,
oneItem,
if(canIKickIt)
...kickTheCan
for (item in items)
Text(item)
child: getWidget()
Widget getWidget() {
if (x > 5) ...
//more logic here and return a Widget
As another alternative to the ternary operator, you could create a function version of the switch statement such as in the following post https://stackoverflow.com/a/57390589/1058292.
child: case2(myInput,
{
1: Text("Its one"),
2: Text("Its two"),
}, Text("Default"));
I personally use if/else statement in children with this kind of block statement. It only supports on Dart version 2.3.0 above.
if / else
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
] else ...[
StatsScreen(),
],
],
),
if / else if
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
] else if(_selectedIndex == 1)...[
StatsScreen(),
],
],
),
multiple widgets example
Column(
children: [
if (_selectedIndex == 0) ...[
DayScreen(),
AboutScreen(),
InfoScreen(),
] else if(_selectedIndex == 1)...[
HomeScreen(),
StatsScreen(),
],
],
),
In Dart, if/else
and switch
are statements not expressions. They don't return a value so you can't pass them to constructor params. If you have a lot of conditional logic in your build method, then it is a good practice to try and simplify it. For example, you can move self-contained logic to methods, and use if/else
statements to initialize local variables which you can later use.
Widget _buildChild() {
if (condition) {
return ...
}
return ...
}
Widget build(BuildContext context) {
return new Container(child: _buildChild());
}
if/else
Widget build(BuildContext context) {
Widget child;
if (condition) {
child = ...
} else {
child = ...
}
return new Container(child: child);
}
In such a case I would recommand using the ternary operator:
child: condition ? Container() : Center()
and try to avoid code of the form:
if (condition) return A else return B
which is needlessly more verbose than the ternary operator.
But if more logic is needed you may also:
The Builder widget is meant for allowing the use of a closure when a child widget is required:
A platonic widget that calls a closure to obtain its child widget.
It is convenient anytime you need logic to build a widget, it avoids the need to create a dedicated function.
You use the Builder widget as the child, you provide your logic in its builder
method:
Center(
child: Builder(
builder: (context) {
// any logic needed...
final condition = _whateverLogicNeeded();
return condition
? Container();
: Center();
}
)
)
The Builder provides a convenient place to hold the creational logic. It is more straightforward than the immediate anonymous function proposed by atreeon.
Also I agree that the logic should be extracted from the UI code, but when it's really UI logic it is sometimes more legible to keep it there.
For the record, Dart 2.3 added the ability to use if/else statements in Collection literals. This is now done the following way:
return Column(children: <Widget>[
Text("hello"),
if (condition)
Text("should not render if false"),
Text("world")
],);
Flutter Issue #28181 - Inline conditional rendering in list
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With