How can I add flutterwave payment to a flutter app

Question

I want to add a flutterwave payment gateway where users can transfer funds to eachother, But I keep getting a blank page after build.

I added a pay button to the tabbar which on press should show you the flutterwave transfer form but all I get is a blank page.

Below is my flutterwave.dart code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutterwave/flutterwave.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutterwave/models/responses/charge_response.dart';
import 'package:flutterwhatsappclone/constatnt/global.dart';
import 'package:flutterwhatsappclone/helper/sizeconfig.dart';
import 'package:flutterwhatsappclone/Screens/flutterwave.dart';

class PaymentWidget extends StatefulWidget {
  @override
  Widget build(context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter + Flutterwave'),
          centerTitle: true,
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Pay with Flutterwave'),
            onPressed: () {},
          ),
        ));
  }

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}

@override
State<StatefulWidget> createState() {
  // TODO: implement createState
  throw UnimplementedError();
}

class _PaymentWidgetState extends State<PaymentWidget> {
  var scaffoldKey = GlobalKey<ScaffoldState>();
  final formKey = GlobalKey<FormState>();
  final String txref = "My_unique_transaction_reference_123";
  final String amount = "200";
  final String currency = FlutterwaveCurrency.RWF;

  var fullname;

  var phone;

  var email;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter + Flutterwave'),
          centerTitle: true,
        ),
        body: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: Form(
                key: formKey,
                child: Column(children: [
                  const Padding(padding: EdgeInsets.all(10.0)),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    child: TextFormField(
                      controller: fullname,
                      decoration: const InputDecoration(labelText: "Full Name"),
                      validator: (value) =>
                          value.isNotEmpty ? null : "Please fill in Your Name",
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    child: TextFormField(
                      controller: phone,
                      decoration:
                          const InputDecoration(labelText: "Phone Number"),
                      validator: (value) => value.isNotEmpty
                          ? null
                          : "Please fill in Your Phone number",
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    child: TextFormField(
                      controller: email,
                      decoration: const InputDecoration(labelText: "Email"),
                      validator: (value) =>
                          value.isNotEmpty ? null : "Please fill in Your Email",
                    ),
                  ),
                  ElevatedButton(
                    child: const Text('Pay with Flutterwave'),
                    onPressed: () {},
                  ),
                ]))));
  }

  beginPayment() async {
    final Flutterwave flutterwave = Flutterwave.forUIPayment(
        context: this.context,
        encryptionKey: "your_test_encryption_key",
        publicKey: "your_public_key",
        currency: this.currency,
        amount: this.amount,
        email: "[email protected]",
        fullName: "Valid Full Name",
        txRef: this.txref,
        isDebugMode: true,
        phoneNumber: "0123456789",
        acceptCardPayment: true,
        acceptUSSDPayment: false,
        acceptAccountPayment: false,
        acceptFrancophoneMobileMoney: false,
        acceptGhanaPayment: false,
        acceptMpesaPayment: false,
        acceptRwandaMoneyPayment: true,
        acceptUgandaPayment: false,
        acceptZambiaPayment: false);

    try {
      final ChargeResponse response =
          await flutterwave.initializeForUiPayments();
      if (response == null) {
        // user didn't complete the transaction.
      } else {
        final isSuccessful = checkPaymentIsSuccessful(response);
        if (isSuccessful) {
          // provide value to customer
        } else {
          // check message
          print(response.message);

          // check status
          print(response.status);

          // check processor error
          print(response.data.processorResponse);
        }
      }
    } catch (error, stacktrace) {
      // handleError(error);
    }
  }

  bool checkPaymentIsSuccessful(final ChargeResponse response) {
    return response.data.status == FlutterwaveConstants.SUCCESSFUL &&
        response.data.currency == this.currency &&
        response.data.amount == this.amount &&
        response.data.txRef == this.txref;
  }
}

Above is the flutterwave.dart that has the flutterwave code. I believe I have made a mistake somewhere or I have missed something. All works fine except the Flutter-wave payment button that shows a blank page. To round it up I want to make the pay button display a flutter-wave payment form were users can transfer funds.

Any help would be appreciated