Flutter SDK设置背景图像

Question

我正在尝试为主页设置背景图像.我从屏幕的开始处获取图像位置并填充宽度而不是高度.我在代码中遗漏了什么吗？是否有颤振的图像标准？图像是否根据每部手机的屏幕分辨率进行缩放？

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      body: new Container(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            new Image.asset("assets/images/bulb.jpg") 
          ]
        )
      )
    );
  }
}

Answer 1

我不知道我理解你的问题,但如果你想要的形象充满你可以使用整个屏幕DecorationImage搭配合体的BoxFit.cover.

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

对于第二个问题,这里有一个指向如何将依赖于解决方案的资产图像嵌入到您的应用程序中的文档的链接.

Answer 2

如果您使用a Container作为其主体,则Scaffold其大小将相应于其子项的大小,并且当您尝试将背景图像添加到应用程序时,通常不是您想要的.

看看这个问题,@ collin-jackson也建议使用Stack而不是Container作为它的身体,Scaffold它肯定会做你想要实现的.

这就是我的代码的样子

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Hello background"),
        )
      ],
    )
  );
}

Answer 3

根据需要，可以采用以下任意一种方式

1. 横跨应用栏的背景图像
2. 背景图像未跨越应用程序栏。

横跨应用栏的背景图像

  Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      elevation: 0,
      title: const Text(
        "Home Page",
        style: TextStyle(color: Colors.white),
      ),
      backgroundColor: Colors.transparent,
    ),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: const BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                  'https://wallpaperaccess.com/full/2440003.jpg'))
          child: < Your Widgets go here >

      ),
    ));

背景图像未跨越应用栏

   Scaffold(
    appBar: AppBar(
      elevation: 0,
      title: const Text(
        "Home Page",
        style: TextStyle(color: Colors.black),
      ),
      backgroundColor: Colors.transparent,
    ),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: const BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                  'https://wallpaperaccess.com/full/2440003.jpg'))
          child: < Your Widgets go here >

      ),
    ));

额外的 ：

要仅将背景图像添加到应用程序栏中，请参阅此答案

Answer 4

我能够通过将 a放在下面并在第一个“图层”中设置 a并使用背景图像集和属性来在Scaffold（甚至它是AppBar）下方应用背景。ScaffoldStackContainerfit: BoxFit.cover

theScaffold和AppBar都必须backgroundColor设置为 asColor.transparent并且elevationofAppBar必须为 0（零）。

瞧！现在您在整个 Scaffold 和 AppBar 下方有一个漂亮的背景！:)

import 'package:flutter/material.dart';
import 'package:mynamespace/ui/shared/colors.dart';
import 'package:mynamespace/ui/shared/textstyle.dart';
import 'package:mynamespace/ui/shared/ui_helpers.dart';
import 'package:mynamespace/ui/widgets/custom_text_form_field_widget.dart';

class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack( // <-- STACK AS THE SCAFFOLD PARENT
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"), // <-- BACKGROUND IMAGE
              fit: BoxFit.cover,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent, // <-- SCAFFOLD WITH TRANSPARENT BG
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent, // <-- APPBAR WITH TRANSPARENT BG
            elevation: 0, // <-- ELEVATION ZEROED
          ),
          body: Padding(
            padding: EdgeInsets.all(spaceXS),
            child: Column(
              children: [
                CustomTextFormFieldWidget(labelText: 'Email', hintText: 'Type your Email'),
                UIHelper.verticalSpaceSM,
                SizedBox(
                  width: double.maxFinite,
                  child: RaisedButton(
                    color: regularCyan,
                    child: Text('Finish Registration', style: TextStyle(color: white)),
                    onPressed: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Answer 5

我们可以使用 Container 并将其高度标记为无穷大

body: Container(
      height: double.infinity,
      width: double.infinity,
      child: FittedBox(
        fit: BoxFit.cover,
        child: Image.network(
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
        ),
      ),
    ));

输出：

Answer 6

body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),
);

Answer 7

我知道这个问题已经有很多答案了，但是这个解决方案在背景图像周围有一个颜色渐变，我想你会喜欢它

import 'package:flutter/material.dart';

class BackgroundImageExample extends StatelessWidget {
  const BackgroundImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        backgroudImage(),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: SafeArea(
            child: Column(
              children: [
                // your body content here
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget backgroudImage() {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.black, Colors.black12],
        begin: Alignment.bottomCenter,
        end: Alignment.center,
      ).createShader(bounds),
      blendMode: BlendMode.darken,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('your image here'), /// change this to your  image directory 
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
          ),
        ),
      ),
    );
  }
}

Answer 8

以下是实现这一目标的方法。第一个示例是资产图像，第二个示例是网络图像。

本地图片：

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  ),
  child: 
)

网络图片：

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage("https://picsum.photos/id/237/200/300"), 
        fit: BoxFit.cover),
  ),
  child:
)

Answer 9

您可以Stack用来使图像拉伸到全屏。

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

注意：如果使用Scaffold，则可以选择根据需要将其Stack放入Scaffold或不放入AppBar。

Answer 10

您可以使用DecoratedBox。

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

输出：

Answer 11

decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("images/background.png"),
        fit: BoxFit.cover
      ),
    ),

这也适用于容器内。

Answer 12

其他答案都很棒。这是可以完成的另一种方式。

1. 在这里，我用来SizedBox.expand()填充可用空间并为其子级（容器）传递严格的约束。
2. BoxFit.cover枚举缩放图像并覆盖整个屏幕

 Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand( // -> 01
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,    // -> 02
            ),
          ),
        ),
      ),
    );
  }