我正在为主页设置背景图片。我正在从屏幕开始获取图像位置,并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?

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

当前回答

我可以在脚手架下面应用背景(甚至是AppBar),把脚手架放在堆栈下面,并在第一个“层”中设置一个容器,背景图像设置和适合:BoxFit。封面的财产。

脚手架和AppBar都必须将backgroundColor设置为Color。透明的,AppBar的海拔必须为0(零)。

瞧!现在你在整个脚手架和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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

其他回答

你可以使用FractionallySizedBox

有时decoratedBox不能覆盖全屏大小。 我们可以通过使用FractionallySizedBox Widget包装它来修复它。 在这个小部件中,我们给出了宽度因子和高度因子。

宽度因子显示[FractionallySizedBox]小部件应该占应用程序宽度的_____百分比。

高度因子显示[FractionallySizedBox]小部件应该占应用程序高度的_____百分比。

示例:hightfactor = 0.3表示应用高度的30%。Widthfactor = 0.4表示应用宽度的40%。

        Hence, for full screen set heightfactor = 1.0 and widthfactor = 1.0

提示:FractionallySizedBox与堆栈小部件配合得很好。所以你可以很容易地在堆栈小部件的背景图像上添加按钮,头像,文本,而在行和列中你不能这样做。

要了解更多信息,请查看该项目的存储库github存储库链接

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Container(
                child: FractionallySizedBox(
                  heightFactor: 1.0,
                  widthFactor: 1.0,
                  //for full screen set heightFactor: 1.0,widthFactor: 1.0,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/1.jpg"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}



输出:

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

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

其他答案都很棒。这是另一种方法。

这里我使用sizebox .expand()来填充可用空间,并将严格的约束传递给它的子代(Container)。 BoxFit。cover enum缩放图像并覆盖整个屏幕

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

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/bgmain.jpg'),
            //fit: BoxFit.cover 
            fit: BoxFit.fill),
      ),
      child: Column(
        children: 
        [
          //
        ],
      ),
    )));
  }

根据您的需求,可以采用以下两种方式:

背景图像跨越应用程序栏

  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 >

      ),
    ));

额外的:

要只向appBar添加背景图像,请参考此答案