Parameters from Stream<List> not being received in the MainPage

Personally, I rather work with streams and rxdart than methods such as yield.

Within my firebase projects I use a construction like this:

// Get a database reference for the user
Future<DatabaseReference> _getUserRef() async {
    final FirebaseUser user = await _auth.currentUser();
    return FirebaseDatabase.instance
        .reference()
        .child('users')
        .child(user.uid);
}

// Get a reference to a specific user node. In you cause buttons
Future<DatabaseReference> _getButtonsRef() async {
    return (await _getUserRef()).child('buttons');
}

// Get the data as stream
Stream<List<MyButton>> getButtons() { // Not sure what data type you need
    return _getButtonsRef().asStream()
        .switchMap((ref) => ref.onValue) // Use on value to get new data if any changes
        .map((event) => event.snapshot.value != null ? // Map the value to the object you want or return an empty list
            MySnapshotMapper.buttonListFromSnapshot(event.snapshot.value) : List<MyButton>()
        );
}

In case you wonder about the MySnapshotMapper:

class MySnapshotMapper {
  static List<MyButton> buttonListFromSnapshot(Map snapshot) {
    return List<MyButton>.from(snapshot.values.map((snap) => MyButton.fromSnapshot(snap)));
  }
}

And of course the button:

class MyButton {
  // Not sure which fields it should have
  String name = '';
  double width = 10.0, height = 10;

  MyButton.fromSnapshot(Map snap) {
    name = snap['name'] ?? ''; // Use the value in the Map or or use a default value if not found
    width = snap['width']?.toDouble() || width;
    height = snap['height ']?.toDouble() || height ;
  }
}

Step 1:

class EmployeeRepository {
  final CollectionReference collection =
  FirebaseFirestore.instance.collection('employees');

  Stream<QuerySnapshot> getStream() {
    /// Based on Firebase.auth you can collect user data here and pass as 
    /// Stream<QuerySnapshot> like below.
    return collection.snapshots();
  }
  
  Future<List<Employee>> buildData(AsyncSnapshot snapshot) async {
    List<Employee> list = [];

    /// Based on the user snapShot, you can convert into the List and return to
    /// the futurebuilder

    await Future.forEach(snapshot.data.docs, (element) async {
      list.add(Employee.fromSnapshot(element));
    });

    return Future<List<Employee>>.value(list);
  }
}

Step 2:

  EmployeeRepository employeeRepository = EmployeeRepository();

  @override
  Widget build(BuildContext context) {
    Widget loadProgressIndicator() {
      return Container(
        child: Center(child: CircularProgressIndicator()),
      );
    }

    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('ListView'),
            ),
            body: StreamBuilder<QuerySnapshot>(
                stream: employeeRepository.getStream(),
                builder: (context, snapShot) {
                  if (snapShot.hasError ||
                      snapShot.data == null ||
                      snapShot.data.docs.length == 0 ||
                      snapShot.connectionState == ConnectionState.waiting) {
                    return loadProgressIndicator();
                  } else {
                    return FutureBuilder(
                        future: employeeRepository.buildData(snapShot),
                        builder: (context, futureSnapShot) {
                          if (futureSnapShot.hasError ||
                              futureSnapShot.connectionState ==
                                  ConnectionState.waiting ||
                              futureSnapShot.data.length == 0) {
                            return loadProgressIndicator();
                          } else {
                            return ListView.builder(
                              itemBuilder: (context, index) {
                                final employee = futureSnapShot.data[index];
                                return ListTile(
                                  title: Text(employee.employeeName),
                                );
                              },
                            );
                          }
                        });
                  }
                })));
  }

This what I think has happened and which is why the code is not working as expected:

1. onValue function of the DocumentReference provides a Stream<Event> according to the latest documentation.

Stream<Event> onValue

2. But since the forEach returns a Future it is counted and used as a Future & then converted to a Stream by using Stream.fromFuture()

Future forEach(void action(T element))

3. While as forEach Returns a future, when completed it returns null as final value to the future.

Future forEach(void action(T element)) {
  _Future future = new _Future();
  StreamSubscription<T> subscription =
      this.listen(null, onError: future._completeError, onDone: () {
    future._complete(null);
  }, cancelOnError: true);
  subscription.onData((T element) {
    _runUserCode<void>(() => action(element), (_) {},
        _cancelAndErrorClosure(subscription, future));
  });
  return future;
}

4. Finally the lst being returned instead of the event in the final for loop.

  await for (var event in lstStream) {
    yield lst;
  }

You can improve this code to make it work as following.

Stream<List> readData(user) async*{
    final lstValues = databaseReference.child(user.uid+"/buttons/").onValue.map((element) {
      Map button_list = element.snapshot.value as Map;
      List lst = button_list.values.toList();
      print(lst);
      return lst;
    }).toList();

    final lstStream = Stream.fromFuture(lstValues);

    await for(var event in lstStream) {
      yield event;
    }
      
  }

Check that I have made following changes:

1. replaced forEach with map
2. [Optional change] taken Firebase user as method dependency as it is not required to be fetched on every iteration
3. [Optional change] moved lst & button_list inside the map execution block

I have not tested this code due to Firebase database dependency, but I have tested the theory on which this solution is based off of.

Here is the sample which I have tested:

Stream<List> readData() async* {

  final list = Stream.fromIterable([
    ['a'],
    ['a', 'b'],
    ['a', 'b', 'c'],
    ['a', 'b', 'c', 'd']
  ]).map((element) {
    print(element);
    return element;
  }).toList();

  final listStream = Stream.fromFuture(list);
  await for (var event in listStream) {
    yield event;
  }
}

I have replaced the Firebase document with a list of strings to make provide as much as resemblance as possible.

So in theory,

Stream.fromIterable([
    ['a'],
    ['a', 'b'],
    ['a', 'b', 'c'],
    ['a', 'b', 'c', 'd']
  ]) // Stream<List<String>> which can be similar to a list of documents

can replace

databaseReference.child(user.uid+"/buttons/").onValue // Stream<Event> which has a list of documents

Since FirebaseDatabase does not provide a stream of results you should use, Cloud FireStore

Here is the implementation of your code using cloud_firestore: ^0.16.0.

You will need to use subCollections for replicated the exact structure as RealTime Database.

1.Create a datamodel for the data you want to store and retrieve from firestore to made things easier.

class ButtonData{
  final String name, icon;

  ButtonData({this.name, this.icon});
}

2. Create a Stream that returns a list of documents from cloud firestore subCollection.

   Stream<List<ButtonData>> getData(){
   
   return users
       .doc(FirebaseAuth.instance.currentUser.uid)
       .collection('buttons').snapshots().map(buttonsFromQuerySnapshot);
    }
   

3. Create a function that converts QuerySnapshot from firestore to a list of required objects. buttonsFromQuerySnapshot

   List<ButtonData> buttonsFromQuerySnapshot(QuerySnapshot querySnapshot){
   
   return querySnapshot.docs.map((DocumentSnapshot snapshot) {
   
     return ButtonData(name: snapshot.data()['name'].toString(), icon: snapshot.data()['icon'].toString());
   }).toList();
    }
   

4. Use a streamBuilder to show results from the stream.

    StreamBuilder<List<ButtonData>>(
          stream: getData(),
            builder: (context, snapshot){
   
            if (snapshot.hasData){
              final List<ButtonData> buttons = snapshot.data;
              return ListView.builder(itemBuilder: (context, index){
                return Column(
                  children: [
                    Text(buttons[index].name),
                    Text(buttons[index].icon),
                  ],
                );
              });
            }
   
            return const Center(child: CircularProgressIndicator(),);
   
            }),
   

I would recommend you to store icons as integer values. Here you can find a list of Material Icons and their integer values.

You can then display icons using their retrieved integer values. See this answer https://stackoverflow.com/a/59854460/10285344 (Haven't tried this)

I solved a very similar problem about loading the functions a user can execute according to their profile to build the interface. It's basically handling an async and futures issue. For me, Provider made the deal. I will try to put everything in order and paste my code for reference, note I did not have to make changes in the state, I just needed the initial information:

1. Create a multiprovider for your app
2. Define the Provider to call your API to get the initial information of the cards.
3. Pass this information as a parameter to your widget using Provider.of
4. Use this provider info in InitState()
5. Options for managing changes... Copy the provider info into an object you can handle or define API calls to your provider to update changes dynamically (I did not went through this)

Check relevant parts of code you may be interested in: Provider class and API call:

class UserFunctionProvider {
  Future<List<UserFunction>> loadUserFunctions() async {
    return await APICall.profileFunctions();
  }
}

  static Future<List<UserFunction>> profileFunctions() async{
    List<UserFunction> functionList = [];
    UserFunction oneFunction;
    final cfg = new GlobalConfiguration();
    final token = window.localStorage["csrf"];
    var res = await http.get('${cfg.get('server')}:${cfg.get('port')}/get_user_functions',
        headers: {
          'Content-type': 'application/json',
          'Accept': 'application/json',
          'Authorization': 'Bearer $token'
        }
    );
    int i = 0;
    jsonDecode(res.body).forEach((element) {
      oneFunction = new UserFunction.fromJson(element);
      oneFunction.tabControllerIndex = i;
      i++;
      functionList.add(oneFunction);
    });
    return functionList;
  }

Defining a Multiprovider and passing it to the relevant widget (it was home in my case)

void main() async {
  GlobalConfiguration().loadFromMap(AppConfiguration.appConfig);
  Logger.root.level = Level.ALL; // defaults to Level.INFO
  Logger.root.onRecord.listen((record) {
    print(
        '${record.level.name}: ${record.time}: ${record.loggerName}: ${record.message}');
  });
  WidgetsFlutterBinding.ensureInitialized();
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterError.dumpErrorToConsole(details);
    if (kReleaseMode)
      exit(1);
  };
  runApp(
    MultiProvider(
      providers: [
        FutureProvider(create: (_) => UserFunctionProvider().loadUserFunctions()),
      ],
      child: MyApp()
    )
  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    String myLocale;
    try{
      myLocale = Platform.localeName;
    }catch(e){
      myLocale = 'es_ES';
      print('Language set to Spanish by default.\n Error retrieving platform language: $e');
    }
    initializeDateFormatting(myLocale, null);
    return MaterialApp(
      title: 'Sanofi admin',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: VerifySession().loadScreen(HomeScreen(Provider.of<List<UserFunction>>(context)))
      );
  }
}

Receiving the parameter from the provider into the Widget (as listOfUserFunction):

class HomeScreen extends StatefulWidget {
  HomeScreen(this.listOfUserFunction);

  final List<UserFunction> listOfUserFunction;

  @override
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  final log = Logger('HomeScreenState');
  TabController tabController;
  int active = 0;
  UserFunction oneFunction;
  @override
  void initState() {
    super.initState();
    tabController = new TabController(vsync: this, length: widget.listOfUserFunction.length, initialIndex: 0)
      ..addListener(() {
      setState(() {
        active = tabController.index;
      });
      });
  }