Flutter Contacts App

main.dart

import 'package:flutter/material.dart';

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

// Hello world with material design
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Login App',
        home: Scaffold(
          appBar: AppBar(
            title: Text("Login"),
          ),
          body: ContactList(contacts)
        )
    );
  }
}

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

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

// List of contacts variable
List<Contact> contacts = [
  Contact("Samuel Jr.", "Berkoh"),
  Contact("Ivy", "Barley")
];

class ContactListItem extends StatelessWidget {

  // Contact item
  final Contact contact;

  // Constructor
  ContactListItem(this.contact);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {},
      leading: CircleAvatar(
        backgroundColor: Colors.blue,
        child: Text("${contact.firstName[0]}${contact.lastName[0]}",
        style: TextStyle(fontSize: 25.0),),
      ),
      title: Text("${contact.firstName} ${contact.lastName}",
          style: TextStyle(fontSize: 25.0)),
    );
  }
}

class ContactList extends StatelessWidget {

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

  ContactList(this.contacts);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.symmetric(vertical: 8.0),
      children: contacts.map((Contact contact) {
        return ContactListItem(contact);
      }).toList(),
    );
  }
}