[Homepage] 3. add row transaksi

This commit is contained in:
Stephen
2024-01-17 08:34:31 +07:00
parent 150046115d
commit dc41ad389c
3 changed files with 414 additions and 170 deletions

View File

@@ -535,6 +535,14 @@ class Constant {
);
}
//homepage
static TextStyle titleH6_700({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 18),
fontWeight: FontWeight.w700,
);
}
// pendaftaran pasien
static TextStyle titleH5_600({required BuildContext context}) {
return TextStyle(

View File

@@ -1,3 +1,5 @@
import 'package:app_petty_cash/model/history_transaksi_model.dart';
import 'package:app_petty_cash/widget/homepage_row_transaksi.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -12,6 +14,12 @@ class HomePageScreen extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final listSearchHistory = useState<List<HistoryTransaksiModel>>(
List.empty(
growable: true,
),
);
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
final userID = ref.read(currentUserProvider)?.model.M_UserID ?? "0";
@@ -27,190 +35,241 @@ class HomePageScreen extends HookConsumerWidget {
return () {};
}, []);
return Padding(
padding: EdgeInsets.only(
top: Constant.getActualYPhone(context: context, y: 30),
),
child: Scaffold(
appBar: AppBar(
title: Text(
'Home Screen',
style: TextStyle(color: Constant.textWhite),
),
backgroundColor: Constant.pcBtnBackgroundColor,
iconTheme: IconThemeData(
color: Constant.textWhite,
),
return Scaffold(
appBar: AppBar(
title: Text(
'Home Screen',
style: TextStyle(color: Constant.textWhite),
),
drawer: CustomDrawer(),
body: SafeArea(
child: Center(
child: Container(
width: Constant.getActualXPhone(context: context, x: 390),
height: Constant.getActualYPhone(context: context, y: 844),
child: Column(
children: [
SizedBox(
height: Constant.getActualYPhone(context: context, y: 36),
),
//Card
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage('images/background_card.png'),
fit: BoxFit.cover,
),
backgroundColor: Constant.pcBtnBackgroundColor,
iconTheme: IconThemeData(
color: Constant.textWhite,
),
),
drawer: CustomDrawer(),
body: SafeArea(
child: Padding(
padding: EdgeInsets.only(
top: Constant.getActualYPhone(context: context, y: 36),
left: Constant.getActualXPhone(context: context, x: 34),
right: Constant.getActualXPhone(context: context, x: 34),
),
child: Container(
width: Constant.getActualXPhone(context: context, x: 390),
height: Constant.getActualYPhone(context: context, y: 844),
child: Column(
children: [
Container(
width: Constant.getActualXPhone(context: context, x: 332),
height: Constant.getActualYPhone(context: context, y: 173),
decoration: BoxDecoration(
// color: Colors.black12,
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage('images/background_card.png'),
fit: BoxFit.cover,
),
child: Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(context: context, x: 34),
right:
Constant.getActualXPhone(context: context, x: 34),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(145, 158, 171, 0.16),
offset: Offset(0, 24),
blurRadius: 48,
),
child: Container(
width:
Constant.getActualXPhone(context: context, x: 332),
height:
Constant.getActualYPhone(context: context, y: 173),
//Isi Card
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
],
),
//Isi Card
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Text1 & Text2
Padding(
padding: EdgeInsets.only(
top: Constant.getActualYPhone(
context: context, y: 17),
left: Constant.getActualXPhone(
context: context, x: 81),
right: Constant.getActualXPhone(
context: context, x: 81),
),
child: Container(
child: Column(
children: [
// Text1 & Text2
Padding(
padding: EdgeInsets.only(
top: Constant.getActualYPhone(
context: context, y: 17),
left: Constant.getActualXPhone(
context: context, x: 81),
right: Constant.getActualXPhone(
context: context, x: 81),
),
child: Container(
child: Column(
children: [
Text('Account Balance'),
Text('Rp. 1,440,000'),
],
)),
Text(
'Account Balance',
style: Constant.body1(context: context)
.copyWith(
fontWeight: FontWeight.w400,
color: Constant.textWhite),
),
SizedBox(
height: Constant.getActualYPhone(
context: context, y: 25),
),
//Debit dan Kredit
Row(
mainAxisAlignment: MainAxisAlignment
.center, // Menengahkan secara horizontal
children: [
// Spasi di sebelah kiri "Check In"
Padding(
padding: EdgeInsets.only(
bottom: Constant.getActualYPhone(
context: context, y: 17),
left: Constant.getActualXPhone(
context: context, x: 20),
),
child: Container(
child: Column(
children: [
Text('Debit'),
Text('Rp. 2,000,000'),
],
),
),
),
SizedBox(
width: Constant.getActualXPhone(
context: context, x: 51),
), // Jarak antara "Check In" dan "Check Out"
Padding(
padding: EdgeInsets.only(
bottom: Constant.getActualYPhone(
context: context, y: 17),
right: Constant.getActualXPhone(
context: context, x: 28),
),
child: Container(
child: Column(
children: [
Text('Credit'),
Text('Rp. 560,000'),
],
),
),
),
],
),
SizedBox(
height: Constant.getActualYPhone(
context: context, y: 16),
Text(
'Rp. 1,440,000',
style: Constant.H4_700V2(context: context)
.copyWith(
fontSize: Constant.getActualYPhone(
context: context, y: 24),
fontWeight: FontWeight.w600,
color: Constant.textWhite),
),
],
),
)),
),
),
),
),
SizedBox(
height: Constant.getActualYPhone(context: context, y: 44),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(context: context, x: 20),
right: Constant.getActualXPhone(context: context, x: 20),
),
child: Container(
// color: Colors.amber,
alignment: Alignment.centerLeft,
child: Column(children: [
Text('Transaksi Terkini'),
SizedBox(
height:
Constant.getActualYPhone(context: context, y: 24),
height: Constant.getActualYPhone(
context: context, y: 27),
),
Container(
width: Constant.getActualXPhone(
context: context, x: 350),
child: Row(
children: [
Column(
children: [
Container(
child: Image(
image:
AssetImage('images/pizza_icon.png'),
//Debit dan Kredit
Row(
mainAxisAlignment: MainAxisAlignment
.center, // Menengahkan secara horizontal
children: [
// Spasi di sebelah kiri "Check In"
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context, x: 20),
),
child: Container(
child: Column(
children: [
Text(
'Debit',
style: Constant.body1(context: context)
.copyWith(
fontWeight: FontWeight.w400,
color: Constant.textWhite),
),
),
],
Text(
'Rp. 2,000,000',
style: Constant.titleH6_700(
context: context)
.copyWith(
color: Constant.textWhite),
),
],
),
),
SizedBox(
width: Constant.getActualXPhone(
context: context, x: 12),
),
SizedBox(
width: Constant.getActualXPhone(
context: context, x: 51),
),
Padding(
padding: EdgeInsets.only(
right: Constant.getActualXPhone(
context: context, x: 28),
),
Container(
)
],
),
)
]),
child: Container(
child: Column(
children: [
Text(
'Credit',
style: Constant.body1(context: context)
.copyWith(
fontWeight: FontWeight.w400,
color: Constant.textWhite),
),
Text(
'Rp. 560,000',
style: Constant.titleH6_700(
context: context)
.copyWith(
color: Constant.textWhite),
),
],
),
),
),
],
),
SizedBox(
height: Constant.getActualYPhone(
context: context, y: 17),
),
],
),
)
],
),
),
),
//Card
SizedBox(
height: Constant.getActualYPhone(context: context, y: 36),
),
SizedBox(
height: Constant.getActualYPhone(context: context, y: 44),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(context: context, x: 20),
right: Constant.getActualXPhone(context: context, x: 20),
),
child: Container(
// color: Colors.amber,
alignment: Alignment.centerLeft,
child: Column(children: [
Text(
'Transaksi Terkini',
style: Constant.titleH5_600(context: context)
.copyWith(color: Constant.textBlack),
),
SizedBox(
height:
Constant.getActualYPhone(context: context, y: 24),
),
// Expanded(
// child: ListView.builder(
// itemCount: listSearchHistory.value.length,
// itemBuilder: (context, idx) {
// return Padding(
// padding: EdgeInsets.only(
// bottom: Constant.getActualYPhone(
// context: context,
// y: 10,
// ),
// ),
// child: Card(
// elevation: 2.0,
// child: Padding(
// padding: EdgeInsets.all(10),
// child: Column(
// // crossAxisAlignment: CrossAxisAlignment.start,
// // mainAxisAlignment: MainAxisAlignment.start,
// children: [
// // atas
// HomepageRowTransaksiWidget(
// icon_category_id: listSearchHistory
// .value[idx].kategoriid
// .toString(),
// icon_category_name: listSearchHistory
// .value[idx].kategoriname
// .toString(),
// amount: listSearchHistory
// .value[idx].amount
// .toString(),
// tglTransaksi: listSearchHistory
// .value[idx].tanggaltransaksi
// .toString(),
// tipe: listSearchHistory.value[idx].tipe
// .toString(),
// ),
// ],
// ),
// ),
// ),
// );
// },
// ),
// ),
]),
),
)
],
),
),
),

View File

@@ -0,0 +1,177 @@
import 'package:app_petty_cash/widget/sankbar_widget.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../app/constant.dart';
class HomepageRowTransaksiWidget extends HookConsumerWidget {
final String icon_category_id;
final String icon_category_name;
final String amount;
final String tipe;
final String tglTransaksi;
const HomepageRowTransaksiWidget({
Key? key,
required this.icon_category_id,
required this.icon_category_name,
required this.amount,
required this.tipe,
required this.tglTransaksi,
}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
// check file exist
Future<Widget> checkFileExistence(String fileUrl) async {
try {
final dio = Dio();
final response = await dio.head(fileUrl);
if (response.statusCode == 200) {
return SvgPicture.network(
fileUrl,
semanticsLabel: 'Icon pizza',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator(),
),
);
} else {
return SvgPicture.network(
'https://devone.aplikasi.web.id/pettycash-media/icon/icon_13.svg',
semanticsLabel: 'Icon pizza',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator(),
),
);
}
} catch (e) {
// print('Error checking file existence: $e');
return SvgPicture.network(
'https://devone.aplikasi.web.id/pettycash-media/icon/icon_13.svg',
semanticsLabel: 'Icon pizza',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator(),
),
);
}
}
return Row(
children: [
// kiri
Container(
width: Constant.getActualXPhone(context: context, x: 38),
height: Constant.getActualYPhone(context: context, y: 38),
decoration: BoxDecoration(
color: Color.fromRGBO(241, 90, 41, 0.08),
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
// child: Text('s'),
child: FutureBuilder<Widget>(
future: checkFileExistence('https://devone.aplikasi.web.id/pettycash-media/icon/icon_$icon_category_id.svg'),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Icon(
Icons.error,
color: Colors.red,
);
} else {
return snapshot.data ??
Container();
}
},
),
),
// tengah
Expanded(
child: Padding(
padding: EdgeInsets.only(
left: Constant.getActualYPhone(context: context, y: 20),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
icon_category_name,
style: Constant.body2_600(context: context).copyWith(
fontWeight: FontWeight.w600,
color: Constant.textBlack,
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 8,
),
),
Text(
amount,
style: Constant.body1_600(context: context).copyWith(
fontWeight: FontWeight.w600,
color: Constant.pcBtnBackgroundColor),
),
],
),
),
),
// kanan
Expanded(
child: Padding(
padding: EdgeInsets.only(
right: Constant.getActualYPhone(context: context, y: 8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
// width: Constant.getActualXPhone(context: context, x: 32),
height: Constant.getActualYPhone(context: context, y: 19),
decoration: BoxDecoration(
color: Constant.bgIconHistory,
borderRadius: BorderRadius.all(
Radius.circular(6.0),
),
),
child: Padding(
padding: EdgeInsets.all(2.0),
child: Text(
tipe,
style: Constant.body1_600(context: context).copyWith(
fontWeight: FontWeight.w600,
color: Constant.pcBtnBackgroundColor),
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 8,
),
),
Text(
tglTransaksi,
style: Constant.body1_600(context: context).copyWith(
fontWeight: FontWeight.w600, color: Constant.textGreyv2),
),
],
),
),
),
],
);
}
}