Flutter Sample Part 7 – Full Screen Image

(This is my small series for getting started with Flutter mobile SDK for iOS and Android. See below for previous posts)

• Part 1: Flutter first steps
• Part 2: Page navigation
• Part 3: Favorites
• Part 4: Navigation Bar
• Part 5: Saving Favorites
• Part 6: Sharing and Linking

One obvious feature that’s missing from a photo viewing app is a full screen view of the image. In this example I’m using a package called photo_view. The author goes through a full example here: A simple zoomable image widget for Flutter.

In this case I’ve just created a new screen called FullScreenImageScreen and created a PhotoView widget inside a Scaffold widget. I’m using the CachedNetworkImageProvider widget used previously so that it will load a cached image if one is available. I’ve also set the minScale property so that you can’t pinch the image to reduce it more than it’s original size.

import 'package:photo_view/photo_view.dart';
...

class FullScreenImageScreen extends StatefulWidget {

  final String photoUrl;

  FullScreenImageScreen({Key key, this.photoUrl}) : super(key: key);

  @override
  _FullScreenImageScreen createState() => _FullScreenImageScreen();
}

class _FullScreenImageScreen extends State<FullScreenImageScreen> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: PhotoView(
        imageProvider: CachedNetworkImageProvider(widget.photoUrl),
        minScale: 1.0
      )
    );
  }
}

All that is left then is to add navigation to this screen from the ImageDetailsScreen (this is using the existing CustomRoute class that I added to the project previously). The CachedNetworkImage widget in the ImageDetailsScreen has now been wrapped in a GestureDetector widget and the onTap callback set to a navigateToItem method

  class _ImageDetailsScreenState extends State<ImageDetailsScreen> {

  ...

  @override
  Widget build(BuildContext context) {

    ...

    return Scaffold(
        ...

        ),
        body: ListView(
          children: <Widget>[
            Stack(
              alignment: AlignmentDirectional.bottomStart,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Container(
                        padding: new EdgeInsets.all(0.0),
                        child: Hero(
                            tag: photo.title,
                            child: GestureDetector (
                              child: CachedNetworkImage(
                                placeholder: CircularProgressIndicator(),
                                imageUrl: photoUrl,
                                height: 240.0,
                                width: double.infinity,
                                fit: BoxFit.cover),
                                onTap: () {
                                    _navigateToItem(context, photoUrl);
                                })
                        )
                    ),
                    Container(
                      height: 40.0,
                    )
                  ],
                ),

                ...
                
              ],
            ),

            ...

          ],
        )
    );
  }

  ...

  void _navigateToItem(BuildContext context, String photoUrl) {
    Navigator.push(
        context,
        CustomRoute(
            builder: (context) => FullScreenImageScreen(photoUrl: photoUrl))
    );
  }
}

Example below:

Source and repository here:

https://bitbucket.org/bitsbobsetc/fluttersample/src/FullScreenImage/