Flutter：将图像填充到 body

Question

我正在做一个 flutter 项目。我加载了一张图片，我希望它填满 body。阅读文档后，我想到了这个：

void main() => runApp(MaterialApp(
  home : Scaffold(
      appBar: AppBar(
        title: Center(
           child: Text("I am rich"),
        ),
        backgroundColor: Colors.amberAccent,
      ),
      backgroundColor: Colors.purple,
      body: Image(
        fit: BoxFit.cover, 
        image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),
      ),
    )
  )
);

但是好像不行。请帮助

Answer 1

您可以使用 Image.network 而不是 Image 小部件，如 official document 中所述。或者，您可以将 height 属性添加到图像中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
       body: Image(
        height: double.infinity,
        fit: BoxFit.cover,
        image: NetworkImage(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU',
        ),
      ),
      ),
    );
  }
}

Answer 2

为此使用 MediaQuery，它将根据 phone

的屏幕尺寸设置图像

body: Center(
        child: Image.network(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD- hdba-          3Zk_ttQQw&usqp=CAU',
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          fit: BoxFit.fill,
        ),
      ),

Answer 3

您可以复制粘贴运行下面的完整代码
可以直接将width和height设置为window.physicalSize.width和window.physicalSize.height
并且可以使用BoxFit.fill，效果见下

Image(
    fit: BoxFit.fill,
    width: window.physicalSize.width,
    height: window.physicalSize.height,

工作演示

完整代码

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("I am rich"),
        ),
        backgroundColor: Colors.amberAccent,
      ),
      backgroundColor: Colors.purple,
      body: Image(
        fit: BoxFit.fill,
        width: window.physicalSize.width,
        height: window.physicalSize.height,
        image: NetworkImage(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),
      ),
    )));

Flutter：将图像填充到 body

Flutter : Fill the image over the body

flutter

scaffold