Flutter Contacts App with Navigation

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

// String contactDetailsRoute = "/contact_details";

// Contact class
class Contact {
  String firstName;
  String lastName;

  Contact(this.firstName, [this.lastName]);
}

// Contacts variable with 3 contacts
List<Contact> contacts = [
  Contact("Samuel Jr.", "Berkoh"),
  Contact("Ivy", "Barley"),
  Contact("Philipa", "Sarfo")
];

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Contacts App',
        initialRoute: '/',
        routes: {
          // When navigating to the "/" route, build the FirstScreen widget.
          '/': (context) => ContactList(contacts),
          // When navigating to the "/contact_details" route, build the SecondScreen widget.
          // contactDetailsRoute: (context) => ContactDetails(),
        },
    );
  }
}

class ContactList extends StatelessWidget {

  // List variable to store list of contacts
  final List<Contact> contacts;

  ContactList(this.contacts);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
      ),
      body: ListView.builder(
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            onTap: () {
              /* Navigator.pushNamed(
                  context,
                  contactDetailsRoute,
                  arguments: contacts[index]); */

              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ContactDetails(contact: contacts[index]),
                ),
              );
            },
            leading: CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("${contacts[index].firstName[0]}${contacts[index].lastName[0]}",
                style: TextStyle(fontSize: 25.0),),
            ),
            title: Text("${contacts[index].firstName} ${contacts[index].lastName}",
                style: TextStyle(fontSize: 25.0)),
          );
        },
      ),
    );
  }
}

class ContactDetails extends StatelessWidget {

  final Contact contact;

  ContactDetails({@required this.contact});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${contact.firstName}, ${contact.lastName}"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Text("First name: ", style: TextStyle(fontSize: 30.0),),
                Text(
                    contact.firstName,
                    style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold)),
              ],
            ),
            Row(
              children: <Widget>[
                Text("Last name: ", style: TextStyle(fontSize: 30.0)),
                Text(contact.lastName,
                    style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold))
              ],
            )
          ],
        ),
      ),
    );
  }
}