I am having difficulties resizing my modal popup. I have two modals:
- floating_verification_modal.dart
- floating_subscription_modal.dart
These files are responsible for the popups, and I also have the files that renders contents in the modal popups as follows:
- subscription_notice.dart
- verification_notice.dart (I will drop there respective code snippets later)
This is how the popup looks when triggered 
I want to show a picture just above the "complete your passport and id verification" text and also resize the modals to fit perfectly to the image and the text rendered.
NB: I have tried using padding, but it didn't work, I also tried using Container instead of SafeArea so I can have access to other size arguments but it looks like I'm not doing it right. I'll need help as this is a project I'm currently working on. Thank you :)
Below are the snippets.
floating_verification_model.dart
import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
class FloatingVerificationModal extends StatelessWidget {
final Widget child;
final Color? backgroundColor;
const FloatingVerificationModal(
{Key? key, required this.child, this.backgroundColor})
: super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
child: Material(
color: backgroundColor,
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(15),
child: child,
),
),
);
}
}
Future<T> showFloatingVerificationModalBottomSheet<T>({
required BuildContext context,
required WidgetBuilder builder,
Color? backgroundColor,
}) async {
final result = await showCustomModalBottomSheet(
isDismissible: true,
enableDrag: true,
context: context,
builder: builder,
containerWidget: (_, animation, child) => FloatingVerificationModal(
child: child,
),
expand: false);
return result;
}floating_subscription_model.dart
import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
class FloatingSubscriptionModal extends StatelessWidget {
final Widget child;
final Color? backgroundColor;
const FloatingSubscriptionModal(
{Key? key, required this.child, this.backgroundColor})
: super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Material(
color: backgroundColor,
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(12),
child: child,
),
),
);
}
}
Future<T> showFloatingSubscriptionModalBottomSheet<T>({
required BuildContext context,
required WidgetBuilder builder,
Color? backgroundColor,
}) async {
final result = await showCustomModalBottomSheet(
isDismissible: false,
enableDrag: false,
context: context,
builder: builder,
containerWidget: (_, animation, child) => FloatingSubscriptionModal(
child: child,
),
expand: false);
return result;
}subscription_notice.dart
class SubscriptionNotice extends StatelessWidget {
const SubscriptionNotice({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
ServicesController servicesController = Get.find();
var user =
UserModel.fromJson(jsonDecode(servicesController.userData.value)).user!;
return Material(
child: SafeArea(
top: false,
child: Column(
children: [
const SizedBox(
height: 20,
),
CardItem(
icon: SvgPicture.asset("assets/images/warning_icon.svg"),
content: RichText(
text: TextSpan(
children: user.userType == "player"
? [
TextSpan(
text:
"If you want to be seen by clubs or scouts , you need to subscribe to a plan.",
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode
? AppColors.textLigth
: AppColors.textDark,
fontFamily: "Avenir")),
const TextSpan(
text: " Click here",
style: TextStyle(
color: Color(0xffFF9432),
fontSize: 14,
fontWeight: FontWeight.w600,
fontFamily: "Avenir")),
TextSpan(
text: " to subscribe and enjoy all features!",
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode
? AppColors.textLigth
: AppColors.textDark,
fontFamily: "Avenir"))
]
: [
TextSpan(
text:
"If you would like to search & check profiles of players on our platform, you need to subscribe to a plan.",
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode
? AppColors.textLigth
: AppColors.textDark,
fontFamily: "Avenir")),
const TextSpan(
text: " Click here",
style: TextStyle(
color: Color(0xffFF9432),
fontSize: 14,
fontWeight: FontWeight.w600,
fontFamily: "Avenir")),
TextSpan(
text: " to subscribe and enjoy all features!",
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode
? AppColors.textLigth
: AppColors.textDark,
fontFamily: "Avenir"))
]),
),
onPressed: () {
TabRouting().pushScreen(context, const Services());
}),
],
),
),
);
}
}verification_notice.dart
class VerificationNotice extends StatelessWidget {
VerificationNotice({Key? key}) : super(key: key);
ServicesController servicesController = Get.find();
VerificationController verificationController = Get.find();
@override
Widget build(BuildContext context) {
var text = " before you can scout or exchange messages with a player";
if (UserModel.fromJson(jsonDecode(servicesController.userData.value))
.user!
.userType ==
'player' &&
servicesController.subscription.isEmpty) {
return Container();
}
if (UserModel.fromJson(jsonDecode(servicesController.userData.value))
.user!
.userType ==
'player') {
text = " before you can scout or exchange messages with a club official";
}
var content = TextSpan(children: [
TextSpan(
text: "Complete",
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode ? AppColors.textLigth : AppColors.textDark,
fontFamily: "Avenir")),
const TextSpan(
text: " your passport and ID verification",
style: TextStyle(
color: Color(0xffFF9432),
fontSize: 14,
fontWeight: FontWeight.w600,
fontFamily: "Avenir")),
TextSpan(
text: text,
style: TextStyle(
fontSize: 14,
color: Get.isDarkMode ? AppColors.textLigth : AppColors.textDark,
fontFamily: "Avenir"))
]);
if (verificationController.verificationData.isNotEmpty) {
var verificationData = VerificationDocsModel.fromJson(
jsonDecode(verificationController.verificationData.value));
if (verificationData.status == "pending") {
content = TextSpan(children: [
TextSpan(
text: "Your verification documents are under going",
style: TextStyle(
fontSize: 14,
color:
Get.isDarkMode ? AppColors.textLigth : AppColors.textDark,
fontFamily: "Avenir")),
const TextSpan(
text: " review",
style: TextStyle(
color: Color(0xffFF9432),
fontSize: 14,
fontWeight: FontWeight.w600,
fontFamily: "Avenir")),
]);
} else {
return Container();
}
}
return Column(
children: [
const SizedBox(
height: 20,
),
CardItem(
icon: SvgPicture.asset("assets/images/warning_icon.svg"),
content: RichText(
text: content,
),
onPressed: () {
if (verificationController.verificationData.isEmpty) {
TabRouting().pushScreen(context, const VerificationStepOne());
}
}),
],
);
}
}Appreciate if someone can advise. Thank you in advance!