[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 // pendaftaran pasien
static TextStyle titleH5_600({required BuildContext context}) { static TextStyle titleH5_600({required BuildContext context}) {
return TextStyle( 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/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -12,6 +14,12 @@ class HomePageScreen extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final listSearchHistory = useState<List<HistoryTransaksiModel>>(
List.empty(
growable: true,
),
);
useEffect(() { useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async { WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
final userID = ref.read(currentUserProvider)?.model.M_UserID ?? "0"; final userID = ref.read(currentUserProvider)?.model.M_UserID ?? "0";
@@ -27,190 +35,241 @@ class HomePageScreen extends HookConsumerWidget {
return () {}; return () {};
}, []); }, []);
return Padding( return Scaffold(
padding: EdgeInsets.only( appBar: AppBar(
top: Constant.getActualYPhone(context: context, y: 30), title: Text(
), 'Home Screen',
child: Scaffold( style: TextStyle(color: Constant.textWhite),
appBar: AppBar(
title: Text(
'Home Screen',
style: TextStyle(color: Constant.textWhite),
),
backgroundColor: Constant.pcBtnBackgroundColor,
iconTheme: IconThemeData(
color: Constant.textWhite,
),
), ),
drawer: CustomDrawer(), backgroundColor: Constant.pcBtnBackgroundColor,
body: SafeArea( iconTheme: IconThemeData(
child: Center( color: Constant.textWhite,
child: Container( ),
width: Constant.getActualXPhone(context: context, x: 390), ),
height: Constant.getActualYPhone(context: context, y: 844), drawer: CustomDrawer(),
child: Column( body: SafeArea(
children: [ child: Padding(
SizedBox( padding: EdgeInsets.only(
height: Constant.getActualYPhone(context: context, y: 36), top: Constant.getActualYPhone(context: context, y: 36),
), left: Constant.getActualXPhone(context: context, x: 34),
//Card right: Constant.getActualXPhone(context: context, x: 34),
Container( ),
decoration: BoxDecoration( child: Container(
borderRadius: BorderRadius.circular(20), width: Constant.getActualXPhone(context: context, x: 390),
image: DecorationImage( height: Constant.getActualYPhone(context: context, y: 844),
image: AssetImage('images/background_card.png'), child: Column(
fit: BoxFit.cover, 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( boxShadow: [
padding: EdgeInsets.only( BoxShadow(
left: Constant.getActualXPhone(context: context, x: 34), color: Color.fromRGBO(145, 158, 171, 0.16),
right: offset: Offset(0, 24),
Constant.getActualXPhone(context: context, x: 34), blurRadius: 48,
), ),
child: Container( ],
width: ),
Constant.getActualXPhone(context: context, x: 332), //Isi Card
height: child: Container(
Constant.getActualYPhone(context: context, y: 173), child: Column(
mainAxisAlignment: MainAxisAlignment.center,
//Isi Card children: [
child: Container( // Text1 & Text2
child: Column( Padding(
mainAxisAlignment: MainAxisAlignment.center, 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: [ children: [
// Text1 & Text2 Text(
Padding( 'Account Balance',
padding: EdgeInsets.only( style: Constant.body1(context: context)
top: Constant.getActualYPhone( .copyWith(
context: context, y: 17), fontWeight: FontWeight.w400,
left: Constant.getActualXPhone( color: Constant.textWhite),
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(
SizedBox( 'Rp. 1,440,000',
height: Constant.getActualYPhone( style: Constant.H4_700V2(context: context)
context: context, y: 25), .copyWith(
), fontSize: Constant.getActualYPhone(
context: context, y: 24),
//Debit dan Kredit fontWeight: FontWeight.w600,
Row( color: Constant.textWhite),
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),
), ),
], ],
), )),
), ),
),
),
),
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( SizedBox(
height: height: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 24), context: context, y: 27),
), ),
Container(
width: Constant.getActualXPhone( //Debit dan Kredit
context: context, x: 350), Row(
child: Row( mainAxisAlignment: MainAxisAlignment
children: [ .center, // Menengahkan secara horizontal
Column( children: [
children: [ // Spasi di sebelah kiri "Check In"
Container( Padding(
child: Image( padding: EdgeInsets.only(
image: left: Constant.getActualXPhone(
AssetImage('images/pizza_icon.png'), 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),
), ),
child: Container(
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),
),
],
),
),
),
],
);
}
}