Skip to content

Instantly share code, notes, and snippets.

@rayliverified

rayliverified/0RbP7wXpMdLZPkbkW9je.dart

Created September 21, 2024 07:17
Show Gist options
  • Save rayliverified/8bfa401579d57e507accc74217a625bd to your computer and use it in GitHub Desktop.
Save rayliverified/8bfa401579d57e507accc74217a625bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
0RbP7wXpMdLZPkbkW9je.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:math';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp Demo',
debugShowCheckedModeBanner: false,
home: PaymentTransactionHistory(),
);
}
}
class PaymentTransactionHistory extends StatefulWidget {
const PaymentTransactionHistory({super.key});
@override
_PaymentTransactionHistoryState createState() =>
_PaymentTransactionHistoryState();
}
class _PaymentTransactionHistoryState extends State<PaymentTransactionHistory> {
int currentNavItemIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
width: 360,
height: 880,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.white,
),
child: SizedBox(
width: double.infinity,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 23,
top: 121,
child: Text(
'Transaction History',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 24,
top: 169,
child: SizedBox(
width: 312,
height: 670,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'March 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F52469b4e-66cd-4825-8e39-06d859cb7d09.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 62,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'April 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Fb31da47e-7ad3-4cab-9e98-90c19dfaf933.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 124,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'May 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Fce8a6f41-738a-46ca-8413-d37c7c02830d.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 186,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'June 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F3b39a1f9-6183-4b8d-bad9-b21ddc17ba72.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 248,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'July 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Fcbfe75e1-349c-4913-8591-2db8efbbe20a.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 310,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'August 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Ffc007d40-81dd-4a7b-a3ff-285dacb811a4.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 372,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'September 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F3346b5e2-66f0-4bad-8466-2437d415d166.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 434,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'October 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F15f05987-e283-4e20-b438-08dbc180fb12.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 496,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'November 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Ff7408e7c-159f-4c72-875a-11fe9ceb396a.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 558,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'December 2023',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Fafb4e4e3-6969-4857-a008-50c855b3e5d2.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 620,
child: Container(
width: 312,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFF6F6F4),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 15,
top: 19,
child: Text(
'January 2024',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 272,
top: 13,
child: Transform.rotate(
angle: 270 * pi / 180,
child: Container(
width: 24,
height: 24,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F6da1c62e-5f09-40d6-862d-9023cd458126.png',
width: 24,
height: 24,
fit: BoxFit.contain,
),
)
],
),
),
),
)
],
),
),
)
],
),
),
),
Positioned(
left: 0,
top: 691,
child: SizedBox(
width: 360,
height: 109,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 20,
top: 20,
child: SizedBox(
width: 320,
height: 49,
),
)
],
),
),
),
Positioned(
left: 90,
top: 46,
child: Text(
'Juan Dela Cruz',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF1E1E1E),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
left: 90,
top: 66,
child: Text(
'Tenant',
style: GoogleFonts.getFont(
'Plus Jakarta Sans',
color: Color(0xFF595959),
fontSize: 12,
),
),
),
Positioned(
left: 41,
top: 43,
child: SizedBox.square(
dimension: 41,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
shadowColor: Color(0xFFA5A5A5),
padding: EdgeInsets.zero,
shape: CircleBorder(),
visualDensity: VisualDensity.standard,
elevation: 0,
minimumSize: Size.zero,
),
onPressed: () {},
child: SizedBox.square(
dimension: 26,
child: Image.network(
'https://firebasestorage.googleapis.com/v0/b/codeless-app.appspot.com/o/projects%2F0RWsRhoeYDga2EJFPAJP%2F4f781f477bab6ba12706df6cc77c16477b70baaaEllipse%201.png?alt=media&token=fddc3617-d80c-49cb-a5bc-6b787a4f6659',
scale: 400,
),
),
),
),
),
Positioned(
left: 280,
top: 47,
child: SizedBox(
width: 39,
height: 38,
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Color(0xFF838378),
),
foregroundColor: Color(0xFF5C69E5),
backgroundColor: Colors.transparent,
shadowColor: Color(0xFFA5A5A5),
padding: EdgeInsets.zero,
textStyle: TextStyle(
color: Color(0xFF5C69E5),
fontSize: 9,
fontFamily: 'Roboto',
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
visualDensity: VisualDensity.standard,
elevation: 0,
minimumSize: Size.zero,
),
child: SizedBox.square(
dimension: 20,
child: Image.network(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F0553892f91b02411fbb5d185a6329b22.png',
),
),
),
),
)
],
),
),
),
bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
indicatorColor: Colors.transparent,
labelTextStyle: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return TextStyle(
color: Color(0xFF5C69E5),
fontSize: 11,
fontWeight: FontWeight.w600,
fontFamily: 'Roboto',
);
}
return TextStyle(
color: Colors.black,
fontSize: 11,
fontFamily: 'Roboto',
);
}),
iconTheme: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return IconThemeData(
color: Color(0xFF5C69E5),
size: 24,
);
}
return IconThemeData(
color: Colors.black,
size: 24,
);
}),
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
),
child: NavigationBar(
selectedIndex: currentNavItemIndex,
onDestinationSelected: (index) =>
setState(() => currentNavItemIndex = index),
backgroundColor: Color(0xFFF6F6F4),
elevation: 10,
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
destinations: [
NavigationDestination(
icon: Icon(
Icons.home_outlined,
size: 24,
),
selectedIcon: Icon(
Icons.home,
size: 24,
),
label: 'Home',
),
NavigationDestination(
icon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Faf923b6d6335beb83d656d666370a34e.png',
),
size: 24,
),
selectedIcon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F99e60039b1b4e4501eae99df4d9b377d.png',
),
size: 24,
),
label: 'Requests',
),
NavigationDestination(
icon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F8346d92e5d9a33a9aaeec6ea6d50c29a.png',
),
size: 24,
),
selectedIcon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2Ff9251726a58f725647cba27441a9da05.png',
),
size: 24,
),
label: 'Transactions',
),
NavigationDestination(
icon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F1a6fab00d32e9e0d1d4d1c990ae2afa6.png',
),
size: 24,
),
selectedIcon: ImageIcon(
NetworkImage(
'https://storage.googleapis.com/codeless-app.appspot.com/uploads%2Fimages%2F0RWsRhoeYDga2EJFPAJP%2F536ea7f812387bb5502d5008e66d3643.png',
),
size: 24,
),
label: 'Messages',
)
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment