Flutter gridview with fake item for adding data

Issue

let’s say I have a gridview like this:

    class ImagesGrid extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final size = MediaQuery.of(context).size;
        final imagesData = Provider.of<Pictures>(context);
        final images = imagesData.items;
        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: size.width / size.height ,
          ),
          padding: const EdgeInsets.all(10.0),
          itemCount: images.length + 1,
          itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
            value: images[i],
            child: images.length == 0  ? Text('No images'):  ImageWidget(),
          ),
        );
      }
    }

Now, let’s say I wish to add a FlatButton in this GridView as a last item, which will be used for adding another data. How can I do it?

Solution

class ImagesGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final imagesData = Provider.of<Pictures>(context);
    final images = imagesData.items;
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: size.width / size.height ,
      ),
      padding: const EdgeInsets.all(10.0),
      itemCount: images.length + 1,
      itemBuilder: (ctx, i) {
        if(i==images.length) return FlatButton( // Add child and onPressed params );
        return ChangeNotifierProvider.value(
            value: images[i],
            child: images.length == 0  ? Text('No images'):  ImageWidget(),
        );
      },
    );
  }
}

Hope I might have helped you.

Answered By – Sirus

Answer Checked By – Cary Denson (FlutterFixes Admin)