如何將背景顏色設置為cardview flutter

Question

我嘗試制作登錄頁面，並將所有文本歸檔在cardview中。 到目前為止，我沒有任何問題，但現在我嘗試為 cardview 制作背景。 像這張圖片：

正如您在這張圖片中看到的那樣，我想在我的代碼中使用藍色背景。如果有人知道解決方案，請幫助我。對不起。 可能是重復的問題，但盡管時間很長，我還是無法解決。

@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

你可以試試這個...

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

但是如果你想改變整個背景，你可以用 Center 包裹身體並用同樣的方式給顏色..

Answer 2

您可以試試這個，只需復制並粘貼以下代碼：

 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

假設 CardView 是指 Card Widget。

Card 有一個名為color的屬性，您可以使用它來設置其背景顏色。

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

如果您希望背景作為圖像，則顏色不在卡片中，而是在腳手架本身。 因此，您可以添加一個 Stack 作為主要小部件，然后添加一個包含 2 個塊（一個為藍色）和另一個不着色的 Column，然后添加您的卡片。

@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:...
          ),
      ],
    );
}