flutterandroid-studiodartcardraise

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

Solution

  • 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