Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Let Streambuilder in Row return nothing

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 ;
      },
    ),
  ],
);
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    I haven’t tested the code but it should more or less look like this:

    FutureBuilder<bool>(
      future: isServiceActive(),
      builder: (context, serviceActive) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    ElevatedButton(),
    ElevatedButton(),
    if (serviceActive)
    ElevatedButton(),
 
  ],
);
)
    Login or Signup to reply.
  3. 0

    I will suggest using FutureBuilder on top of Row widget and use a future variable on state class(for statefulWidget).

    FutureBuilder<bool>(
  future: isServiceActiveFuture,
  builder: (context, serviceActive) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        ElevatedButton(),
        ElevatedButton(),
        if (serviceActive) ElevatedButton(),
      ],
    );
  },
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search