Border (Flutter) - flutter

Question

How to put the widgets inside the mobile so that the picture is like a border, I want to put the widget inside the mobile frame, how can I do that?
Code:
Container(
decoration: BoxDecoration(
border: MobileImage(),
),
child: Widgets(),
),

Answer 1

You can try this code & I have added a screenshot also for your favor.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SizedBox(
width: double.infinity,
height: double.infinity,
child: FractionallySizedBox(
widthFactor: 0.9,
heightFactor: 0.9,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/iphone13.png"),
fit: BoxFit.fill,
),
),
child: Container(),
),
Positioned(
child: FractionallySizedBox(
widthFactor: 0.8,
heightFactor: 0.9,
child: Container(
alignment: Alignment.centerLeft,
child: ListView.separated(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('Text ${index+1}'),
);
},
separatorBuilder: (context, index) {
return const SizedBox(height:10);
},
),
),
),
),
],
),
),
),
));
}
}
N.B: Here, "assets/images/iphone13.png" are the iPhone background image.

Answer 2

you can do like this,
Container(
decoration: BoxDecoration(
border: //your border,
image: DecorationImage(image: AssetImage(MobileImage()))
),
child: Widgets(),
),
and also u can use the stack widget to Put The Widgets Inside the border Image