Button onPressed doesnt run the function - flutter

Question

I'm stuck in this part of the code.
I created a file for my welcome page and another for the button.
Creating the button was easy, the problem is in the onPressed part.
I created a function pageNavigation and I tried to call it in the onPressed part of the button.
pageNavigation(page) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page),
);
}
But the button and welcome page are in different files. WelcomePage class:
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Scaffold(
body:
Column(
children: [
Button(
height: height,
txt: 'Criar conta agora',
txtStyle: kWhiteButtonTextStyle,
buttonColor: Colors.transparent,
onPressed: pageNavigation(LoginPage());
),
Button(
height: height,
txt: 'Entrar',
txtStyle: kBlackButtonTextStyle,
buttonColor: kWhiteColor,
onPressed: pageNavitation(CreateAccountPage());
),
],
),
);
}
}
So, I created a function variable named onPressed and I called it in the onPressed button file. Button class:
class Button extends StatelessWidget implements WelcomePage {
const Button({
Key key,
#required this.height,
#required this.txt,
#required this.txtStyle,
#required this.buttonColor,
#required this.onPressed
}) : super(key: key);
final double height;
final String txt;
final TextStyle txtStyle;
final Color buttonColor;
final Function onPressed,
#override
Widget build(BuildContext context) {
return FlatButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
txt,
style: GoogleFonts.rubik(textStyle: txtStyle),
),
],
),
color: buttonColor,
padding: EdgeInsets.only(
top: height * 0.018,
bottom: height * 0.018,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: onPressed,
);
}
}
I think the error could be in the button class, but I don't know how to solve it.

Answer 1

When I test your code with a few modification, it works well.
Here is a full code app.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return WelcomePage();
}
}
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
pageNavigation() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Container()),
);
}
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: Column(
children: [
Button(
height: height,
txt: 'Criar conta agora',
buttonColor: Colors.transparent,
onPressed: pageNavigation),
Button(height: height, txt: 'Entrar', onPressed: pageNavigation),
],
),
);
}
}
class Button extends StatelessWidget implements WelcomePage {
const Button({
Key key,
#required this.height,
#required this.txt,
#required this.txtStyle,
#required this.buttonColor,
#required this.onPressed,
}) : super(key: key);
final double height;
final String txt;
final TextStyle txtStyle;
final Color buttonColor;
final Function onPressed;
#override
Widget build(BuildContext context) {
return FlatButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
txt,
),
],
),
color: buttonColor,
padding: EdgeInsets.only(
top: height * 0.018,
bottom: height * 0.018,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: onPressed,
);
}
}

Answer 2

your onPressed should look like this:
onPressed: () => pageNavigation(LoginPage()),
if you forget the () => the app navigates to the first route which is LoginPage here