Flutter, how to return different widget based on future value?

Question

I would like to base on a future bool value, to set different icons pass back to a data card inside a list, I tried .then or FutureBuilder, but still not successful.

Scaffold:

child: ListView.builder(
                    itemCount: fullList.length,
                    itemBuilder: (BuildContext context, int index) {
                      return dataCard(context, fullList, index);
                    }),

dataCard:

Row(
                children: [
                  Expanded(
                    flex: 8,
                    child: Text(dl[i].Name,
                        style:
                            TextStyle(color: Colors.blue[400], fontSize: 16)),
                  ),
                  Expanded(
                    flex: 1,
                    child: setFavouriteIcon(dl[i].ID),
                  ),
                ],
              ),

setFavouriteIcon:

Widget setFavouriteIcon(_id) {
  final marked = markedFavourites(_id).then((value) {  //markedFavourites returns Future<bool>
    if (value == true) {
      return Icon(
        size: 24,
        Icons.favorite,
        color: Colors.red,
      );
    } else {
      return Icon(
        size: 24,
        Icons.favorite_border_outlined,
        color: Colors.red,
      );
    }
  });
  return Text('');  //Without this line, Error: A non-null value must be returned
}}

Md. Yeasin Sheikh · Accepted Answer · 2023-02-06 02:28:35Z

1

You can include other state as well on FutureBuilder

Widget setFavouriteIcon(_id) {
  return FutureBuilder(
    future: markedFavourites(_id),// you shouldn't call method directly here on statefulWidget case
    builder: (context, snapshot) {
      
      final value = snapshot.hasData && (snapshot.data as bool? ?? false);
      if (value == true) {
        return Icon(
          size: 24,
          Icons.favorite,
          color: Colors.red,
        );
      } else {
        return Icon(
          size: 24,
          Icons.favorite_border_outlined,
          color: Colors.red,
        );
      }
    },
  );
}

answered Feb 6, 2023 at 2:28

Md. Yeasin Sheikh

64.9k7 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tony Lam Over a year ago

Thanks Yeasin. I have wrapped the 2 Icons within GestureDectector to add/remove favourite, it works on database level, would you please teach me how to refresh the particular card when icon being pressed?

Md. Yeasin Sheikh Over a year ago

try to use the _id on filtering. You can follow this or better find how to select select specific item on listView

Soliev · Accepted Answer · 2023-02-06 02:31:08Z

you should use FutureBuilder

class FavoriteWidget extends StatelessWidget {
  const FavoriteWidget({super.key});


// some future value
  Future<bool> markedFavorites() async {
//do smth 
    return true;
// or return false 
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder<bool>(
        future: markedFavorites(),
        builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
          if (snapshot.hasData) {
            if (snapshot.data!) {
              return const Icon(
                Icons.favorite,
                color: Colors.red,
              );
            }
            return const Icon(Icons.favorite_border_outlined);
          }
        },
      ),
    );
  }
}

Collectives™ on Stack Overflow

Flutter, how to return different widget based on future value?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related