Created
December 27, 2024 17:05
-
-
Save rayliverified/43beff9dfa59df6e0185dd11f362281f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return const MaterialApp( | |
title: 'MyApp Demo', | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: IncomeHistory(), | |
), | |
); | |
} | |
} | |
class IncomeHistory extends StatelessWidget { | |
const IncomeHistory({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
width: 375, | |
height: 812, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: Colors.white, | |
borderRadius: BorderRadius.circular(30), | |
), | |
child: Stack( | |
clipBehavior: Clip.none, | |
children: [ | |
const Positioned( | |
left: 47, | |
top: 458, | |
child: SizedBox( | |
width: 12, | |
height: 21, | |
child: Text( | |
'0', | |
textAlign: TextAlign.right, | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
Positioned( | |
left: 66, | |
top: 467, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F34cb0e75-06f8-4789-a581-465e71ac8d14.png', | |
width: 285, | |
height: 3, | |
fit: BoxFit.contain, | |
), | |
), | |
const Positioned( | |
left: 65, | |
top: 477, | |
child: SizedBox( | |
width: 37, | |
height: 21, | |
child: Text( | |
'April', | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
const Positioned( | |
left: 150, | |
top: 477, | |
child: SizedBox( | |
height: 21, | |
child: Text( | |
'May', | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
const Positioned( | |
left: 235, | |
top: 477, | |
child: SizedBox( | |
width: 38, | |
height: 21, | |
child: Text( | |
'June', | |
style: TextStyle( | |
color: Color(0xFF131313), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
const Positioned( | |
left: 316, | |
top: 477, | |
child: SizedBox( | |
width: 31, | |
height: 21, | |
child: Text( | |
'July', | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
const Positioned( | |
left: 33, | |
top: 398, | |
child: SizedBox( | |
height: 21, | |
child: Text( | |
'10k', | |
textAlign: TextAlign.right, | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
Positioned( | |
left: 66, | |
top: 408, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2Fdb153fee-31fe-4f02-9026-27a7d127c631.png', | |
width: 285, | |
height: 1, | |
fit: BoxFit.contain, | |
), | |
), | |
const Positioned( | |
left: 31, | |
top: 339, | |
child: SizedBox( | |
width: 28, | |
height: 21, | |
child: Text( | |
'20k', | |
textAlign: TextAlign.right, | |
style: TextStyle( | |
color: Color(0xFF131313), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
Positioned( | |
left: 66, | |
top: 349, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F672f963b-f541-46e6-9f6f-c2a78cef7e10.png', | |
width: 285, | |
height: 1, | |
fit: BoxFit.contain, | |
), | |
), | |
const Positioned( | |
left: 23, | |
top: 280, | |
child: SizedBox( | |
width: 36, | |
height: 21, | |
child: Text( | |
'50k', | |
textAlign: TextAlign.right, | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 14, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.3, | |
height: 1.4, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
Positioned( | |
left: 66, | |
top: 290, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F8ffaf105-d45d-4349-b99d-ff18b24aa48b.png', | |
width: 285, | |
height: 1, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 60, | |
top: 319, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F8c37c00d-a53d-4fc3-914a-8720c9705889.png', | |
width: 294, | |
height: 157, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 226, | |
top: 290, | |
child: Container( | |
width: 49, | |
height: 176, | |
clipBehavior: Clip.hardEdge, | |
decoration: const BoxDecoration( | |
borderRadius: BorderRadius.vertical( | |
top: Radius.circular(25), | |
), | |
gradient: LinearGradient( | |
colors: [Color(0x07FFFFFF), Color(0x66A7FED9)], | |
), | |
), | |
), | |
), | |
Positioned( | |
left: 240, | |
top: 336, | |
child: Container( | |
width: 18, | |
height: 18, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFF131313), | |
border: Border.all( | |
width: 5, | |
color: Colors.white, | |
), | |
borderRadius: BorderRadius.circular(9), | |
boxShadow: const [ | |
BoxShadow( | |
color: Color(0x264A5568), | |
spreadRadius: 0, | |
offset: Offset(0, 3), | |
blurRadius: 13, | |
) | |
], | |
), | |
), | |
), | |
Positioned( | |
left: 213, | |
top: 301, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F79960360-b645-4147-bab5-e01672886add.png', | |
width: 72, | |
height: 32, | |
fit: BoxFit.contain, | |
), | |
), | |
const Positioned( | |
left: 222, | |
top: 304, | |
child: SizedBox( | |
width: 57, | |
height: 22, | |
child: Text( | |
'\$20,000', | |
style: TextStyle( | |
color: Colors.white, | |
fontSize: 12, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.2, | |
height: 1.7, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
), | |
const Positioned( | |
left: 100, | |
top: 164, | |
child: Text( | |
'Save This Month', | |
textAlign: TextAlign.center, | |
style: TextStyle( | |
color: Colors.black, | |
fontSize: 24, | |
letterSpacing: 0.5, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
const Positioned( | |
left: 104, | |
top: 202, | |
child: Text( | |
'\$1852.00 USD', | |
textAlign: TextAlign.center, | |
style: TextStyle( | |
color: Colors.black, | |
fontSize: 24, | |
fontWeight: FontWeight.w600, | |
letterSpacing: 0.5, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
Positioned( | |
left: 72, | |
top: 236, | |
child: RichText( | |
textAlign: TextAlign.center, | |
text: const TextSpan( | |
style: TextStyle( | |
color: Color(0xFF666666), | |
fontSize: 16, | |
letterSpacing: 0.3, | |
fontFamily: 'Clash Grotesk', | |
), | |
children: [ | |
TextSpan(text: 'Increase of '), | |
TextSpan( | |
text: '12%', | |
style: TextStyle( | |
color: Color(0xFF131313), | |
fontWeight: FontWeight.w600, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
TextSpan(text: ' from last month') | |
], | |
), | |
), | |
), | |
Positioned( | |
left: 24, | |
top: 725, | |
child: Container( | |
width: 327, | |
height: 69, | |
decoration: const BoxDecoration( | |
boxShadow: [ | |
BoxShadow( | |
color: Color(0x3FCCCCCC), | |
spreadRadius: 0, | |
offset: Offset(0, 10), | |
blurRadius: 20, | |
) | |
], | |
), | |
child: Stack( | |
clipBehavior: Clip.none, | |
children: [ | |
Positioned( | |
left: 0, | |
top: 0, | |
child: Container( | |
width: 327, | |
height: 70, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: Colors.black, | |
borderRadius: BorderRadius.circular(10), | |
), | |
), | |
), | |
Positioned( | |
left: 136, | |
top: 15, | |
child: Container( | |
width: 55, | |
height: 40, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: Colors.grey.shade100, | |
borderRadius: BorderRadius.circular(30), | |
), | |
), | |
), | |
Positioned( | |
left: 284, | |
top: 27, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2Fe4b4be96-b594-481b-ad92-a9f863afe614.png', | |
width: 16, | |
height: 16, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 218, | |
top: 25, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F65a080c6-4b38-45bb-99cf-2a09b7161237.png', | |
width: 19, | |
height: 19, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 154, | |
top: 25, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F01579977-48fd-4342-8b1c-80d07d98c371.png', | |
width: 20, | |
height: 20, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 90, | |
top: 25, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2Fbef5c14d-c43c-48ca-b4b0-620398e83a35.png', | |
width: 21, | |
height: 18, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 28, | |
top: 25, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F5f73f26d-eaaf-4f84-af15-9a20750b071d.png', | |
width: 17, | |
height: 18, | |
fit: BoxFit.contain, | |
), | |
) | |
], | |
), | |
), | |
), | |
const Positioned( | |
left: 89, | |
top: 50, | |
child: Text( | |
'Welcome back', | |
style: TextStyle( | |
color: Colors.black, | |
fontSize: 24, | |
fontWeight: FontWeight.w500, | |
letterSpacing: 0.5, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
const Positioned( | |
left: 89, | |
top: 30, | |
child: Text( | |
'Hello James,', | |
style: TextStyle( | |
color: Color(0xFF333333), | |
fontSize: 16, | |
letterSpacing: 0.3, | |
fontFamily: 'Clash Grotesk', | |
), | |
), | |
), | |
Positioned( | |
left: 24, | |
top: 31, | |
child: ClipRRect( | |
borderRadius: BorderRadius.circular(50), | |
clipBehavior: Clip.hardEdge, | |
child: Image.network( | |
'https://firebasestorage.googleapis.com/v0/b/codeless-app.appspot.com/o/projects%2F0RigmakYwMNTzec0ugW1%2Fad51679d5d6096caecc19fe5fde3f2ca304c430dRectangle%207.png?alt=media&token=5ac5321b-e6b1-4384-aa5c-72f7df9dab2a', | |
width: 50, | |
height: 50, | |
fit: BoxFit.cover, | |
), | |
), | |
), | |
Positioned( | |
left: 334, | |
top: 48, | |
child: Image.network( | |
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RigmakYwMNTzec0ugW1%2F6c72471e-40be-4151-b81a-452334df0d45.png', | |
width: 14, | |
height: 16, | |
fit: BoxFit.contain, | |
), | |
), | |
Positioned( | |
left: 342, | |
top: 47, | |
child: Container( | |
width: 8, | |
height: 8, | |
clipBehavior: Clip.hardEdge, | |
decoration: BoxDecoration( | |
color: const Color(0xFFA7FDD9), | |
border: Border.all( | |
color: Colors.white, | |
), | |
borderRadius: BorderRadius.circular(4), | |
), | |
), | |
) | |
], | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment