CODEWITHSUNDEEP
flutterdart
Flite
Flite

Reputation: 59

Creating TextButton from different file in Flutter

I'm currently developing an apps in Flutter (dart) and facing some problem here.

I'm trying to make a button from a single file so I don't have to copy and paste the code everytime I need to make a button (instead, I just need to call the file I created and pass some arguments into it).

Here's the button file I created:

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
        onPressed: () {
          var press;
          press = press;
        },
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

and I'm calling it like this

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                
              ),

My problem is that I can't pass the Function press to do something. For example:

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                press: {Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );}
              ),

However, when I'm using the original code to make the button itself (without calling the file), I can do this just fine (like this:

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
        onPressed: () {
          Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );
        },
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Can anyone help me please? Thanks in advance! :)

(p.s. I'm using VSCode if that helps)

Upvotes: 0

Views: 449

Answers (1)

Ibrahim Ali
Ibrahim Ali

Reputation: 2503

Make this changes

...
decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
       // Change to this..
        onPressed: press,
        child: Text(
          descButton,
          style: TextStyle(
   ...

And when calling it

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                //Add a closed bracket 
                press: () {Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );}
              ),

Upvotes: 1

Related Questions