Search code examples
flutterflutter-providerflutter-gridview

Flutter gridview with fake item for adding data


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.