import 'package:flutter/material.

dart';

void main() {
runApp(const FigmaToCodeApp());
}

// Generated by: https://www.figma.com/community/plugin/842128343887142055/

class FigmaToCodeApp extends StatelessWidget {
const FigmaToCodeApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: const Color.fromARGB(255, 18, 32, 47),
),
home: Scaffold(
body: ListView(children: [
ChatPage(),
]),
),
);
}
}

class ChatPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 360,
height: 800,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Colors.white),
child: Stack(
children: [
Positioned(
left: 0,
top: 25,
child: Container(
width: 360,
height: 70,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 10,
offset: Offset(0, 4),
spreadRadius: -4,
)
],
),
),
),
Positioned(
left: 0,
top: 37,
 child: Container(
width: 48,
height: 48,
padding: const EdgeInsets.only(
top: 11.27,
left: 16,
right: 16.44,
bottom: 11.27,
),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
,
],
),
),
),
Positioned(
left: 152,
top: 47,
child: Text(
'Chat',
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0,
),
),
),
Positioned(
left: 114,
top: 124,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFF4987FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18),
topRight: Radius.circular(4),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
 ),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
left: 114,
top: 192,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFF4987FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18),
topRight: Radius.circular(4),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
 child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
left: 114,
top: 446,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFF4987FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18),
topRight: Radius.circular(4),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
 ),
),
),
),
],
),
),
),
Positioned(
left: 114,
top: 617,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFF4987FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18),
topRight: Radius.circular(4),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
 left: 9,
top: 288,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFFB9B9B9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(18),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
left: 9,
top: 360,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
 top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFFB9B9B9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(18),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
left: 9,
top: 533,
child: Container(
width: 264,
height: 59,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 243,
height: 59,
decoration: ShapeDecoration(
color: Color(0xFFB9B9B9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
 topRight: Radius.circular(18),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
),
),
),
Positioned(
left: 14,
top: 12,
child: SizedBox(
width: 250,
height: 40,
child: Text(
'Lorem ipsum dolor sit amet consectetur.Lorem ipsum
dolor sit ',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
),
],
),
),
),
Positioned(
left: 17,
top: 731,
child: Container(
width: 335,
height: 55,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 274,
height: 55,
decoration: ShapeDecoration(
color: Color(0xFFE4E4E4),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(53),
),
),
),
),
Positioned(
left: 280,
top: 0,
child: Container(
width: 55,
height: 55,
 decoration: ShapeDecoration(
color: Color(0xFF4987FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(53),
),
),
),
),
Positioned(
left: 101,
top: 19,
child: Text(
'Message',
style: TextStyle(
color: Color(0xFF878787),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
Positioned(
left: 293,
top: 16,
child: Container(
width: 24,
height: 24,
padding: const EdgeInsets.only(
top: 2,
left: 3,
right: 0.79,
bottom: 1.82,
),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
,
],
),
),
),
],
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 360,
height: 25,
child: Stack(
children: [
Positioned(
 left: 0,
top: 0,
child: Container(
width: 360,
height: 25,
decoration: BoxDecoration(color: Colors.white),
),
),
Positioned(
left: 35,
top: 9,
child: Text(
'20:09',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0,
),
),
),
Positioned(
left: 261,
top: 3,
child: Container(
width: 20,
height: 20,
padding: const EdgeInsets.only(
top: 2.50,
left: 0.58,
right: 0.57,
bottom: 2.50,
),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
,
],
),
),
),
Positioned(
left: 321,
top: 3,
child: Container(
width: 19,
height: 19,
padding: const EdgeInsets.symmetric(horizontal: 3.96,
vertical: 1.58),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
children: [
,
],
),
),
),
Positioned(
left: 288,
top: 3,
child: Container(
width: 19,
height: 19,
padding: const EdgeInsets.all(1.58),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
,
],
),
),
),
],
),
),
),
],
),
),
],
);
}
}