how set a background color or image in app?

Question

I would like know how we can set a background color (gradient or not) or image when we have a big list of widget on app page. Because we need display all the widgets over the container which display the background no ? For example, we have mobile page with futurebuilder and a lot of widgets displayed in column widgets Thanks

My code :

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

this may help https://stackoverflow.com/questions/43822671/how-do-i-set-the-background-color-of-my-main-screen-in-flutter — smitty_werbenjagermanjensen, Jun 09 '20 at 23:42
it helps yes :) But if i want to set an image in background of all scaffold ? And if i want to set a gradient ? — axis-medias, Jun 10 '20 at 00:23

xion · Accepted Answer · 2020-06-12T01:58:16.100

0

Use stack instead. more info: 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(),
    ]);

edited Jun 12 '20 at 01:58

answered Jun 10 '20 at 00:53

xion

1,209
11
17

Why safearea ? And too so you set stack and Under you put first the background in container and Under that all the widgets and it will works ??? – axis-medias Jun 11 '20 at 23:26
Updated my answer to avoid confusion, indeed SafeArea is not needed to showcase for this answer. And too so you set stack and Under you put first the background in container and Under that all the widgets and it will works : yes – xion Jun 12 '20 at 01:59
i have updated the code with stack but it doesn't work like i want. I want a background and after display all the widgets normally, you can try it doesn't display the second container and the third is displayed incorrectly – axis-medias Jun 14 '20 at 00:11
Stack is correct. In Scaffold we need to set backgroundColor: Colors.transparent, for working good – axis-medias Jun 14 '20 at 21:42

how set a background color or image in app?

1 Answers1