在颤动时显示全屏图像

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

你的问题是,这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小部件,那么我知道如何定制它会很有趣.

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

Answer 3

这是另一种选择:

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

    ),
  ),
);

Answer 4

对于来自资产的图像

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