A well detailed implementation and usage of named routes in flutter using a color app.

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Color App Demo',
    initialRoute: '/',
    routes: {
      // When navigating to the "/" route, build the RedScreen widget.
      '/': (context) => RedScreen(),
      // When navigating to the "/second" route, build the greenScreen widget.
      '/green': (context) => GreenScreen(),
      // When navigating to the "/" route, build the blueScreen widget.
      '/blue': (context) => BlueScreen(),
      // When navigating to the "/second" route, build the yellowScreen widget.
      '/yellow': (context) => YellowScreen(),
    },
  ));
}

class RedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: Text('RED SCREEN'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('CLICK TO CHANGE COLOR'),
          onPressed: () {
            // Navigate to the green screen using a named route.
            Navigator.pushNamed(context, '/green');
          },
        ),
      ),
    );
  }
}

class GreenScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: Text("GREEN SCREEN"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {

                Navigator.pushNamed(context, '/blue');
              },
              child: Text('CLICK TO CHANGE COLOR'),
            ),
            RaisedButton(
              onPressed: () {

                Navigator.pop(context);
              },
              child: Text('CLICK TO GO BACK TO RED'),
            ),
          ],
        ),
      ),
    );
  }
}




class BlueScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("BLUE SCREEN"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {

                Navigator.pushNamed(context, '/yellow');
              },
              child: Text('CLICK TO CHANGE COLOR'),
            ),
            RaisedButton(
              onPressed: () {

                Navigator.pop(context);
              },
              child: Text('CLICK TO GO BACK TO GREEN SCREEN'),
            ),
          ],
        ),
      ),
    );
  }
}


class YellowScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      appBar: AppBar(
        title: Text("YELLOW SCREEN"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to the blue screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: Text('GO BACK TO BLUE SCREEN!'),
        ),
      ),
    );
  }
}