Search⌘ K
AI Features
Home
Courses
The Complete Guide to Flutter

Adding Interactivity

Explore how to enhance Flutter apps by adding interactivity with widgets such as GestureDetector, InkWell, and Dismissible. Understand navigation between screens and respond to user input through touch events to build responsive and dynamic user interfaces.

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.
...