我想知道当我们在应用页面上有大量小部件时如何设置背景颜色（是否为渐变色）或图像。因为我们需要显示容器上所有显示背景no的小部件。例如，我们有一个带有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(),
)
);
},
),
)
]
)
),
]
)
],
)
)
);
}
}
答案 0 :(得分：0)
改为使用堆栈。更多信息：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(),
]);