showCustomModalDialogBottomSheet function
dynamic
showCustomModalDialogBottomSheet(
- BuildContext controller,
- String languageCode,
- String refererKey,
- String subscriptionNo,
- bool isPopup,
- GetSubscriptionDetail getSubscriptionDetail,
Implementation
showCustomModalDialogBottomSheet(
BuildContext controller,
String languageCode,
String refererKey,
String subscriptionNo,
bool isPopup,
GetSubscriptionDetail getSubscriptionDetail) async {
//load localization
loadLocalizations(languageCode);
// load font family
getFontFamily(languageCode);
bool isTablet = isTabletScreen(controller);
DataDetail data = getSubscriptionDetail.data;
List<BankSubscriptionMethod> bankSubscriptionMethod =
data.subscriptionInfo.bankSubscriptionMethods;
if (UniversalPlatform.isWeb) {
if (isPopup) {
await showGeneralDialog(
context: controller,
barrierDismissible: false,
barrierColor: Colors.black.withOpacity(0.3),
barrierLabel:
MaterialLocalizations.of(controller).modalBarrierDismissLabel,
transitionDuration: const Duration(milliseconds: 300),
pageBuilder: (context, animation, secondaryAnimation) {
SocketManager manager = SocketManager();
manager.emitRoom(subscriptionNo);
return ChangeNotifierProvider(
create: (_) => DirectDebitProvider(),
child: Consumer<DirectDebitProvider>(
builder: (context, provider, child) {
var requestModel =
GetDetailRequestModel(subscriptionNo: subscriptionNo);
manager.broadcastEvent(controller, languageCode, refererKey,
requestModel, provider);
final containerWidth = MediaQuery.of(context).size.width;
return Center(
child: Material(
color: Colors.transparent,
child: Container(
height: 600,
width: containerWidth <= 632 ? 500 : 500,
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 20),
decoration: BoxDecoration(
color: CustomTheme.backgroundColor,
borderRadius: BorderRadius.circular(16),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
child: provider.isLoadSuccessPage
? SuccessPage(languageCode: languageCode)
: SizedBox(
child: Column(
children: [
const SizeboxCustom(
height: 10,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
// space widget
Padding(
padding:
const EdgeInsets.only(left: 20),
child: Container(
color: Colors.transparent,
padding: const EdgeInsets.all(2.0),
child: const Icon(
Icons.close_rounded,
color: Colors.transparent,
),
)),
//end space widget
TitleHeader(
titleStyle: textStyle.copyWith(
fontSize: 20,
color: CustomTheme.primaryColor),
subTitleStyle: textStyle.copyWith(
fontFamily: languageCode ==
LanguageCode.languageKh
? GoogleFonts.getFont(
'Battambang')
.fontFamily
: GoogleFonts.getFont(
'Roboto')
.fontFamily,
fontSize: 15,
fontWeight: FontWeight.normal,
color:
CustomTheme.secondaryColor),
billerLogo: data.biller.billerLogo,
title: S.current.direct_debit_title,
subTitle:
S.current.direct_debit_subtitle),
Consumer<DirectDebitProvider>(
builder: (context, provider, child) {
return Padding(
padding: const EdgeInsets.only(
right: 20),
child: MouseRegion(
onEnter: (event) => provider
.setCloseButtonHover(true),
onExit: (event) => provider
.setCloseButtonHover(false),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Align(
alignment:
Alignment.centerRight,
child: Container(
padding:
const EdgeInsets.all(
2.0),
decoration: BoxDecoration(
color: provider
.isCloseButtonHover
? CustomTheme
.closeIconBgHoverColor
: Colors.transparent,
borderRadius:
BorderRadius.circular(
4.0),
),
child: Icon(
Icons.close_rounded,
color: provider
.isCloseButtonHover
? CustomTheme
.closeIconColor
: CustomTheme
.closeIconColor,
),
),
),
),
),
);
},
),
],
),
const SizeboxCustom(
height: 40,
),
Expanded(child: LayoutBuilder(
builder: (context, constraints) {
// Define the desired width and height for each item
double screenWidth =
MediaQuery.of(context).size.width;
debugPrint('screenWidth: $screenWidth');
const itemWidth = 200.0;
double itemHeight = 0;
if (screenWidth <= 633 &&
screenWidth > 632) {
itemHeight = 32;
} else if (screenWidth <= 632 &&
screenWidth > 570) {
itemHeight = 30;
} else if (screenWidth <= 570 &&
screenWidth > 490) {
itemHeight = 30;
} else if (screenWidth <= 490 &&
screenWidth > 300) {
itemHeight = 40;
} else {
itemHeight = 60;
}
return Consumer<DirectDebitProvider>(
builder: (context, provider, child) {
return GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(
horizontal: 20),
itemCount:
bankSubscriptionMethod.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
screenWidth <= 633 ? 1 : 2,
mainAxisSpacing: 2,
crossAxisSpacing: 10,
childAspectRatio:
itemWidth / itemHeight,
),
itemBuilder: (context, index) {
String bankName = '';
if (languageCode ==
LanguageCode.languageKh &&
bankSubscriptionMethod[index]
.nameKh
.isNotEmpty) {
bankName =
bankSubscriptionMethod[
index]
.nameKh;
} else {
bankName =
bankSubscriptionMethod[
index]
.name;
}
return Padding(
padding: const EdgeInsets
.symmetric(vertical: 4),
child: BankCardWithProvider(
index: index,
bankId:
bankSubscriptionMethod[
index]
.id,
imageUrl:
bankSubscriptionMethod[
index]
.logo,
bankName: bankName,
languageCode: languageCode,
isMobile: false,
));
},
);
},
);
},
)),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 5),
child: ButtonWithProvider(
languageCode: languageCode,
subscriptionNo: subscriptionNo,
refererKey: refererKey,
bankSubscriptionMethod:
bankSubscriptionMethod,
isMobilePlatform: false,
)),
const SizeboxCustom(
height: 10,
),
SafeArea(
child: PowerByVersion(
isDiplayBill24Info: data
.pageConfig.displayBill24Info))
],
),
),
),
),
);
}));
},
transitionBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1), // Start animation from the bottom
end: Offset.zero, // End animation at the center
).animate(CurvedAnimation(
parent: animation,
curve: Curves.easeInOut,
)),
child: child,
);
},
);
debugPrint('Dialog close');
SocketManager manager = SocketManager();
manager.disConnect();
} else {
final url = buildRedirectUrl(subscriptionNo);
html.window.open(url, '_self');
}
} else {
await showModalBottomSheet(
context: controller,
useSafeArea: true,
isScrollControlled: true,
backgroundColor: Colors.transparent,
barrierColor: Colors.black.withOpacity(0.3),
constraints:
BoxConstraints(minWidth: MediaQuery.of(controller).size.width),
builder: (context) {
SocketManager manager = SocketManager();
manager.emitRoom(subscriptionNo);
return ChangeNotifierProvider(
create: (_) => DirectDebitProvider(),
child: Consumer<DirectDebitProvider>(
builder: (context, provider, child) {
var requestModel =
GetDetailRequestModel(subscriptionNo: subscriptionNo);
manager.broadcastEvent(controller, languageCode, refererKey,
requestModel, provider);
return Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.90),
decoration: BoxDecoration(
color: CustomTheme.backgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12))),
padding: const EdgeInsets.symmetric(vertical: 8.0),
width: MediaQuery.of(context).size.width,
child: provider.isLoadSuccessPage
? SuccessPage(languageCode: languageCode)
: SizedBox(
child: Column(
children: [
IndicatorBar(),
const SizeboxCustom(
height: 20,
),
TitleHeader(
titleStyle: textStyle.copyWith(
color: CustomTheme.primaryColor),
subTitleStyle: textStyle.copyWith(
fontFamily:
languageCode == LanguageCode.languageKh
? GoogleFonts.getFont('Battambang')
.fontFamily
: GoogleFonts.getFont('Roboto')
.fontFamily,
fontSize: 15,
fontWeight: FontWeight.normal,
color: CustomTheme.secondaryColor),
billerLogo: data.biller.billerLogo,
title: S.current.direct_debit_title,
subTitle: S.current.direct_debit_subtitle,
),
const SizeboxCustom(
height: 20,
),
Expanded(child: Consumer<DirectDebitProvider>(
builder: (context, provider, child) {
double screenWidth =
MediaQuery.of(context).size.width;
debugPrint('screenWidth: $screenWidth');
const itemWidth = 200.0;
double itemHeight = 0;
if (screenWidth >= 600 && screenWidth < 1100) {
itemHeight = 34;
} else {
itemHeight = 28;
}
return isTablet == false
? ListView.builder(
shrinkWrap: true,
itemCount:
bankSubscriptionMethod.length,
padding: const EdgeInsets.symmetric(
horizontal: 20),
itemBuilder: (context, index) {
String bankName = '';
if (languageCode ==
LanguageCode.languageKh &&
bankSubscriptionMethod[index]
.nameKh
.isNotEmpty) {
bankName =
bankSubscriptionMethod[index]
.nameKh;
} else {
bankName =
bankSubscriptionMethod[index]
.name;
}
return Padding(
padding:
const EdgeInsets.symmetric(
vertical: 4),
child: BankCardWithProvider(
index: index,
bankId: bankSubscriptionMethod[
index]
.id,
imageUrl:
bankSubscriptionMethod[
index]
.logo,
bankName: bankName,
languageCode: languageCode,
isMobile: true,
));
})
: GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(
horizontal: 20),
itemCount:
bankSubscriptionMethod.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 2,
crossAxisSpacing: 10,
childAspectRatio:
itemWidth / itemHeight,
),
itemBuilder: (context, index) {
String bankName = '';
if (languageCode ==
LanguageCode.languageKh &&
bankSubscriptionMethod[index]
.nameKh
.isNotEmpty) {
bankName =
bankSubscriptionMethod[index]
.nameKh;
} else {
bankName =
bankSubscriptionMethod[index]
.name;
}
return Padding(
padding:
const EdgeInsets.symmetric(
vertical: 4),
child: BankCardWithProvider(
index: index,
bankId: bankSubscriptionMethod[
index]
.id,
imageUrl:
bankSubscriptionMethod[
index]
.logo,
bankName: bankName,
languageCode: languageCode,
isMobile: false,
));
},
);
})),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 15),
child: ButtonWithProvider(
languageCode: languageCode,
subscriptionNo: subscriptionNo,
refererKey: refererKey,
bankSubscriptionMethod:
bankSubscriptionMethod,
isMobilePlatform: true,
)),
SafeArea(
child: PowerByVersion(
isDiplayBill24Info:
data.pageConfig.displayBill24Info))
],
),
),
);
}));
});
debugPrint('Dialog close');
SocketManager manager = SocketManager();
manager.disConnect();
}
}