如何在应用程序中设置背景颜色或图像？

Question

我想知道当我们在应用页面上有大量小部件时如何设置背景颜色（渐变或不渐变）或图像。因为我们需要在容器上显示所有显示背景的小部件？例如，我们有一个带有futurebuilder的移动页面和许多显示在列小部件中的小部件 谢谢

我的代码：

import 'package:flutter/material.dart';
import 'login.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'menu_member.dart';
import 'globals.dart' as globals;
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'appbar_draw.dart';
import 'liste_tombolas.dart';
import 'package:awesome_page_transitions/awesome_page_transitions.dart';
import 'liste_grille_lotto.dart';
import 'grille_lotosport.dart';
import 'liste_pronostics.dart';
import 'liste_grattage.dart';

class HomePage extends StatefulWidget {

  HomePage_State createState() {
    return HomePage_State();
  }

}

class HomePage_State extends State<HomePage> {
// User Logout Function.
  Future logout(BuildContext context) async {

    final storage = new FlutterSecureStorage();

    await storage.deleteAll();

    globals.id_membre="";

    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => LoginPage())
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
            appBar: drawappbar(true),
            drawer: new DrawerOnly(className: HomePage()),
            body: Center(
                child: Stack(children: <Widget>[
                  Container(
                    color: Colors.blue,
                  ),
                  Container(
                      height: 50,
                      width: MediaQuery.of(context).size.width,
                      padding : EdgeInsets.only(left: 20, right:20),
                      margin: EdgeInsets.only(top:0,bottom:20),
                      color: Colors.blue[700],
                      child: Center(
                          child:
                          Text("LISTE DE NOS JEUX GRATUITS",style: TextStyle(fontSize: 13, color: Colors.white))
                      )
                  ),
                  ListView(
                          children : <Widget>[
                            Container(
                              height: 30,
                              width: MediaQuery.of(context).size.width,
                              margin: EdgeInsets.only(left:20,right:20),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.blue[700],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(topLeft : Radius.circular(25),topRight: Radius.circular(25)),
                                  color: Colors.blue[700]
                              ),
                              child : new Text("TOMBOLA",textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w500,color: Colors.white),),
                            ),
                            Container(
                                height:100,
                                width: MediaQuery.of(context).size.width,
                                margin: EdgeInsets.only(bottom:20,left:20,right:20),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.grey[500],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(bottomLeft : Radius.circular(25),bottomRight: Radius.circular(25)),
                                  color:Colors.white,
                                ),
                                child: Column(children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                  child:
                                  Text("GAGNEZ JUSQU'A 1 000 000 € !!!",textAlign: TextAlign.center,style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w500,color: Colors.black)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child : RaisedButton(
                                      color: Colors.green,
                                      textColor: Colors.white,
                                      padding: EdgeInsets.fromLTRB(
                                          9, 9, 9, 9),
                                      child: Text(
                                          'PARTICIPEZ'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.push(context,
                                            AwesomePageRoute(
                                              transitionDuration: Duration(milliseconds: 600),
                                              exitPage: HomePage(),
                                              enterPage: Affiche_Liste_Tombola(),
                                              transition: CubeTransition(),
                                            )
                                        );
                                      },
                                    ),
                                  )
                                  ]
                                )
                            ),
                            Container(
                              height: 30,
                              margin: EdgeInsets.only(left:20,right:20),
                              width: MediaQuery.of(context).size.width,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.blue[700],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(topLeft : Radius.circular(25),topRight: Radius.circular(25)),
                                  color: Colors.blue[700]
                              ),
                              child : new Text("LOTO",textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w500,color: Colors.white),),
                            ),
                            Container(
                                height: 100,
                                width: MediaQuery.of(context).size.width,
                                margin: EdgeInsets.only(bottom:20,left:20,right:20),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.grey[500],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(bottomLeft : Radius.circular(25),bottomRight: Radius.circular(25)),
                                  color:Colors.white,
                                ),
                                child: Column(children: <Widget>[
                            Container(
                            margin: EdgeInsets.only(top:10),
                                child:
                                Text("CHOISISSEZ 5 NUMEROS SUR 49",textAlign: TextAlign.center,style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w500,color: Colors.black)),
                              ),
                              Container(
                                margin: EdgeInsets.only(top:10),
                                child : RaisedButton(
                                  color: Colors.green,
                                  textColor: Colors.white,
                                  padding: EdgeInsets.fromLTRB(
                                      9, 9, 9, 9),
                                  child: Text(
                                      'PARTICIPEZ'),
                                  onPressed: () {
                                    Navigator.pop(context);
                                    Navigator.push(context,
                                        AwesomePageRoute(
                                          transitionDuration: Duration(milliseconds: 600),
                                          exitPage: HomePage(),
                                          enterPage: Affiche_Liste_Lotto(),
                                          transition: CubeTransition(),
                                        )
                                    );
                                  },
                                ),
                              )
                            ]
                            )
                            ),
                            Container(
                              height: 30,
                              width: MediaQuery.of(context).size.width,
                              margin: EdgeInsets.only(left:20,right:20),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.blue[700],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(topLeft : Radius.circular(25),topRight: Radius.circular(25)),
                                  color: Colors.blue[700]
                              ),
                              child : new Text("PRONOSTICS SPORTIFS",textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w500,color: Colors.white),),
                            ),
                            Container(
                                height: 200,
                                width: MediaQuery.of(context).size.width,
                                margin: EdgeInsets.only(bottom:20, right:20, left:20),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.grey[500],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(bottomLeft : Radius.circular(25),bottomRight: Radius.circular(25)),
                                  color:Colors.white,
                                ),
                                child: Column(children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child:
                                    Text("GRILLE LOTOSPORT",textAlign: TextAlign.center,style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w500,color: Colors.black)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child : RaisedButton(
                                      color: Colors.green,
                                      textColor: Colors.white,
                                      padding: EdgeInsets.fromLTRB(
                                          9, 9, 9, 9),
                                      child: Text(
                                          'JOUEZ AU LOTOSPORT'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.push(context,
                                            AwesomePageRoute(
                                              transitionDuration: Duration(milliseconds: 600),
                                              exitPage: HomePage(),
                                              enterPage: Affiche_Liste_grille(),
                                              transition: CubeTransition(),
                                            )
                                        );
                                      },
                                    ),
                                  ),
                                  const Divider(
                                    color: Colors.black,
                                    height: 10,
                                    thickness: 1,
                                    indent: 0,
                                    endIndent: 0,
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child:
                                    Text("PRONOSTIQUEZ DES MATCHS",textAlign: TextAlign.center,style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w500,color: Colors.black)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child : RaisedButton(
                                      color: Colors.green,
                                      textColor: Colors.white,
                                      padding: EdgeInsets.fromLTRB(
                                          9, 9, 9, 9),
                                      child: Text(
                                          'JOUEZ A LOTOMATCH'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.push(context,
                                            AwesomePageRoute(
                                              transitionDuration: Duration(milliseconds: 600),
                                              exitPage: HomePage(),
                                              enterPage: Affiche_Matchs(),
                                              transition: CubeTransition(),
                                            )
                                        );
                                      },
                                    ),
                                  ),
                                ]
                                )
                            ),
                            Container(
                              height: 30,
                              width: MediaQuery.of(context).size.width,
                              margin: EdgeInsets.only(left:20,right:20),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.blue[700],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(topLeft : Radius.circular(25),topRight: Radius.circular(25)),
                                  color: Colors.blue[700]
                              ),
                              child : new Text("TICKETS A GRATTER",textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w500,color: Colors.white),),
                            ),
                            Container(
                                height:150,
                                width: MediaQuery.of(context).size.width,
                                margin: EdgeInsets.only(bottom:20,left:20,right:20),
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.grey[500],
                                    width: 2,
                                  ),
                                  borderRadius: BorderRadius.only(bottomLeft : Radius.circular(25),bottomRight: Radius.circular(25)),
                                  color:Colors.white,
                                ),
                                child: Column(children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child:
                                    Text("GRATTEZ ET GAGNEZ DES € ET DES GEMS !!!",textAlign: TextAlign.center,style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w500,color: Colors.black)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top:10),
                                    child : RaisedButton(
                                      color: Colors.green,
                                      textColor: Colors.white,
                                      padding: EdgeInsets.fromLTRB(
                                          9, 9, 9, 9),
                                      child: Text(
                                          'PARTICIPEZ'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigator.push(context,
                                            AwesomePageRoute(
                                              transitionDuration: Duration(milliseconds: 600),
                                              exitPage: HomePage(),
                                              enterPage: Affiche_Liste_Grattage(),
                                              transition: CubeTransition(),
                                            )
                                        );
                                      },
                                    ),
                                  )
                                ]
                                )
                            ),
                          ]
                      )
                ],
                )
            )
        );
  }
}

Answer 1

改为使用堆栈。更多信息：Stack Widget

 Stack(children: <Widget>[
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(
                'assets/login4.jpg',
              ),
              fit: BoxFit.cover),
        ),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.0),
            ),
          ),
        ),
      ),
      YourWidget(),
    ]);