Search⌘ K
Home/
Courses/
The Complete Guide to Flutter

Adding Interactivity

Learn how to make a layout interactive by using interactive widgets.

We'll cover the following...

Previously, we learned how to create the layout for our contact app via non-interactive widgets. In this lesson, we’ll learn to add interactivity to the layout of the application with interactive widgets.

To use an interactive widget, we need to wrap it around a layout widget that responds to user input.

Adding a second screen

First, let’s add a second screen to the contact app. Run the application below:

import 'package:flutter/material.dart';
import 'single_contact_screen.dart';
class ContactListScreen extends StatefulWidget {
  const ContactListScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<ContactListScreen> createState() => _ContactListScreenState();
}

class _ContactListScreenState extends State<ContactListScreen> {
  List<String> contacts = List<String>.generate(20, (i) => "Ivy Walobwa");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Wrap(
                direction: Axis.vertical,
                children: [
                  Text(
                    "Contacts",
                    style: Theme.of(context)
                        .textTheme
                        .headline3!
                        .copyWith(color: Colors.black),
                  ),
                  Text("20 Contacts",
                      style: Theme.of(context)
                          .textTheme
                          .bodyText2!
                          .copyWith(color: Colors.black54)),
                ],
              ),
            ),
            Expanded(
              child: ListView.separated(
                itemCount: contacts.length,
                // TODO-5: Wrap ListTile with Dismissible
                itemBuilder: (context, index) =>   ListTile(
                    // TODO-2: Add Navigation below
                    leading: const CircleAvatar(
                      child: Text("IW"),
                    ),
                    title:  Text(
                     contacts[index],
                    ),
                    trailing: Icon(Icons.info_outline),
                  ),
                separatorBuilder: (BuildContext context, int index) =>
                const Divider(
                  height: 1,
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 1,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: "Phone"),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), label: "Contacts"),
          BottomNavigationBarItem(
              icon: Icon(Icons.star_border), label: "Favorites"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}
Contact app: Add layout of a second screen

The code does the following:

  • Creates two new files—contact_list_screen.dart and single_contact_screen.dart. The former contains the layout we built in the previous lesson.
  • Creates a new screen in the single_contact_screen.dart. We will view the second screen after adding some navigation.
...