Giter VIP home page Giter VIP logo

flutter-navigation-routing-sample's Introduction

Flutter-Navigation-Routing-Sample

A demo app to demonstrate navigation and routing between different screens in flutter app.

Create dynamic RouteGenerator Class

import 'package:flutter/material.dart';
import 'package:flutternavigationsample/first_screen.dart';
import 'package:flutternavigationsample/second_screen.dart';

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/FirstScreen':
        return MaterialPageRoute(builder: (_) => FirstScreen());
      case '/SecondScreen':
        return MaterialPageRoute(builder: (_) => SecondScreen());
      default:
      // If there is no such named route in the switch statement, e.g. /third
        return _errorRoute();
    }
  }

  static Route<dynamic> _errorRoute() {
    return MaterialPageRoute(builder: (_) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Error'),
        ),
        body: Center(
          child: Text('ERROR'),
        ),
      );
    });
  }
}

Integrate RouteGenerator Class in main.dart file

import 'package:flutter/material.dart';
import 'package:flutternavigationsample/first_screen.dart';
import 'package:flutternavigationsample/route_generator.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

Navigate from First Screen to Second Screen

Navigator.pushNamed(context, "/SecondScreen");

Pass arguments Between Screens

Set argumants in first screen

List<String> playerNames = ["Cristiano Ronaldo, Lional Messi"];
Navigator.pushNamed(context, "/SecondScreen", arguments: playerNames);

Pass arguments in RouteGenerator class

static Route<dynamic> generateRoute(RouteSettings settings) {
    // Getting arguments passed in while calling Navigator.pushNamed
    final args = settings.arguments;

    switch (settings.name) {
      case '/FirstScreen':
        return MaterialPageRoute(builder: (_) => FirstScreen());
      case '/SecondScreen':
      // Validation of correct data type
        if (args is List<String>) {
          return MaterialPageRoute(
            builder: (_) => SecondScreen(
              listPlayerNames: args,
            ),
          );
        }
        // If args is not of the correct type, return an error page.
        // You can also throw an exception while in development.
        return _errorRoute();
      default:
      // If there is no such named route in the switch statement, e.g. /third
        return _errorRoute();
    }
  }

Get arguments in Second Screen

List<String> listPlayerNames;
SecondScreen({this.listPlayerNames});

Return data from Second Screen to First Screen with Pop

Make changes in Second Screen

Navigator.pop(context,playerName);

Make changes in First Screen

displayResult(BuildContext context, List<String> playerNames) async{
    final getSelectedPlayerName = await Navigator.pushNamed(context, "/SecondScreen", arguments: playerNames);
    print(getSelectedPlayerName.toString());
}

flutter-navigation-routing-sample's People

Contributors

djshah17 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

tindang1205

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.