Flutter : Page Route with IF Condition

We have learnt already about Navigation and Paging on previous lessons. Here let’s learn how to customize those MaterialPageRoute with condition. That is the Navigator.push screen destination is defined with condition.

You can do this with normal if condition. As per our need, we may need to change the screen destination if we press on a button or text.

int val = 1;

Here the value of ‘val’ is 1. So we are going to a button page route into First Page.

RaisedButton(
        child: Text("Go to Next page"),
        onPressed:() {
          if (val == 1) {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => FirstScreen()));
          }
        },
      ),

‘IF’ condition is lies under onPressed event (or any event).

If the value of ‘val’ is 2,

int val = 2;

So can make the page route into Second Page using ‘else if’ or ‘else’.

RaisedButton(
        child: Text("Go to Next page"),
        onPressed:() {
          if (val == 1) {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => FirstScreen()));
          }
          else{
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => SecondScreen()));
          }
        },
      ),

Full Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int val = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Screen"),
      ),
      body: RaisedButton(
        child: Text("Go to Next page"),
        onPressed:() {
          if (val == 1) {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => FirstScreen()));
          }
          else{
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => SecondScreen()));
          }
        },
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: RaisedButton(
        child: Text("Go back"),
        onPressed:() {
          Navigator.pop(context);
        },
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: RaisedButton(
        child: Text("Go back"),
        onPressed:() {
          Navigator.pop(context);
        },
      ),
    );
  }
}

Flutter : Page Route with IF Condition

Be First to Comment

Leave a Reply Cancel reply