I have a Row in my Flutter app with three buttons where one is optional.
The optional button will be activated through a FutureBuilder which checks if the service is activated.
A Futurebuilder must return something. So at first i just returned an empty SizedBox() but this will also get a placement in MainAxisAlignment in the Row.
Is there a way to just return nothing or even another way to build this?
example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(),
ElevatedButton(),
FutureBuilder<bool>(
future: isServiceActive(),
builder: (context, serviceActive) {
if (serviceActive) {
return ElevatedButton(),
}
// Else it should return nothing.
// A empty SizedBox would take a place in MainAxisAlignment
return ;
},
),
],
);
You can use SizedBox.shrink() I think it has no effect on widget alignment.
(serivceActive) ? ElevatedButton(): SizedBox.shrink();
The above will work, but if you really need to put no thing if the service is not active. So you should have a predefined knowledge of the value of that Future variable.
class AnyName extends StatelessWidget{
bool serviceActive = false;
@override
Widget build(BuildContext context){
initActiveService(); // now you know it before you build
return Scaffold(
body: Row(
children : [
ElevatedButton(),
ElevatedButton(),
if(activeService)
ElevatedButton(),
]
)
);
}
void initActiveService()async{
activeService = await getBooleanValue();
}
Future<bool> getBooleanValue()async{
return await Future.delayed(Duration(seconds: 1) , ()=>true);
}
}
Or, you can even push the FutureBuilder higher than the row widget like other answers suggest: by @Md. Yeasin Sheikh and @Szymon Kowaliński
FutureBuilder(
future: isActive(),
builder:(context,data){
return Row(
children : [
ElevatedButton(),
ElevatedButton(),
if(data)
ElevatedButton(),
]
)
}
)
Note: I just coded my idea directly on that answer, take as a pseudo code.
Hope it helps you.