Flutter Question posted in
The official Flutter documentation can be found here.

Getting red screen when selecting item in DropdownButton wiget in flutter

I have an issue related to DropdownButtons I have in a flutter screen.

I have 6 DropdownButtons in a screen called trxn screen. This screen allows the user to enter data and save it to a Firebase document.

When I open the trxn screen it automatically scrolls to the bottom of the page. The last DropdownButton on the screen causes the screen to be red and I can’t see anything else above the red.

This is the code for one of the Dropdownbuttons:

Wrap(
  children: [
    const Text(
      'Appraiser Company:    ',
    ),
    StreamBuilder<QuerySnapshot>(
        stream: _db.collection('appraiserCompany').snapshots(),
        builder:
            (BuildContext context, AsyncSnapshot snapshot) {
          List<DropdownMenuItem<String>> appraiserCompanyItems =
              [];
          appraiserCompanyItems.add(
              const DropdownMenuItem<String>(
                  value: 'a',
                  child: Text('Select Appraiser Company')));
          if (snapshot.hasData) {
            final appraiserCompanyList = snapshot.data.docs;
            for (var appraiserCompany in appraiserCompanyList) {
              appraiserCompanyItems.add(
                DropdownMenuItem(
                  value: appraiserCompany.id,
                  child: Text(
                    appraiserCompany['appraiserCompanyName'],
                  ),
                ),
              );
            }
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          if (appraiserCompanyItems.isNotEmpty) {
            return DropdownButton<String>(
              hint: const Text("Select Appraiser"),
              value: _selectedAppraiserCompany ??
                  appraiserCompanyItems[0].value,
              onChanged: (appraiserCompanyValue) {
                setState(() {
                  _selectedAppraiserCompany =
                      appraiserCompanyValue;
                });
                ref
                    .read(trxnNotifierProvider.notifier)
                    .updateAppraiserCompanyId(
                        _selectedAppraiserCompany!);
              },
              items: appraiserCompanyItems,
            );
          } else {
            return const SizedBox();
          }
        }),
  ],
),

How do I get rid of the red screen? This is really frustrating.

Tags:

2

Answers


  1. 0

    It is difficult to give a diagnosis without understanding the error, but it occurs to me that you can try the following:

    1. In the body of the Scaffold return the dropdown that you published here and check if it is displayed, if so, then the problem is in the widget tree when you have more than one dropdown (perhaps the Column or the ListView).

    2. Instead of a Wrap, use a Column or a Row and see what happens.

    3. Consider using Flexible or Expanded.

    Login or Signup to reply.
  2. 0 
    Wrap(
children: [
const Text(
   'Appraiser Company:    ',
 ),
 StreamBuilder<QuerySnapshot>(
  stream: _db.collection('appraiserCompany').snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    if (snapshot.hasError) {
      return const Center(
        child: Text('Error loading data'),
      );
    }
    final appraiserCompanyItems = <DropdownMenuItem<String>>[];
    appraiserCompanyItems.add(
      const DropdownMenuItem<String>(
        value: 'Select Appraiser',
        child: Text('Select Appraiser Company'),
      ),
    );
    snapshot.data!.docs.forEach((appraiserCompany) {
      appraiserCompanyItems.add(
        DropdownMenuItem<String>(
          value: appraiserCompany.id,
          child: Text(appraiserCompany['appraiserCompanyName']),
        ),
      );
    });
    return DropdownButton<String>(
      hint: const Text("Select Appraiser"),
      value: _selectedAppraiserCompany ?? 'Select Appraiser',
      onChanged: (appraiserCompanyValue) {
        setState(() {
          _selectedAppraiserCompany = appraiserCompanyValue;
        });
        ref
            .read(trxnNotifierProvider.notifier)
            .updateAppraiserCompanyId(appraiserCompanyValue);
      },
      items: appraiserCompanyItems,
    );
  },
  ),
  ],
 ),

    You can see that I simplified the initialization of appraiserCompanyItems using the List constructor. Also used snapshot.data!.docs.forEach to iterate over the documents directly. THis is important.
    Also removed unnecessary condition for checking if appraiserCompanyItems is not empty before returning the DropdownButton widget.
    Changed the initial value of the DropdownButton to ‘Select Appraiser’ if _selectedAppraiserCompany

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search