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 ?