Cannot use await - argument type Future<Member> can't be assigned

Help & Developmnet State Management
1

I need to await() some code, but it is in a column. The functionality I need to get to is in a Cubit(), which is part of the BLOC package. Normally, if I were in some future builder, I’d do a:

return //* Main Card View
        Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              CircleAvatar(
                radius: 20,
                child: CachedNetworkImage(
                        imageUrl: _memberCubit
                            .getMemberEntityByMemberEmail(
                                memberEmail: memberEmail)
                            .memberEmail)
                    .toString(),
              ),
              const SizedBox(width: 10),

But I can’t use _memberCubit.getMemberEntityByEmail() here because it’s not a future. Here’s a neat approach I picked up.

1. Wrap the Column() with a FutureBuilder(). To do this, I select Refactor and Wrap With Stream Builder to get a *builder functionality, then replace the stream: with future:

return //* Main Card View
        Padding(
      padding: const EdgeInsets.all(20),
      child: FutureBuilder<Object>(
          future: null,
          builder: (context, snapshot) => Column(
                crossAxisAlignment: CrossAxisAlignment.start,

2. Next at the top of the file, outside of the class, put the following calls:

//Internal class to allow for multiple future await 
// functions inside a Future builder
class FutureModel {
  final int result1; // return number of comments for a prayer
  final List<PrayerRequestCommentEntity> result2; //comment. list
 
 FutureModel({required this.result1, required this.result2});
}
//Internal class to allow for multiple future await functions inside a
//Future builder
Future<FutureModel> _futureFetch(PrayerRequestEntity prayer) async {
  final _prayerCubit = getItInstance<PrayerRequestCubit>();

//put your future await function requests here
  final results = await Future.wait([
    _prayerCubit.getNumberOfCommentsForPrayerRequest(prayer: prayer),
    _prayerCubit.getPrayerRequestComment(prayer: prayer),
  ]);
  return FutureModel(
      result1: results[0] as int,
      result2: results[1] as List<PrayerRequestCommentEntity>);
}
  1. In your Future builder you created in step 1, add in your FutureModel and the function _futureFetch. Now your awaited functions are available to you in the snapshot! The final product is below:

My Working Code

//Internal class to allow for multiple future await functions inside a
//Future builder
Future<FutureModel> _futureFetch(PrayerRequestEntity prayer) async {
  final _memberCubit = getItInstance<MemberCubit>();

//put your future await function requests here
  final results = await Future.wait([
    _memberCubit.getMemberEntityByMemberEmail(memberEmail: prayer.memberEmail),
  ]);
  return FutureModel(result1: results[0] as MemberEntity);
}
return //* Main Card View
        Padding(
      padding: const EdgeInsets.all(20),
      child: FutureBuilder<FutureModel>(
        future: _futureFetch(widget.prayerRequest),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final MemberEntity _member = snapshot.data!.result1;

            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: [
                    CircleAvatar(
                      radius: 20,
                      child: CachedNetworkImage(
                          imageUrl: _member.memberPicture.toString()),
                    ),
                    const SizedBox(width: 10),