how can we place image outside the parent container in flutter - flutter

Question

I am trying to implement this kind of UI. But i can't find a way to place image outside the container.(Check the image )

Answer 1

Hey you can use Stack widget to overlap from card, use Positioned to align your widget at particular position.
For - Eg.
Stack(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: MediaQuery.of(context).size.width*0.6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children:const [
Text("Title Text "),
Text("Body text"),
],
),
),
const Spacer(),
],
),
),
),
),
Positioned(
left: MediaQuery.of(context).size.width*0.65,
top: -10,
bottom: 15,
child: Image.asset("assets/sample.png", fit:BoxFit.fill,), // replace your image with Image.assets here
),
Positioned(
right: 20,
top: 0,
bottom: 0,
child: IconButton(onPressed: (){}, icon: const Icon(Icons.add_circle),),
),
],
)
For more details about Stack
Output will come like this -

Answer 2

You can use Stack widget first put Image widget inside it and then Container widget
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
alignment : Alignment.center,
children :[
Image.network('https://image.shutterstock.com/image-vector/sample-stamp-rubber-style-red-260nw-1811246308.jpg'),
Container( child :const Text('test',style : TextStyle(color: Colors.black ,fontSize: 20.00))),
],
);
}
}