如何在颤动中显示全屏图像答案

【问题标题】：How to show fullscreen image in flutter如何在颤动中显示全屏图像
【发布时间】：2018-02-10 00:41:05
【问题描述】：

有什么办法可以全屏显示？

    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
  ),
);

在该代码中，图像周围有空间：/

【问题讨论】：

就return Image.asset('assets/images/background.png')

标签： dart flutter

【解决方案1】：

您的问题是Center 会使图像获得首选尺寸而不是完整尺寸。正确的做法是强制图片展开。

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,
  ),
);

alignment: Alignment.center 是不必要的。但是由于您使用了 Center 小部件，我认为知道如何自定义它会很有趣。

【讨论】：

我不知道你们会发生什么。但这就是我使用代码时发生的情况： ======== 渲染库捕获的异常 ========================== =========================== 在paint() 期间抛出以下UnsupportedError：不支持的操作：Infinity 或NaN toInt

【解决方案2】：

这是您围绕图像小部件的视图

包括一个打开图像全屏视图的点击事件
缩放和平移图像
空安全

PNG 的深色/浅色背景

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(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

示例代码：

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

【讨论】：

【解决方案3】：

如果您想获得设备的宝贵尺寸并使用它来管理图像的大小，可以使用MediaQuery 类，示例如下：

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,
  ),
);

【讨论】：

【解决方案4】：

对于来自资产的图像

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

【讨论】：

这只是this answer的一个副本，你用的不是网络，而是资产。

【解决方案5】：

这是另一种选择：

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

    ),
  ),
);

【讨论】：

【解决方案6】：

由于某种原因，此处答案中给出的解决方案对我不起作用。下面的代码对我有用。

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

【讨论】：

【解决方案7】：

您可以尝试将 image.network 包装在一个具有无限尺寸的容器中，该容器采用其父级的可用大小（这意味着如果您将此容器放在屏幕的下半部分，如果您直接将其放置为，它将填满屏幕的下半部分脚手架的主体将占据全屏）

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

【讨论】：

【解决方案8】：

这是一个 FadeInImage 示例，其中另一个小部件覆盖使用 double.infinity 方法，如已接受的答案。

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
        },
      ),
    ],
  );
}

【讨论】：

【解决方案9】：

如果height: double.infinity, width: double.infinity, 对你不起作用，请使用以下代码。


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,
         
          ),
          
        ]),
      ),
    );
  }
}

【讨论】：