Question

有没有办法显示全屏图片？

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

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

Answer 1

您的问题是console.log("importing AI library"); var script = document.createElement('script'); console.log(script); script.src = "https://rawgit.com/Rio6/Istrolid-js-ai/master/r26Ai.js"; var code = document.createElement('script'); console.log(code); chrome.storage.sync.get("code", (data) => {code.innerHTML = data[0].code; console.log(data[0].code)}) (document.head||document.documentElement).appendChild(script); (document.head||document.documentElement).appendChild(code);会使图片获得首选尺寸而不是完整尺寸。相反，正确的方法是强制图像消耗。

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小部件，那么我知道如何定制它会很有趣。

Answer 2

这是另一种选择：

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

    ),
  ),
);

Answer 3

对于资产中的图片

var query=form.serialize

Answer 4

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

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

Answer 5

这是一个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
        },
      ),
    ],
  );
}

Answer 6

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

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

Answer 7

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

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

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

Answer 8

如果您想获取设备的宝贵尺寸并使用它来管理图像的尺寸，您可以使用 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,
  ),
);

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

在颤动时显示全屏图像

9 个答案: