How to use single button for different functionality in FLUTTER?-CodePudding

I have made an Elevated Button for a screen, but I want the same button for another screen, but I want to change its properties for the other screen, e.g its COLOR, its TEXT, its FUNCTIONALITY. Although I have made another class for that, I'm lacking knowledge for Functionality purposes.

 ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: Size(500,70),
                primary: Colors.white12,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),),
              ),

              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ThirdScreen()),
                );
              },

              child: Text('Log in',style: TextStyle(fontSize: 30.0),),

            )

CodePudding user response：

You can create Custom widget(including necessary parameters) that will return your customized ElevatedButton and used this widget in replace of ElevatedButton.

class MyElevatedButton extends StatelessWidget {
  const MyElevatedButton({
    Key? key,
    required this.text,
    required this.onPressed,
    required this.color,
  }) : super(key: key);

  final String text;
  final VoidCallback onPressed;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        minimumSize: const Size(500, 70),
        primary: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
      onPressed: onPressed,
      child: Text(
        text,
        style: TextStyle(fontSize: 30.0),
      ),
    );
  }
}

And use like

MyElevatedButton(
  onPressed: () {},
  color: Colors.green,
  text: "Log in",
)

Another option is providing elevatedButtonTheme on MaterialApp

return MaterialApp(
    theme: Theme.of(context).copyWith(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
            //..
            ),
      ),
    ),

CodePudding user response：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // A widget which will be started on application startup
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: CustomButton(
            color: Colors.white12,
            text: 'Log in',
            function: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => const SecondScreen()));
            },
          ),
        ),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  CustomButton({
    Key? key,
    required Color color,
    required String text,
    required VoidCallback function,
  }) : super(key: key);

  late final Color color;
  late final String text;
  late final VoidCallback function;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: function,
      style: ElevatedButton.styleFrom(
        minimumSize: Size(500, 70),
        primary: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
      child: Text(text),
    );
  }
}

CodePudding user response：

Create a Widget like this and use anywhere you want:

class MyButton extends StatelessWidget {
  final Color color;
  final Widget text;
  final Function onTap;

  const MyButton({
    Key? key,
    required this.color,
    required this.text,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => onTap(),
      style: ElevatedButton.styleFrom(
        primary: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
      child: text,
    );
  }
}

CodePudding user response：

firs you have to declaring a function-type field to button onTap call back in your class before the class name

typedef OnButtonClick = Function();

after that inside your class you have to create a static method which return a elevated button as widget with input parameters as you want, like color title etc... and also OnButtonClick call back which created at first

class Utilities {
  static Widget myButton(OnButtonClick onTap, Color buttonColor, String title) {
    return ElevatedButton(
        onPressed: onTap,
        style: ElevatedButton.styleFrom(primary: buttonColor),
        child: Text(title));
     }
  }

now you can use this button anywhere you would like with different parameters and functionality

for example i have use it for navigate between to screens.

    class FirstScreen extends StatelessWidget {
      const FirstScreen({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Utilities.myButton(
                () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const SecondScreen())),
                Colors.blue,
                "move to second page"),
          ),
        );
      }
    }

    class SecondScreen extends StatelessWidget {
      const SecondScreen({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Utilities.myButton(
                () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const FirstScreen())),
                Colors.red,
                "back to first page"),
          ),
        );
      }
    }

full code :

   typedef OnButtonClick = Function();

    class Utilities {
      static Widget myButton(OnButtonClick onTap, Color buttonColor, String title) {
        return ElevatedButton(
            onPressed: onTap,
            style: ElevatedButton.styleFrom(primary: buttonColor),
            child: Text(title));
      }
    }


    class FirstScreen extends StatelessWidget {
      const FirstScreen({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Utilities.myButton(
                () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const SecondScreen())),
                Colors.blue,
                "move to second page"),
          ),
        );
      }
    }

    class SecondScreen extends StatelessWidget {
      const SecondScreen({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Utilities.myButton(
                () => Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const FirstScreen())),
                Colors.red,
                "back to first page"),
          ),
        );
      }
    }