Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to change a button text in a stateless widget in fluttter dynamically

I want to change my button text when the pageview gets to the last page from "Next" to "Get Started", Using get so I don’t have to use stateful widgets. Please I’d love any help

class OnBoardingButton extends StatelessWidget {
  const OnBoardingButton({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final dark = MHelperFunctions.isDarkMode(context);
    final currentPageIndex = 0.obs;

    return Positioned(
        bottom: MDeviceUtils.getBottomNavBarHeight(),
        right: MSizes.lg,
        child: ElevatedButton(
            onPressed: () => OnBoardingController.instance.nextPage(),
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
              backgroundColor: dark ? MColors.white : MColors.primary,
            ),
            child: Row(
              children: [
                Text(
                  currentPageIndex.value == 2 ? 'Get Started' : 'Next',
                  style: TextStyle(
                      color: dark ? MColors.primary : MColors.light,
                      fontSize: MSizes.fontSizeSm),
                ),
                SizedBox(width: MSizes.xs),
                Icon(
                  Icons.arrow_forward_ios_rounded,
                  size: MSizes.iconSm,
                  color: dark ? MColors.primary : MColors.light,
                ),
              ],
            )));
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved it, all I needed to do was add wrap the text widget so it handles the state for me.

    class OnBoardingButton extends StatelessWidget {
  const OnBoardingButton({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(OnBoardingController());
    final dark = MHelperFunctions.isDarkMode(context);

    return Positioned(
        bottom: MDeviceUtils.getBottomNavBarHeight(),
        right: MSizes.lg,
        child: ElevatedButton(
            onPressed: () => OnBoardingController.instance.nextPage(),
            style: ElevatedButton.styleFrom(
              side: BorderSide(style: BorderStyle.none),
              padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
              backgroundColor: dark ? MColors.light : MColors.primary,
            ),
            child: Row(
              children: [
               //wrapped the text widget with obx here to manage the state
                Obx(
                  () => Text(
                    controller.currentPageIndex.value == 2
                        ? 'Get Started'
                        : 'Skip',
                    style: TextStyle(
                        color: dark ? MColors.primary : MColors.light,
                        fontSize: MSizes.fontSizeSm),
                  ),
                ),
                SizedBox(width: MSizes.xs),
                Icon(
                  Iconsax.arrow_right_3,
                  size: MSizes.iconSm,
                  color: dark ? MColors.primary : MColors.light,
                ),
              ],
            )));
  }
}

  2. 0

    It can be possible to use the callback function to dynamically update the button text.

    Like that:-

    class OnBoardingButton extends StatelessWidget {
 const OnBoardingButton({
  super.key,
 });

@override
  Widget build(BuildContext context) {
  final dark = MHelperFunctions.isDarkMode(context);
  final PageController _pageController =OnBoardingController.instance.pageController;

return Positioned(
  bottom: MDeviceUtils.getBottomNavBarHeight(),
  right: MSizes.lg,
  child: ElevatedButton(
    onPressed: () => _onButtonPressed,
    style: ElevatedButton.styleFrom(
      padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
      backgroundColor: dark ? MColors.white : MColors.primary,
    ),
    child: Row(
      children: [
        Text(
          _shouldShowGetStarted() ? 'Get Started' : 'Next',
          style: TextStyle(
            color: dark ? MColors.primary : MColors.light,
            fontSize: MSizes.fontSizeSm,
          ),
        ),
        SizedBox(width: MSizes.xs),
        Icon(
          Icons.arrow_forward_ios_rounded,
          size: MSizes.iconSm,
          color: dark ? MColors.primary : MColors.light,
         ),
        ],
      ),
     ),
    );
   }

 bool _shouldShowGetStarted() {
final controller = OnBoardingController.instance;
if (controller != null) {
final totalPages = controller.totalPages;
final currentPageIndex = controller.currentPageIndex;

// Ensure both values are not null before performing the subtraction
if (totalPages != null && currentPageIndex != null) {
  return currentPageIndex == totalPages - 1;
 }
}
// Return a default value or handle the case when data is null
return false;
}


 void _onButtonPressed() {
 OnBoardingController.instance.nextPage();
 } 
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search