How to fix the UI, to use this package

[fisforfaheem]

here is my current code for the UI:

`import 'package:beboro/core/utils/size_utils.dart'; import 'package:beboro/data/apiClient/stripe_send_to_backend.dart'; import 'package:beboro/presentation/home_page_screen/widgets/app_bar/custom_app_bar.dart'; import 'package:beboro/routes/app_routes.dart'; import 'package:flutter/material.dart'; import 'package:flutter_stripe/flutter_stripe.dart'; import 'package:get/get.dart';

import '../../core/utils/image_constant.dart'; import '../../widgets/app_bar/appbar_leading_iconbutton.dart'; import '../../widgets/app_bar/appbar_title.dart';

class PaymentsScreen extends StatefulWidget { final int rentRequestId; const PaymentsScreen({super.key, required this.rentRequestId}); static CardFieldInputDetails? cardFieldInputDetails;

static Future createPaymentMethod(int rentRequestId) async { print('Creating Payment Method');

if (cardFieldInputDetails != null && cardFieldInputDetails!.complete) {
  try {
    final paymentMethod = await Stripe.instance.createPaymentMethod(
      params: const PaymentMethodParams.card(
        paymentMethodData: PaymentMethodData(),
      ),
    );

    // Send paymentMethod.id to your backend
    print('Payment Method ID: ${paymentMethod.id}');
    // print('Payment Method: ${paymentMethod.toJson().toString()}');
    await makePayment(
      rentRequestId: rentRequestId,
      isSaveCard: 0,
      paymentMethod: 2,
      cardToken: 'token',
    ).then((value) async {
      await Future.delayed(const Duration(seconds: 3));
      Get.offAllNamed(AppRoutes.homePageScreen);
    });
  } catch (e) {
    print('Error creating payment method: $e');
  }
} else {
  print('Card details are not complete');
}

}

@override _PaymentsScreenState createState() => _PaymentsScreenState(); }

class _PaymentsScreenState extends State { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: _buildAppBar(), body: Padding( padding: const EdgeInsets.all(20), child: ListView( children: [ CardField( onCardChanged: (cardFieldInputDetails) { setState(() { PaymentsScreen.cardFieldInputDetails = cardFieldInputDetails; }); }, ), const SizedBox(height: 20), // Add some spacing SizedBox( height: 50, width: double.infinity, child: ElevatedButton( onPressed: PaymentsScreen.cardFieldInputDetails?.complete == true ? () async { await PaymentsScreen.createPaymentMethod( widget.rentRequestId); } : null, style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), // Set the button's shape ), ), child: const Text('Proceed to Payment'), ), ), ], ), ), ), ); } }

/// Section Widget PreferredSizeWidget _buildAppBar() { return CustomAppBar( leadingWidth: 43.h, leading: AppbarLeadingIconbutton( onTap: () { Get.back(); }, imagePath: ImageConstant.imgGroup17, margin: EdgeInsets.only( left: 16.h, top: 11.v, bottom: 11.v, ), ), centerTitle: true, title: AppbarTitle( // text: "msg_active_past_rentals".tr, text: "Stripe Payment", centerTitle: true, ), actions: const [ // AppbarTrailingImage( // imagePath: ImageConstant.imgFrame797, // margin: EdgeInsets.fromLTRB(9.h, 5.v, 9.h, 9.v), // ), ], styleType: Style.bgShadow, ); } `

[vatsaltanna-simformsolutions]

What's the issue ?

[fisforfaheem]

Ui options needed

[vatsaltanna-simformsolutions]

which ui options? can you please provide more details ?