donate method
void donate (BuildContext context, ProfilePageViewModel model)
Implementation
void donate(BuildContext context, ProfilePageViewModel model) \{
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
builder: (BuildContext context) \{
return StatefulBuilder(
builder: (context, setState) \{
model.attachListener(setState);
return ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: SizedBox(
height: model.bottomSheetHeight,
child: Scaffold(
background color set to Primary
backgroundColor:
Theme.of(context).colorScheme.primaryContainer,
header
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
elevation: 0.0,
toolbarHeight: SizeConfig.screenHeight! * 0.15,
title: Padding(
padding: const EdgeInsets.only(top: 8.0),
display title
child: Text(
'Donating to \n$\{model.currentOrg.name\}',
style: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(fontSize: 24),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
actions: [
Padding(
padding: EdgeInsets.only(
right: 8.0,
top: SizeConfig.screenHeight! * 0.01,
),
child: IconButton(
icon: Icon(
Icons.cancel,
color: Theme.of(context).colorScheme.primary,
),
onPressed: model.popBottomSheet,
),
)
],
),
body: SingleChildScrollView(
SingleChildScrollView is a box in which a single widget can be scrolled.
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: SizeConfig.screenWidth! * 0.05,
),
Text(
'Please Select and amount',
style: Theme.of(context).textTheme.headlineSmall,
),
SizedBox(
height: SizeConfig.screenWidth! * 0.05,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
looping through and renders button for donation amounts.
children: List.generate(
3,
(index) =\> model.dominationButton(
model.denomination[index],
context,
setState,
),
),
),
),
SizedBox(
height: SizeConfig.screenWidth! * 0.05,
),
Text(
'Or',
style: Theme.of(context).textTheme.headlineSmall,
),
Text(
'Input custom amount',
style: Theme.of(context).textTheme.headlineSmall,
),
SizedBox(
height: SizeConfig.screenWidth! * 0.05,
),
containers for custom amount
Container(
padding: EdgeInsets.symmetric(
horizontal: SizeConfig.screenWidth! * 0.05,
),
child: TextField(
controller: model.donationAmount,
focusNode: model.donationField,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.number,
autofillHints: const \<String\>[AutofillHints.email],
enableSuggestions: true,
style: Theme.of(context).textTheme.titleLarge,
onChanged: (text) \{
setState(() \{\});
\},
decoration: InputDecoration(
hintText: AppLocalizations.of(context)!
.translate("Enter donation amount"),
labelText: AppLocalizations.of(context)!
.translate("Enter custom donation amount"),
labelStyle:
Theme.of(context).textTheme.titleMedium,
prefixIcon: GestureDetector(
onTap: () \{
model.changeCurrency(context, setState);
\},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
model.donationCurrency,
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.headlineSmall,
),
const Icon(
Icons.arrow_drop_down_circle_outlined,
)
],
),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
Radius.circular(12.0),
),
borderSide: BorderSide(
color:
Theme.of(context).colorScheme.secondary,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(
color:
Theme.of(context).colorScheme.secondary,
),
),
),
),
),
SizedBox(
height: SizeConfig.screenWidth! * 0.05,
),
ElevatedButton(
onPressed: () async \{
required fields for donation transaction
late final String userId;
late final String orgId;
late final String nameOfOrg;
late final String nameOfUser;
late final String payPalId;
late final double amount;
orgId = model.currentOrg.id!;
userId = model.currentUser.id!;
nameOfUser =
"$\{model.currentUser.firstName!\} $\{model.currentUser.lastName!\}";
nameOfOrg = model.currentOrg.name!;
amount = double.parse(model.donationAmount.text);
final request = BraintreeDropInRequest(
tokenizationKey:
'\<YOUR_BRAINTREE_SANDBOX_API_KEY\>',
collectDeviceData: true,
paypalRequest: BraintreePayPalRequest(
amount: model.donationAmount.text,
displayName: "Talawa",
),
cardEnabled: true,
);
final BraintreeDropInResult? result =
await BraintreeDropIn.start(request);
if (result != null) \{
saving the donation in server
late final GraphQLClient client =
graphqlConfig.clientToQuery();
getting transaction id from `brainTree` API
payPalId = result.paymentMethodNonce.nonce;
final QueryResult donationResult =
await client.mutate(
MutationOptions(
document: gql(
queries.createDonation(
userId,
orgId,
nameOfOrg,
nameOfUser,
payPalId,
amount,
),
),
),
);
if (donationResult.hasException) \{
model.showSnackBar(
"Error occurred while making a donation",
);
\}
hiding the donation UI once it is successful
model.popBottomSheet();
model.showSnackBar(
'Donation Successful,Thanks for the support !',
);
\}
\},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
if the donation amount entered or selected is empty then renders grey color
else render primary color
model.donationAmount.text.isEmpty
? Colors.grey
: Theme.of(context).colorScheme.primary,
),
),
child: Text(
'DONATE',
style: Theme.of(context).textTheme.labelLarge,
),
)
],
),
),
),
),
);
\},
);
\},
).then((value) =\> model.updateSheetHeight());
\}