I am developing a mobile app and currently working on the onboarding screen, which consists of 3 introductory screens. The skip button on my onboarding screen is not responding at all. I have tried several solutions, including wrapping the button with different widgets (Container, TextButton, GestureDetector), but none of them have resolved the issue.
Here is my code:
import 'package:dots_indicator/dots_indicator.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hr_app/resources/String_manager.dart';
import 'package:hr_app/resources/color_manager.dart';
import 'package:hr_app/resources/values_manager.dart';
import 'package:hr_app/view/screens/login_view/loginScreenView.dart';
import 'package:hr_app/view/screens/onboarding_view/pageParts/PageView.dart';
import '../../../resources/Font_Manager.dart';
import '../../../resources/size_config.dart';
import '../../common/CustomButton.dart';
class onBoardingScreen extends StatefulWidget {
const onBoardingScreen({super.key});
@override
State<onBoardingScreen> createState() => _onBoardingScreenState();
}
class _onBoardingScreenState extends State<onBoardingScreen> {
PageController? controller;
@override
void initState() {
controller = PageController(initialPage: 0) ..addListener(() {
setState(() {
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
top: SizeConfig.defaultSize! * 7,
right: AppSize.s40,
child: Opacity(
opacity: (controller!.hasClients) && (controller!.page == 2) ? 0.0 : 1.0,
child: TextButton(
onPressed: () {
print("skip button has been clicked");
// Get.to(()=> const LogScreen());
},
child: Text(
StringManager.onBoardingPageSkip,
style: TextStyle(
fontSize: FontSize.s14,
color: ColorManager.primaryColor,
),
softWrap: false,
),
),
),
),
Positioned(
left: 0, right: 0,
bottom: SizeConfig.defaultSize! * 20,
child: DotsIndicator(
dotsCount: 3,
position: (controller!.hasClients ? controller!.page! : 0).toInt(),
decorator: DotsDecorator(
shape: CircleBorder(
side: BorderSide(color: ColorManager.primaryColorDark, width: 1.5, style: BorderStyle.solid),
),
color: Colors.transparent,
activeColor: ColorManager.primaryTextColor,
),
),
),
// specify the height here
Page_view(controller),
Positioned(
left: SizeConfig.defaultSize! * 10,
right: SizeConfig.defaultSize! * 10,
bottom: SizeConfig.defaultSize! * 10,
child: CustomGenralButton(
text: (controller!.hasClients) && (controller!.page == 2)
? StringManager.onBoardingPageGetStarted
: StringManager.onBoardingPageNext,
onTap: () {
// print("button has been clicked");
if (controller!.page != 2) {
controller!.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeIn,
);
} else if (controller!.page! == 2) {
Get.to(() => const LogScreen());
}
},
),
)
],
),
);
}
}
What I’ve Tried
Wrapping the skip button in a Container
Using TextButton instead of GestureDetector
Using GestureDetector for the skip button
None of these attempts have made the skip button responsive. The button appears on the screen, but tapping it does not trigger any action.
Question
What could be causing the skip button to be unresponsive, and how can I fix it? Any help would be greatly appreciated!