full_screen_image 2.0.0

Full screen photo viewer. It shuts off when scrolling vertically. Can work with Hero widget.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:full_screen_image/full_screen_image.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  String lorem =
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mauris in ex facilisis feugiat. Donec vestibulum elit id feugiat ultrices. Aenean ultrices rhoncus velit at viverra. In pharetra, nibh egestas mattis pretium, ipsum sapien rhoncus leo, consequat commodo erat elit ac nisi. Nulla elit justo, pretium sit amet quam eu, congue aliquam tellus. Integer eget luctus ante, pulvinar efficitur metus. Nam ut sodales urna, id placerat dolor. Nunc in feugiat turpis. In dictum leo dapibus justo semper, at facilisis lacus commodo. Nam porttitor et eros ut pharetra. Nullam ut quam eu felis ullamcorper elementum at et arcu. Phasellus nec massa risus. Praesent viverra pharetra ante. Etiam elementum ultricies nisl ultricies tempus. Pellentesque consequat feugiat ipsum, at venenatis nulla tincidunt eget. Nunc lobortis pretium nulla. Aenean condimentum felis a dignissim ultricies. Maecenas bibendum scelerisque rhoncus. Vestibulum sed ante sit amet elit luctus molestie. Curabitur consequat dolor magna, vitae pulvinar metus ultrices at. Maecenas sit amet pretium nibh. Ut vulputate nisl lorem, sed fringilla elit facilisis ut. Ut ac tincidunt tortor. Pellentesque leo ex, efficitur eget neque non, maximus molestie quam. Duis sagittis at ipsum non sagittis. Sed convallis, lorem a sagittis eleifend, nisl turpis efficitur massa, nec ultrices diam purus non leo. Pellentesque tempor in sem quis lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lacinia, elit a maximus fermentum, lacus felis venenatis elit, ut fringilla sem justo quis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ornare tincidunt lectus sit amet euismod. Nunc sodales velit quis leo luctus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie, felis eget ornare consequat, elit dolor ullamcorper leo, et feugiat felis eros sit amet nisl. Vestibulum et egestas felis, ac sodales ante. In in volutpat justo.Vestibulum volutpat dapibus felis. Proin in dolor purus. Mauris varius vitae nulla quis sodales. Duis sapien sapien, maximus sed lacinia quis, elementum in arcu. Etiam hendrerit convallis nulla efficitur consequat. Suspendisse mattis lacinia erat, eget congue ligula molestie at. Aenean blandit nisl eget arcu sodales pellentesque. Aenean ullamcorper neque vel eleifend dignissim. Phasellus nec feugiat mi. Ut dictum diam quis nulla suscipit, eu venenatis eros faucibus.Aenean aliquet purus nec orci facilisis congue. Aliquam gravida sem non ipsum venenatis, sit amet volutpat mi placerat. In vitae risus quis sem ullamcorper vestibulum. Maecenas bibendum tellus at libero congue consequat. Nulla quam elit, placerat at egestas vel, ultrices in erat. Donec non rhoncus nulla, nec consectetur magna. Aenean luctus dolor mi, nec sodales ipsum hendrerit et. Aliquam volutpat risus in pulvinar fringilla. Etiam tellus erat, malesuada ac pharetra non, egestas non sapien. Curabitur malesuada aliquet rhoncus. Aenean semper, magna nec malesuada feugiat, lorem odio vestibulum mauris, sed interdum nisl tortor sit amet arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus tempor metus mi, quis volutpat elit auctor non. Quisque tellus diam, aliquam eget blandit quis, sagittis sit amet erat. Mauris lobortis nunc a neque consequat efficitur.In hac habitasse platea dictumst. Aenean varius risus eu pulvinar interdum. Pellentesque imperdiet tortor urna, pharetra lacinia eros luctus ac. Nunc vitae luctus eros. Mauris eu vestibulum metus, iaculis rhoncus mi. Nulla imperdiet finibus sagittis. Proin vel pellentesque urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dignissim ultricies massa sed pharetra. Nunc libero massa, scelerisque ac orci vel, finibus aliquet urna. Maecenas eget lorem at dui sodales feugiat eget et nibh. Phasellus feugiat, lectus in facilisis dapibus, odio nisi maximus quam, eu facilisis turpis lorem vel diam. Morbi auctor consequat leo, sed venenatis lacus. Nunc vel nisl diam.Vivamus augue odio, varius nec lacinia in, placerat sed arcu. Integer sollicitudin nisl ut tempor malesuada. Suspendisse nunc dui, molestie pulvinar pretium vitae, accumsan a nulla. Aliquam erat volutpat. Ut dictum malesuada vestibulum. Quisque commodo ex id diam maximus, fermentum egestas neque euismod. Donec molestie augue elit, eget vulputate justo pellentesque ut. Mauris sed pulvinar erat, eu molestie dolor. Integer nec eleifend lacus. Suspendisse lobortis, eros id mattis sagittis, tortor libero feugiat est, et tristique arcu tortor lacinia quam. Etiam posuere elit nibh, non maximus turpis cursus sed. Proin rhoncus purus ex, vitae interdum purus aliquam porttitor. Cras dignissim et enim nec convallis.Duis non metus in magna elementum elementum. Proin vitae commodo dui. Pellentesque ultricies, lectus nec suscipit ornare, enim neque pellentesque sapien, quis varius mauris magna pretium odio. Sed quis purus eu lorem dignissim mollis. Nullam mattis quam nunc, quis accumsan turpis scelerisque ac. Proin pharetra tempor lorem, et pretium diam lacinia sed. Sed in turpis tristique, imperdiet elit in, rutrum ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus augue diam, euismod quis placerat imperdiet, hendrerit vitae tortor. In non sapien vitae ante fermentum consectetur.Integer elementum ligula erat, id sodales dui convallis vel. Pellentesque elementum quam tellus, vitae sodales metus ultrices ac. Aenean at nibh lectus. Pellentesque tempus imperdiet sollicitudin. Fusce porttitor mauris sed euismod aliquet. Aenean sed nibh tortor. Etiam pretium mauris sed ultricies tincidunt. Mauris imperdiet sem orci, et euismod ligula laoreet non. Suspendisse ut ex leo. Sed pellentesque libero non facilisis porta.";

  Widget fullScreenImage() => FullScreenWidget(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.asset(
            "assets/image1.jpg",
            fit: BoxFit.cover,
          ),
        ),
      );

  Widget fullScreenHeroWidget() => FullScreenWidget(
        child: Hero(
          tag: "customTag",
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.asset(
              "assets/image2.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
      );

  //if you don't want widget full screen then use center widget
  Widget smallImage() => FullScreenWidget(
        child: Center(
          child: Hero(
            tag: "smallImage",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget customBackgroundColor() => FullScreenWidget(
        backgroundColor: Colors.purple,
        child: Center(
          child: Hero(
            tag: "customBackground",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget nonTransparentWidget() => FullScreenWidget(
        backgroundColor: Colors.purple,
        backgroundIsTransparent: false,
        child: Center(
          child: Hero(
            tag: "nonTransparent",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget customWidget() => FullScreenWidget(
        child: SafeArea(
          child: Card(
            elevation: 4,
            child: Container(
              height: 350,
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Hero(
                    tag: "customWidget",
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.asset(
                        "assets/image3.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 16,
                  ),
                  Text(
                    'Lorem text',
                    style: TextStyle(
                        color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 16,
                  ),
                  Expanded(
                    child: Text(
                      lorem,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Full screen widget example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              GridView.count(
                primary: false,
                shrinkWrap: true,
                crossAxisCount: 2,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: fullScreenImage(),
                      ),
                      ListTile(
                        title: Text(
                          'Full screen image',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: fullScreenHeroWidget(),
                      ),
                      ListTile(
                        title: Text(
                          'Full screen image with hero',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: smallImage(),
                      ),
                      ListTile(
                        title: Text(
                          'Small image with hero',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: customBackgroundColor(),
                      ),
                      ListTile(
                        title: Text(
                          'Custom background',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: nonTransparentWidget(),
                      ),
                      ListTile(
                        title: Text(
                          'None transparent',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: customWidget(),
                  ),
                  ListTile(
                    title: Text(
                      'Custom Widget',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}