How to set background colour to cardview flutter

Question

I try to make login page and I put all text filed in cardview. To this point I don't have any problem but now I try to make background to cardview. Like this image:

As you can see in this image there are background blue I want to make like it in my code.If anyone know the solution help me.I'm sorry. may be the question repeated, but I could not solve it despite the long time.

@override
  Widget build(BuildContext context) {

    return Scaffold(
        body: SingleChildScrollView(
            padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
        child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(2.0),
            ),
            elevation: 2,
           // margin: EdgeInsets.all(19),
            child: Center(
              child: Column(
                children: <Widget>[
                  Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Text('User Login Form',
                          style: TextStyle(fontSize: 21))),
                  Divider(),

               Container(
                 margin: EdgeInsets.all(20),
                   child: TextField(
                controller: emailController,
                onChanged: (value) {
                  _myPreferences.user = value;
                  _myPreferences.commit();
                },
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'User Name',
                ),
              )
            ),
                  Container(
                      margin: EdgeInsets.all(20),
                      child: TextField(
                        controller: passwordController,
                        onChanged: (value) {
                          _myPreferences.password = value;
                          _myPreferences.commit();
                        },
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'User password',
                        ),
                      )
                  ),

                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Padding(
                          padding: const EdgeInsets.all(2.0),),
                     // Divider(),

                      RaisedButton(
                        onPressed: userLogin,
                        color: Colors.amberAccent,
                        textColor: Colors.white,
                        padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
                        child: Text('Click Here To Login'),

                      ),
                      Padding(
                        padding: const EdgeInsets.all(5.0),),
                    //  Divider(),
                      FlatButton(
                        textColor: Colors.black,
                        padding: EdgeInsets.fromLTRB(100, 18, 100, 18),
                        onPressed: () {
                          Navigator.push(context, MaterialPageRoute(builder: (context) => RegisterUser()
                          ),);
                        },
                        child: Text("New User click here",
                        ),
                      ),


                    ],
                  ),
                  Visibility(
                      visible: visible,
                      child: Container(
                          margin: EdgeInsets.only(bottom: 30),
                          child: CircularProgressIndicator()
                      )
                  ),
                ],
              ),
            )
    )
        )
    );
  }

Answer 1

Assuming that by CardView you mean the Card Widget.

Card has a property called color that you can use to set its background color.

Card(
    color: Colors.blue,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(2.0),
    ),
    elevation: 2,
    child: ...
);

If you want the background to be as the image, then the color is not in the Card but rather the Scaffold itself. So, what you could add a Stack as the main widget, then add a Column with 2 blocks (one colored blue) and another one not colored, and then next add your card.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Flexible(
                flex: 1,
                child: Container(color: Colors.blue),
              ),
              Flexible(
                flex: 2,
                child: Container(),
              )
            ],
          ),
          SingleChildScrollView(
            padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 180.0),
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
              ),
              elevation: 2,
              // margin: EdgeInsets.all(19),
              child:...
          ),
      ],
    );
}

Answer 2

You can try this, just copy and paste the below code:

 Widget build(BuildContext context) {
return SafeArea(
  child: Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.width*1,
          width: double.infinity,
          color: Colors.blue,
        ),
        Card(

          margin: EdgeInsets.only(top: MediaQuery.of(context).size.width*0.8, left: 20, right: 20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 20, left: 20, right: 20),
                child: TextFormField(
                  keyboardType: TextInputType.visiblePassword,
                  decoration: InputDecoration(
                      hintText: 'Email',
                      hintStyle: TextStyle(
                        fontFamily: "Poppins",
                        fontSize: 16,
                        color: Colors.cyan,
                      )),
                ),
              ),

              Container(
                margin: EdgeInsets.only(bottom: 40, left: 20, right: 20),
                child: TextFormField(
                  keyboardType: TextInputType.visiblePassword,
                  decoration: InputDecoration(
                      hintText: 'Email',
                      hintStyle: TextStyle(
                        fontFamily: "Poppins",
                        fontSize: 16,
                        color: Colors.cyan,
                      )),
                ),
              ),
            ],
          ),
        ),

        Container(
          margin: EdgeInsets.only(top: MediaQuery.of(context).size.width*1.2, left: 25, right: 25),
          width: MediaQuery.of(context).size.width,
          height: 45,
          decoration: BoxDecoration(
            color: Colors.red,
              border: Border.all(
                color: Colors.red,
              ),
              borderRadius: BorderRadius.all(Radius.circular(20))
          ),
            child: Text(
             'Login',
              style: TextStyle(
                color: Colors.white,
                fontFamily: "Poppins",
                fontSize: 20,
              ),
              textAlign: TextAlign.center,
            ),
        ),
      ],
    ),
  ),
);

Answer 3

You can try this...

          Card(
             color: Colors.blue,
             shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(2.0),
            ),

But if you want to change entire background you can wrap the body with Center and give color with the same way..