Bdtjtk

I am trying to build an entirely new widget tree after selecting an option in the DropdownButton menu, upon receiving data from a REST API after that selection.

Unfortunately, I keep getting the following error:

The following assertion was thrown building
MediaQuery(MediaQueryData(size: Size(411.4, 683.4), devicePixelRatio: 2.6, textScaleFactor: 1.0, padding: EdgeInsets.zero,
viewInsets: EdgeInsets.zero, alwaysUse24HourFormat:
false, accessibleNavigation: falsedisableAnimations:
falseinvertColors: falseboldText: false)):
'package:flutter/src/widgets/sliver.dart': Failed
assertion: line 551 pos 12: 'child != null': is not
true.

What my code does is essentially to check whether the data is present, which it won't be until the dropdown menu option is selected. Initially when there is no data, the ListView in the Scaffold holds simply an empty container below the dropdown menu but when the item is selected, data should be retrieved and the whole widget tree rebuilt, resulting in a ListView.separated within the enclosing ListView instead of the empty container.

The issue seems to lie in the setState() method of onChanged in DropdownButton after some preliminary debugging but I can't seem to figure out what the issue is. Do note also that the items in the dropdown menu is populated from the API but that is separate from the issue.

Any help would be greatly appreciated!

The relevant code is as follows:

class _TodosByTagsHomePageState extends State<TodosByTagsHomePage> {

  Tag selectedTag;



  Future<List<Tag>> _tagsList;

  List _todoList = new List<Todo>();



  @override

  void initState() {

    _tagsList = fetchTags();

    super.initState();

  }



  final Logger log = new Logger('TodosByTags');



  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: Text("Second Screen"),

        ),

        body: ListView(

            children: <Widget>[

              FutureBuilder<List<Tag>>(

                  future: _tagsList,

                  builder: (context, snapshot) {

                    if (snapshot.hasData) {

                      return DropdownButton<Tag>(

                        value: selectedTag,

                        items: snapshot.data.map((value) {

                          return new DropdownMenuItem<Tag>(

                            value: value,

                            child: Text(value.tagName),

                          );

                        }).toList(),

                        hint: Text("Select tag"),

                        onChanged: (Tag chosenTag) {

                          setState(() {

                            log.info("In set state");

                            selectedTag = chosenTag;

                            Scaffold.of(context).showSnackBar(new SnackBar(

                                content: Text(selectedTag.tagName)));

                          });

                        },

                      );

                    } else if (snapshot.hasError) {

                      return Text("${snapshot.error}");

                    }



                    return Container(width: 0.0, height: 0.0);

                  }),

              createSimpleWidget(),

            ])

    );

  }



  Widget createSimpleWidget() {

    if (selectedTag == null) {

      return Container();

    } else {

      retrieveSelectedTodoAndCreateList(selectedTag.tagName);

    }

  }



  FutureBuilder<List<Todo>> retrieveSelectedTodoAndCreateList(String tagName) {

    return new FutureBuilder<List<Todo>>(

        future: fetchSelectedTodos(tagName),

        builder: (context, snapshot) {

          if (snapshot.hasData) {

            print(snapshot.hasData);

            _todoList = snapshot.data;

            return createSelectedTodoListViewWidget(_todoList);

          } else if (snapshot.hasError) {

            return Text("${snapshot.error}");

          }



          return Container(width: 0.0, height: 0.0);

        });

  }



  createSelectedTodoListViewWidget(List<Todo> todoList) {

    final _BIGGER_FONT = const TextStyle(fontSize: 18.0);



    Widget _buildTodoList() {

      return ListView.separated(

          physics: const ScrollPhysics(),

          itemCount: todoList == null ? 0 : todoList.length,

          separatorBuilder: (BuildContext context, int index) => Divider(),

          shrinkWrap: true,

          padding: const EdgeInsets.fromLTRB(32.0, 32.0, 32.0, 0.0),

          itemBuilder: (context, i) {

            return ListTile(

              title: Text(todoList[i].getTaskName(), style: _BIGGER_FONT),

            );

          });

    }



    return _buildTodoList();

  }





}

At first, I'll start by saying something I noticed about your code:

You're using ListView somewhat incorrectly. While It's true that ListView can contain whatever number and types of elements and arrange them in a linear way, it should contain only widgets of the same type like Contacts or Todos.

As list view is still a list, like in many programming language, it will take only one type within it, by design, like string or int.

I'd recommend trying the Column widget with a combination of the Flexible and Expanded widgets.

Regarding your problem, I think it lies in the createSimpleWidget function. When selectedTag is not null, you're not returning the retrieveSelectedTodoAndCreateList function's return value, so nothing will be returned at all, thus, asserting the child to null. To avoid these things in the future (and also to keep only one return statement in a function), I recommend doing this:

Widget createSimpleWidget() {

  return (selectedTag == null) 

     ? Container() 

     : retrieveSelectedTodoAndCreateList(selectedTag.tagName);

}

Hope this helps!