在颤动中添加背景图像

Question

我正在尝试在Flutter中创建附加的屏幕。如何添加背景图片并在特定位置添加文本（忽略白色文本框）。

感谢您的帮助

Answer 1

要添加背景图像，您必须使用 DecorationImage 类并在 BoxDecoration内部。

 class Home extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Scaffold(
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage("assets/image1.jpg"), fit: BoxFit.cover),
            ),
            child: Center(child: Text('Welcome To',style: TextStyle(
              color: Colors.white,
              fontSize: 40.0
            ),)),
            )
        );
      }
    }

Answer 2

尝试一下；

Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage("assets/splash.png"),
                fit: BoxFit.cover
            )
        ),
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.only(bottom: 150.0),
        child: JumpingDotsProgressIndicator(
          fontSize: 50.0,
          numberOfDots: 4,
          dotSpacing: 2.0,
          color: Colors.white,
          milliseconds: 400,
        ),
      ),

    ],
  ),
);
}

您可以自定义子部分。

Answer 3

还要确保创建资产目录并将图像资产添加到其中，然后将update your pubspec.yaml文件添加到“ flutter：”下，如下所示：

flutter:
  assets:
    - assets/splash.png

splash.png是您的图片资源。或者只是使用：

flutter:
  assets:
    - assets/

如果需要整个目录。如果没有，您将只渲染一个空白容器。