如何在颤动中设置背景图像？

Posted 2023-02-23

【中文标题】如何在颤动中设置背景图像？

【英文标题】：How to set background image in flutter?

【发布时间】：2020-08-17 22:24:44

【问题描述】：

我最近开始学习flutter，我想添加背景图片，我想在上面添加两个平面按钮，但是我做不到，我在代码中添加了背景图片，但它不起作用我不明白这个问题。谁能帮帮我？

    void main() 
      return runApp(
        MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              title: Text('Ani & genny',
                  style: TextStyle(
                    fontFamily: 'Pacifico',
                    color: Colors.white,
                  )),
              backgroundColor: Colors.red,
            ),
            body: MyApp(),
          ),
        ),
      );
    

    class MyApp extends StatelessWidget 
      void navigateToPage() 
        print('Button pressed!!!!');
      

      @override
      Widget build(BuildContext context) 
        return Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 50,
              ),
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                image: AssetImage("images/Ani.png"),
                fit: BoxFit.cover

                ),
                ),

              ),
              FlatButton(
                  child: Image.asset(
                    'images/li.png',
                    height: 120,
                    width: 120,
                  ),
                  onPressed: () 
                    navigateToPage();
                  ),
                ),
        ],
      ),
    );
  

【问题讨论】：

嘿@Kalyani Deshmukh，上传你所做的代码，以便我可以在需要的地方提供帮助

使用 Stack 小部件。 Here 是一些细节。

我在@RandomGuru 上面上传了代码

【参考方案1】：

首先用容器敲击你的中心。

Container(
  decoration:BoxDecoration(
   image:DecorationImage(
     fit:BoxFit.fill
     image: AssetImage("images/Ani.png"),
 )
    )
  child:Center(
  )
)

BoxFit.fill 将使图像完全覆盖容器

【参考方案2】：

这是在图像上放置按钮的示例代码。您可以使用 Positioned 小部件放置在您需要的任何位置。

@override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[
           Image.network(
              'https://picsum.photos/250?image=9',
           ),
           FlatButton(
              child: Text("Submit"),
              onPressed: () 
                  navigateToPage();
               ),
        ],
     ),
    );
  

您可以在 codepen 上运行此代码 here。