Screen Reloads When you Tap on the Input Fields

[ComputerMaverick69]

Description

The UI reloads each time i tap on it to put it the card details. This happens with all of the input fields on the package, except the drop-downs.

Steps to Reproduce

1. Implement flutterwave_standard: ^1.0.6
2. Pass the required parameters
3. Select Payment Method and Tap

Expected behaviour: It should allow for users to input their card details

Actual behaviour:

UI reloads

Reproduces how often:

All the time!

Configuration

• API Version: v3
• Environment: Test Mode
• Device: iPhone 11 Pro Simulator - iOS 15.5
• Language: Dart
• Flutter Version: 3.3.3

Additional Information

Flutterwave Payment Implementation Code

//Flutterwave payment implementation
  Future<void> payUsingFlutterwave(
      context,
      String currency,
      double amount,
      String email,
      String phone,
      String pkey,
      String skey,
      String enckey,
      String name,
      String ref) async {
    final Customer customer =
        Customer(name: name, phoneNumber: phone, email: email);

    final Flutterwave flutterwave = Flutterwave(
        context: context,
        publicKey: pkey,
        currency: currency,
        txRef: ref,
        amount: amount.toString(),
        customer: customer,
        paymentOptions: "ussd, card, barter, payattitude",
        customization: Customization(title: "Pay using Flutterwave"),
        isTestMode: true,
        redirectUrl: "/");

    final ChargeResponse response = await flutterwave.charge();
    if (response != null) {
      // print("${response.toJson()}");
      if (response.success!) {
        Future<ResponseModel> verifyFunds(String txnId, String token) async {
          late ResponseModel responseModel;
          //var dio = Dio();
          // print(txnId);

          try {
            var response = await Dio().get(
              'https://api.flutterwave.com/v3/transactions/${txnId}/verify',
              options: Options(headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer ${token}",
              }),
            );

            if (response.statusCode.toString() == '200' ||
                response.statusMessage.toString() == 'OK') {
              print('Transaction Verified');
              responseModel = ResponseModel(true, 'Funds Verified');
            } else {
              responseModel = ResponseModel(false, response.statusMessage!);
            }
          } catch (e) {
            print("Error caught " + e.toString());
          }
          // print(responseModel.isSuccess.toString());
          return responseModel;
        }

        // Call the verify transaction endpoint with the transactionID returned in `response.transactionId` to verify transaction before offering value to customer
        if (response.status == 'success' && response.success == true) {
          verifyFunds(response.transactionId!, skey).then((status) {
            if (status.isSuccess) {
              Get.snackbar("Payments", 'Payment Confirmed');
              _isPaymentConfirmed = true;
              update();
            } else {
              Get.snackbar(
                  'Payments', 'Payment Cannot be Confirmed at this Time!');
              // print('Transaction Could not be verified!');
            }
          });
        } else {}
      } else {
        // Transaction not successful
        Get.snackbar('Payments', 'Payments Failed!');
      }
    } else {}
  }

Page Calling the Implementation

import 'package:demo/controllers/payments/payment_controller.dart';
import 'package:demo/controllers/users/user_controller.dart';
import 'package:demo/helpers/app_styles.dart';
import 'package:demo/helpers/size_config.dart';
import 'package:demo/models/payments/payment_methods_model.dart';
import 'package:demo/widgets/center_loader_widget.dart';
import 'package:demo/widgets/title_text_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:uuid/uuid.dart';

class PaymentMethodsScreen extends StatelessWidget {
  final int? id;
  final int? qty;
  final double amount;
  final double? discount;
  final String? title;
  final double? charges;
  final String? date;
  final String? time;
  final String? address;
  final String? lat;
  final String? lng;

  PaymentMethodsScreen(
      {Key? key,
      this.id,
      this.qty,
      required this.amount,
      this.discount,
      this.title,
      this.charges,
      this.date,
      this.time,
      this.address,
      this.lat,
      this.lng})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<PaymentsController>(builder: (paymentMethodsController) {
      return Scaffold(
        appBar: AppBar(
          title: TitleTextWidget(
            titleText: 'Payments',
            titleColor: AppStyles.appPrimaryColor,
          ),
          leading: GestureDetector(
            onTap: () {
              Get.back();
            },
            child: const Icon(Icons.arrow_back_outlined,
                color: AppStyles.appPrimaryColor),
          ),
          backgroundColor: Colors.white,
          elevation: 0,
        ),
        backgroundColor: Colors.white,
        body: paymentMethodsController.isLoaded
            ? Container(
                padding: EdgeInsets.all(SizeConfig.height10),
                height: double.maxFinite,
                child: ListView.builder(
                    itemCount: paymentMethodsController.paymentMethods.length,
                    itemBuilder: (context, index) {
                      return Get.previousRoute == '/PremiumPricingModal' &&
                              index == 0
                          ? Container()
                          : _buildPaymentListItem(context, index,
                              paymentMethodsController.paymentMethods[index]);
                    }),
              )
            : CenterLoaderWidget(),
      );
    });
  }

  Widget _buildPaymentListItem(
      BuildContext context, int position, Data paymentMethod) {
    var controller = Get.find<PaymentsController>();
    var userController = Get.find<UserController>();

    return GestureDetector(
      onTap: () {
        if (paymentMethod.title!.toLowerCase().split(' ').contains('cash')) {
          print('Cash');
        } else if (paymentMethod.title!
            .toLowerCase()
            .split(' ')
            .contains('flutterwave')) {
          //call flutterwave payment method from controller
          controller.payUsingFlutterwave(
            context, 
            'NGN', 
            amount, 
            userController.userModel.data!.email, 
            userController.userModel.data?.phone ?? '',
            paymentMethod.appPublicKey.toString(), 
            paymentMethod.appSecretKey.toString(), 
            paymentMethod.encryptionKey.toString(), 
            userController.userModel.data!.name, 
            Uuid().v1()
          );
        }
      },
      child: Padding(
        padding: EdgeInsets.symmetric(
            horizontal: SizeConfig.width30, vertical: SizeConfig.height10),
        child: Container(
          width: SizeConfig.width250,
          height: SizeConfig.height70,
          padding: EdgeInsets.symmetric(horizontal: SizeConfig.width20),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(SizeConfig.radius15),
              border: Border.all(width: 2, color: AppStyles.appPrimaryColor)),
          child: Center(
              child: TitleTextWidget(
                  titleText: paymentMethod.title!,
                  titleColor: AppStyles.appPrimaryColor)),
        ),
      ),
    );
  }
}

[Petermakala]

Hi, am also facing the some issue as you, did you manage to fix the bug? i would like to know how to fix it.

[rupinderjeet]

This might be related to following issues:

• https://github.com/flutter/flutter/issues/68571
• https://github.com/flutter/flutter/issues/68018

I haven't encountered this issue yet, but there are several similar reports. If you guys can let me know your flutter doctor -v output and testing-device details, I might be able to look into this.

If you've a project that can reproduce this issue, it will be very helpful.

[ComputerMaverick69]

I believe I practically gave all the information required to reproduce this issue including the actual code itself. I also provided the environment and other necessary details to reproduce the same.

[rupinderjeet]

I understand and your report is good. I have two thoughts to share:

• The reproduction code you shared cannot be run without understanding and filling in the missing classes. A minimal reproduction code shouldn't have missing dependencies. Nevertheless, flutterwave-related implementation is similar to mine.
• I am unable to reproduce the bug in my testing. I have tested the official example. I, also, have a fork with several changes (including webview dependency update). But, still cannot reproduce it.

For me, it is working. So, the issue might be something external. I am using an emulator x64 API 33 Pixel 4 5.7-inch and a Samsung Galaxy A50 phone with API 30.

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (7 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0