Search code examples
flutterdartflutter-layout

How to display streambuilder and dropdown correctly in flutter


I'm a new flutter developer and a bit confused here, I want to display a dropdown menu and the streambuilder in my screen. Here's the code for the dropdown.

      DropdownButton<String>(
        value: selectedItem,
        items: services,
        .map((item) => DropdownMenuItem<String>(
          value:item,
          child: Text(item, style: TextStyle(fonSize: 24))
        )).toList(),
        onChanged: (item) => setState(() => selectedItem - item),
      )

Here's the scaffold with streambuilder

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      
      body: StreamBuilder<List<SportBooking>>(
          stream: readBooking(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Something went wrong! ${snapshot.error}');
            } else if (snapshot.hasData) {
              final booking = snapshot.data!;
              return ListView(
                children: booking.map(buildBooking).toList(),
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          }),
    );
  }

Problem is I have tried with a Column widget here like below with a simple text widget, but it throws an Assertion error

body: Column(
        children: [
          Text('data'),
          StreamBuilder<List<SportBooking>>(
              stream: readBooking(),
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Text('Something went wrong! ${snapshot.error}');
                } else if (snapshot.hasData) {
                  final booking = snapshot.data!;
                  return ListView(
                    children: booking.map(buildBooking).toList(),
                  );
                } else {
                  return const Center(child: CircularProgressIndicator());
                }
              }),
        ],
      ),

How do I display both the dropdown and the streambuilder in the scaffold?


Solution

  • In the ListView add the following properties

    ListView(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,