flutter: image overlap card - flutter

Question

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?
enter image description here
import 'package:flutter/material.dart';
main() => runApp(test());
class test extends StatefulWidget {
#override
_testState createState() => _testState();
}
class _testState extends State<test> {
#override
Widget build(BuildContext context) {
return 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"))),
),
),
],
),
),
);
}
}

Answer 1

Stack is the rignt choice, check screenshot below:
Full working code:
import 'package:flutter/material.dart';
main() => runApp(const DemoApp());
class DemoApp extends StatefulWidget {
const DemoApp({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return _DemoState();
}
}
class _DemoState extends State<DemoApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
color: Colors.white,
),
Positioned(
bottom: 150,
// replace with your Card here
child: Card(
child: Container(
width: 250,
height: 300,
color: Colors.blue,
),
),
),
Positioned(
bottom: 320,
// replace with your image here
child: Container(
width: 200,
height: 280,
color: Colors.pink,
),
),
],
),
),
);
}
}

Answer 2

Here is a solution for this. You can also refer to the following link to learn more.
https://www.flutterbeads.com/flutter-position-widget-in-stack/
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
color: Colors.redAccent,
//add your gradiant here
),
child: SafeArea(
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: [
Positioned(
top: 180,
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
height: 500,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(7),
),
),
),
Positioned(
top: 20,
child: Container(
width: MediaQuery.of(context).size.width * 0.7,
height: 200,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(7),
),
//add your image here
//child: Center(child: Image.asset(name)),
),
),
],
),
),
),
);
}
}