Skip to content

Instantly share code, notes, and snippets.

@rayliverified
Created December 27, 2024 17:05
Show Gist options
  • Save rayliverified/43beff9dfa59df6e0185dd11f362281f to your computer and use it in GitHub Desktop.
Save rayliverified/43beff9dfa59df6e0185dd11f362281f to your computer and use it in GitHub Desktop.
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