I have built a paywall component in flutterflow - But the payment button enlarges itself while loading the revenuecat subscription plans. Here is the iOS screenshot of the iOS button before pressed and iOS button after pressed
Below is the code that I have for my widget. How can i overcome the issue?
import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_util.dart';
import '../flutter_flow/flutter_flow_widgets.dart';
import '../flutter_flow/custom_functions.dart' as functions;
import '../flutter_flow/revenue_cat_util.dart' as revenue_cat;
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'paywall_model.dart';
export 'paywall_model.dart';
class PaywallWidget extends StatefulWidget {
const PaywallWidget({Key? key}) : super(key: key);
@override
_PaywallWidgetState createState() => _PaywallWidgetState();
}
class _PaywallWidgetState extends State<PaywallWidget> {
late PaywallModel _model;
@override
void setState(VoidCallback callback) {
super.setState(callback);
_model.onUpdate();
}
@override
void initState() {
super.initState();
_model = createModel(context, () => PaywallModel());
}
@override
void dispose() {
_model.maybeDispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
context.watch<FFAppState>();
return ClipRRect(
borderRadius: BorderRadius.circular(0.0),
child: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 1.0,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context).primaryBackground,
boxShadow: [
BoxShadow(
blurRadius: 4.0,
color: Color(0x33000000),
offset: Offset(0.0, 2.0),
)
],
borderRadius: BorderRadius.circular(0.0),
shape: BoxShape.rectangle,
border: Border.all(
color: FlutterFlowTheme.of(context).primaryBackground,
),
),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(12.0, 12.0, 12.0, 12.0),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: 500.0,
height: 187.1,
child: Stack(
children: [
Align(
alignment: AlignmentDirectional(-0.96, -0.18),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10.0, 30.0, 10.0, 30.0),
child: SelectionArea(
child: Text(
revenue_cat.offerings!.current!.lifetime!.product
.description,
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context).bodyText2,
)),
),
),
Align(
alignment: AlignmentDirectional(-0.96, -0.85),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10.0, 10.0, 10.0, 10.0),
child: SelectionArea(
child: AutoSizeText(
revenue_cat
.offerings!.current!.lifetime!.product.title
.maybeHandleOverflow(
maxChars: 100,
replacement: '…',
),
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.subtitle1
.override(
fontFamily: 'AvernirNextLTPro',
color: FlutterFlowTheme.of(context).primaryText,
useGoogleFonts: false,
),
)),
),
),
Align(
alignment: AlignmentDirectional(0.0, 0.0),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10.0, 80.0, 10.0, 0.0),
child: FFButtonWidget(
onPressed: () {
print('Button pressed ...');
},
text: functions.concatPriceString(revenue_cat
.offerings!
.current!
.lifetime!
.product
.priceString)!,
options: FFButtonOptions(
width: 300.0,
padding: EdgeInsetsDirectional.fromSTEB(
0.0, 20.0, 0.0, 20.0),
color: Color(0xFF485946),
textStyle:
FlutterFlowTheme.of(context).subtitle2.override(
fontFamily: 'AvernirNextLTPro',
color: Colors.white,
useGoogleFonts: false,
),
elevation: 2.0,
borderSide: BorderSide(
color: Colors.transparent,
width: 1.0,
),
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
],
),
),
],
),
),
),
);
}
}