Button onPressed doesnt run the function

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

your onPressed should look like this:

    onPressed: () => pageNavigation(LoginPage()),

if you forget the () => the app navigates to the first route which is LoginPage here

Answer 2

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,
    );
  }
}