Flutter dart add list to children

user_2797642 0
Viewed 18359

I am new on dart, I just want to add a list of my data using map (store.state.availablePage.map) to the children of ListView, but I already have some item on the ListView.

Here the sample code I want :

class MgDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreBuilder<AppState>(
      builder: (context, store) {
        return Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              Text("Title"),
              store.state.availablePage.map((value) {
                return ListTile(
                  title: Text("Title"),
                  onTap: () {},
                );
              }).toList(),
            ],
          ),
        );
      },
    );
  }
}

Please help me how I can achieve that?

Update: the code above is not compiled.

Updates Dart Lang version > 2.2.2, can be achieve using below code :

class MgDrawer extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return StoreBuilder<AppState>(
        builder: (context, store) {
        return Drawer(
            child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
                Text("Title"),
                ...store.state.availablePage.map((value) {
                return ListTile(
                    title: Text("Title"),
                    onTap: () {},
                );
                }).toList(),
            ],
            ),
        );
        },
    );
    }
}
dart flutter
2 Answers

You ListView is having Text(Widget) and a Array of ListTile(Array of Widgets) which means ListView(children: [Widget, [Widget]]).

But it should be ListView(children: [Widget1, Widget2, Widget3,...]). Below code might help

 class MgDrawer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return StoreBuilder<AppState>(
          builder: (context, store) {
            List<Widget> list = store.state.availablePage.map((value) {
              return ListTile(
                title: Text("Title"),
                onTap: () {},
              );
            }).toList();
            list.insert(0, Text("Title"));
            return Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: list,
              ),
            );
          },
        );
      }
    }
user_53059620

If for some reason someone is unable to use "..." operator, there is also another solution. It is not as elegant as "..." operator, but it also works.

You can just use ..addAll(list) at the end of the list.

Here is how it would look like in given example:

class MgDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreBuilder<AppState>(
      builder: (context, store) {
        return Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              Text("Title"),
            ]..addAll(store.state.availablePage.map((value) {
              return ListTile(
                title: Text("Title"),
                onTap: () {},
              );
            }).toList(),),
          ),
        );
      },
    );
  }
}
user_123806780
Related