How to display streambuilder and dropdown correctly in flutter-CodePudding

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?

CodePudding user response：

You can wrap it inside a Column Widget and now you can add as many Widgets as you want.

You can either wrap ListView with Column Widget.

Make sure to Wrap ListView with Expanded Widget otherwise it will give exception.

    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          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),
      ),
          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());
                }
              }),
        ],
      ),
    );

CodePudding user response：

In the ListView add the following properties

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