Search code examples
flutterflutter-navigationflutter-widget

Flutter - Pass Navigating Widget Name Dynamically


I have created a Button Widget to avoid duplication of code as there are multiple buttons on the screen. Clicking on each button should take it to a different screen.

class ButtonWidget extends StatelessWidget {
  final buttonText;
  final destination;
  ButtonWidget({this.buttonText, this.destination});
  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            switch (destination) {
              case 'signUp':
               return SignUp();
               break;
              case 'signIn':
               return SignIn();
               break;
              case 'SignInGoogle':
               return SignInGoogle();
               break;
              default:
               return SignUp();
            }
          }));
        },
        child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              constraints: BoxConstraints(
                  minHeight: 6.5 * SizeConfig.heightMultiplier,
                  maxHeight: 7.9 * SizeConfig.heightMultiplier),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(4 * SizeConfig.heightMultiplier),
                ),
                color: AppTheme.topBarBackgroundColor,
              ),
              child: Center(child: Text(buttonText)),
            )));
  }
}

On Tap I want to navigate to the destination widget. But that doesn't seem to work. I am calling the ButtonWidget in following manner:

ButtonWidget(
   buttonText: Strings.signUp,
   destination: 'signUp',
)

Solution

  • Pass the widget instead of a name representation of it:

    class ButtonWidget extends StatelessWidget {
      final buttonText;
      final Widget destination;
      ButtonWidget({this.buttonText, this.destination});
      @override
      Widget build(BuildContext context) {
        return InkWell(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => destination
              ));
            },
            child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  constraints: BoxConstraints(
                      minHeight: 6.5 * SizeConfig.heightMultiplier,
                      maxHeight: 7.9 * SizeConfig.heightMultiplier),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                      Radius.circular(4 * SizeConfig.heightMultiplier),
                    ),
                    color: AppTheme.topBarBackgroundColor,
                  ),
                  child: Center(child: Text(buttonText)),
                )));
      }
    }
    

    Implementation:

    ButtonWidget(
       buttonText: Strings.signUp,
       destination: SignUp(),
    )