Flutter dart add list to children

Question

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(),
            ],
            ),
        );
        },
    );
    }
}

Answer 1

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,
              ),
            );
          },
        );
      }
    }

Answer 2

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(),),
          ),
        );
      },
    );
  }
}