What is the best way to display a list of network images while having them fullscreen and swipeable to switch images?

Question

I would like to be able to display a list of NetworkImages that I get in full screen, and to be able to swipe between them. I can't seem to find a decent way to do so though. I currently have a GridView.builder to display the images, but I don't like the way it looks. Hence why I am trying to make it a fullscreen view of the images where you can swipe between images, if there are multiple.

This is what I am currently using, the gridview. I don't like it though, but it was decent for displaying the images. To actually display the images I believe I will always need NetworkImage, since I need to send over some Authorization headers to actually view the image.

class _ImageViewState extends State<ImageView> {


  @override
  Widget build(BuildContext context) {

    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Container(
      height: height,
      width: width,
      child: Scaffold(
        body: FutureBuilder<dynamic>(
          future: ImageDBProvider.imageDB.getUserimageData(widget.recordType, widget.recordData.id),
          initialData: List(),
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
                return Text('none');
              case ConnectionState.waiting:
                return Center(child: CircularProgressIndicator());
              case ConnectionState.active:
                return Text('');
              case ConnectionState.done:
                if (snapshot.hasError) {
                  print(
                    '${snapshot.error}',
                  );
                }
            }
            var userImageData = snapshot.data;
            return GridView.builder(
                itemCount: userImageData['images'].length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (context, index) {
                  return Padding(
                      padding: EdgeInsets.all(5),
                      child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      userImageData['images'][index].url, headers: <String, String>{
                                    'Authorization': '${userImageData['user_data']['token']}',
                                  },),
                                  fit: BoxFit.cover))));
                });

          }
        ),
      ),
    );
  }
}

Answer 1

You could use PageView

Official documentation here