How to show fullscreen image in flutter

Question

Is there any way to show fullscreen image ?

    var imagejadwal = new Image.network(
    "https://firebasestorage.googleapis.com/v0/b/c-smp-bruder.appspot.com/o/fotojadwal.jpg?alt=media&token=b35b74df-eb40-4978-8039-2f1ff2565a57",
    fit: BoxFit.cover
);
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
      child: imagejadwal
  ),
);

in that code, there's space around the image :/

Answer 1

Your problem is that Center will make the image to get it's preferred size instead of the full size. The correct approach would be instead to force the image to expand.

return new Scaffold(
  body: new Image.network(
    "https://cdn.pixabay.com/photo/2017/02/21/21/13/unicorn-2087450_1280.png",
    fit: BoxFit.cover,
    height: double.infinity,
    width: double.infinity,
    alignment: Alignment.center,
  ),
);

The alignment: Alignment.center is unnecessary. But since you used the Center widget, I tought it would be interesting to know how to customize it.

Answer 2

You can use MediaQuery class if you want to get the precious size of your device and use it to manage the size of your image, here's the examples:

return Container(
  color: Colors.white,
  child: Image.asset(
    'assets/$index.jpg',
    fit: BoxFit.fill,
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    alignment: Alignment.center,
  ),
);

Answer 3

Use the below code if height: double.infinity, width: double.infinity, doesn't work to u.

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => new _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 30),()=>Navigator.push(
      context, MaterialPageRoute(builder: (context)=>Login())));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //backgroundColor: Colors.white,
      body: Container(
        child: new Column(children: <Widget>[
         
          new Image.asset(
            'assets/image/splashScreen.png',
            fit: BoxFit.fill,
            // height: double.infinity,
            // width: double.infinity,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
            alignment: Alignment.center,
            repeat: ImageRepeat.noRepeat,
         
          ),
          
        ]),
      ),
    );
  }
}

Answer 4

Here is a View you wrap around your image widget

• Includes a click event which opens up a full screen view of the image

• Zoom and Pan image

• Null-safety

• Dark/Light background for PNGs

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  class ImageFullScreenWrapperWidget extends StatelessWidget {
    final Image child;
    final bool dark;
  
    ImageFullScreenWrapperWidget({
      required this.child,
      this.dark = true,
    });
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              opaque: false,
              barrierColor: dark ? Colors.black : Colors.white,
              pageBuilder: (BuildContext context, _, __) {
                return FullScreenPage(
                  child: child,
                  dark: dark,
                );
              },
            ),
          );
        },
        child: child,
      );
    }
  }
  
  class FullScreenPage extends StatefulWidget {
    FullScreenPage({
      required this.child,
      required this.dark,
    });
  
    final Image child;
    final bool dark;
  
    @override
    _FullScreenPageState createState() => _FullScreenPageState();
  }
  
  class _FullScreenPageState extends State<FullScreenPage> {
    @override
    void initState() {
      var brightness = widget.dark ? Brightness.light : Brightness.dark;
      var color = widget.dark ? Colors.black12 : Colors.white70;
  
      SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: color,
        statusBarColor: color,
        statusBarBrightness: brightness,
        statusBarIconBrightness: brightness,
        systemNavigationBarDividerColor: color,
        systemNavigationBarIconBrightness: brightness,
      ));
      super.initState();
    }
  
    @override
    void dispose() {
      SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        // Restore your settings here...
      ));
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: widget.dark ? Colors.black : Colors.white,
        body: Stack(
          children: [
            Stack(
              children: [
                AnimatedPositioned(
                  duration: Duration(milliseconds: 333),
                  curve: Curves.fastOutSlowIn,
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: InteractiveViewer(
                    panEnabled: true,
                    minScale: 0.5,
                    maxScale: 4,
                    child: widget.child,
                  ),
                ),
              ],
            ),
            SafeArea(
              child: Align(
                alignment: Alignment.topLeft,
                child: MaterialButton(
                  padding: const EdgeInsets.all(15),
                  elevation: 0,
                  child: Icon(
                    Icons.arrow_back,
                    color: widget.dark ? Colors.white : Colors.black,
                    size: 25,
                  ),
                  color: widget.dark ? Colors.black12 : Colors.white70,
                  highlightElevation: 0,
                  minWidth: double.minPositive,
                  height: double.minPositive,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(100),
                  ),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  

Example Code:

ImageFullScreenWrapperWidget(
  child: Image.file(file),
  dark: true,
)

Answer 5

For some reason, the solutions given in the answers here did not work for me. The below code worked for me.

body: Container(
        height: double.infinity,
        width: double.infinity,
        child: FittedBox(child: Image.asset('assets/thunderbackground.jpg'),
        fit: BoxFit.cover),

Answer 6

For Image from asset

new Image(
   image: AssetImage('images/test.jpg'),
    fit: BoxFit.cover,
    height: double.infinity,
    width: double.infinity,
    alignment: Alignment.center,
  ),

Answer 7

you could try wrapping image.network in a a container with infinite dimensions which takes the available size of its parent (meaning if you drop this container in lower half of screen it will fill the lower half of screen if you put this directly as the body of scaffold it will take the full screen)

Container(
  height: double.infinity,
  width: double.infinity,
  child: Image.network(
           backgroundImage1,
           fit: BoxFit.cover,
         )    
 );

Answer 8

Here is an example of a FadeInImage with another widget overlay using the double.infinity method as in the accepted answer.

class FullScreenImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //you do not need container here, STACK will do just fine if you'd like to 
    //simplify it more
    return Container(
      child: Stack(children: <Widget>[
        //in the stack, the background is first. using fit:BoxFit.cover will cover 
        //the parent container. Use double.infinity for height and width
        FadeInImage(
          placeholder: AssetImage("assets/images/blackdot.png"),
          image: AssetImage("assets/images/woods_lr_50.jpg"),
          fit: BoxFit.cover,
          height: double.infinity,
          width: double.infinity,
          //if you use a larger image, you can set where in the image you like most
          //width alignment.centerRight, bottomCenter, topRight, etc...
          alignment: Alignment.center,
        ),
        _HomepageWords(context),
      ]),
    );
  }
}

//example words and image to float over background
Widget _HomepageWords(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      InkWell(
        child: Padding(
          padding: EdgeInsets.all(30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.fromLTRB(0, 40, 0, 12),
                child: Image.asset(
                  "assets/images/Logo.png",
                  height: 90,
                  semanticLabel: "Logo",
                ),
              ),
              Text(
                "ORGANIZATION",
                style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                "DEPARTMENT",
                style: TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                "Disclaimer information...",
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
            ],
          ),
        ),
        onTap: () {
          //to another screen / page or action
        },
      ),
    ],
  );
}

Answer 9

This is another option:

return new DecoratedBox(
  decoration: new BoxDecoration(
    image: new DecorationImage(
      image: new AssetImage('images/lake.jpg'),
      fit: BoxFit.fill

    ),
  ),
);