Question

我正在尝试将背景图像添加到我的Flutter应用中，因此我也经历了所有类似的问题。该应用程序m运行正常，但未显示该图像。

这是我的小部件代码：

<h1>Typewriter</h1>

<button onclick=" typeWriter()">Click me</button>
<p id="demo"></p>

该应用程序运行良好，并且堆栈上的第二个小部件（即listView）正常运行，但图像未显示。

有什么想法吗？

Answer 1

Scaffold不支持背景图片的任何概念。您可以做的就是给Scaffold提供透明的颜色并将其放在Container中，并使用decoration属性提取所需的背景图像。应用程序栏也是透明的。

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/logo.png"), fit: BoxFit.cover)),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            title: Text('My App'),
            centerTitle: true,
            leading: IconButton(
                icon: Icon(
                  Icons.list,
                  color: Colors.white,
                ),
                onPressed: () {}),
          ),
        ),
      ),
    );
  }

Answer 2

    return MaterialApp(
      title: "MoonLight",
      home: Container(
        decoration:new BoxDecoration(
            image:  new DecorationImage(
              image: new AssetImage("graphics/moon.jpg"),
              fit: BoxFit.cover,)
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
        ),
      ),
    ),

Answer 3

Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          image: DecorationImage(
              image: AssetImage("asset/images/image.png"),
              fit: BoxFit.cover)),
      child: Scaffold(
        backgroundColor: Colors.transparent,
      ),
    );
  }

使用此选项将不会使黑色具有透明背景。

Answer 4

使用BoxDecoration作为decoration的{{1}}属性：

Container

Answer 5

使用DecoratedBox：

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("your_asset"),
        fit: BoxFit.cover,
      ),
    ),
    child: //...,
  );
}

如何在Flutter应用中添加背景图片？

5 个答案: