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