Question 76018 in Flutter Question posted in
The official Flutter documentation can be found here.

Raising Image Flutter Card

i’m new to flutter and i wanted to create simple design for menu app as shown in image below … i tried below code but it didn’t give same design, is there any way to achieve it?
Image Here

     MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Card over stack"),
    ),
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                color: Colors.lightBlueAccent),
            height: 100,
          ),
        ),
        Positioned(
          top: 60,
          right: 10,
          left: 10,
          child: Card(
            child: ListTile(
                leading: SizedBox(
                    height: 150.0,
                    width: 150.0, // fixed width and height
                    child: Image.asset("assets/images/test.png"))),
          ),
        ),
      ],
    ),
  ),
);
Tags:

2

Answers


  1. 0

    Wrap Card inside Material and give elevation of 1

    Material(
elevation: 1,//👈 This will help for the elevation
child: Card(
            child: ListTile(
                leading: SizedBox(
                    height: 150.0,
                    width: 150.0, // fixed width and height
                    child: Image.asset("assets/images/test.png"))),
          ),
);
    Login or Signup to reply.
  2. 0

    Try this:

        Scaffold(
      appBar: AppBar(
        title: Text("Card over stack"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 20,
              left: 40,
              right: 0,
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.lightBlueAccent,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.shade300,
                        blurRadius: 5,
                        spreadRadius: 2,
                        offset: const Offset(4, 4),
                      )
                    ]),
                height: 150,
                child: Padding(
              padding: const EdgeInsets.only(left: 75),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),//code any here
                ],
              ),
            ),
              ),
            ),
            Positioned(
              top: 0,
              child: Container(
                height: 150,
                width: 100,
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.shade200,
                      blurRadius: 5,
                      spreadRadius: 2,
                      offset: const Offset(-3, -3),
                    )
                  ],
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                ),
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                  child: Image.asset(
                    'assets/images/test.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

    This is my result:

    Screenshot 2023-03-01 at 14 23 43

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search