CODEWITHSUNDEEP
flutterflutter-layout
Jordanscff
Jordanscff

Reputation: 13

How do you add a card in flutter?

I am trying to add a Card in flutter. I have a piece of code below which has a Scaffold -> Container -> Container. This contains a gradient background color. When I try to add a Card, the gradient background color either disappears, or is limited to a small container at the top of the page.

Where do I add in a Card so that I can have a full screen background gradient color and the card is a small card at the top of the screen?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Container(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromARGB(255, 25, 178, 238),
                  Color.fromARGB(255, 21, 236, 229)
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 325

Answers (1)

DJafari
DJafari

Reputation: 13545

DEMO

Scaffold(
  body: Stack(
    children: [
      Positioned.fill(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color.fromARGB(255, 25, 178, 238),
                Color.fromARGB(255, 21, 236, 229)
              ],
            ),
          ),
        ),
      ),
      Positioned(
        top: 50,
        right: 16,
        left: 16,
        child: Card(
          child: SizedBox(
            height: 100,
          ),
        ),
      )
    ],
  ),
)

Upvotes: 1

Related Questions