The Complete Guide to Flutter/

...

/

Adding Assets and Images

Adding Assets and Images

Learn to add assets and images to your app.

We'll cover the following...

Assets

In this lesson, we’ll learn how to add a little bit of flair to our app by making it visually appealing to your users. One way to do this is by adding images or customizing the app’s fonts.

An asset is any file bundled and deployed with our application and accessed at runtime. Assets can be in the following forms:

  • Static images, for example, logos and icons
  • Animations
  • Fonts
  • Configuration files
  • Static data, for example, text or JSON files

Add assets to the contact app below:

import 'package:flutter/material.dart';
import 'single_contact_screen.dart';
import 'new_contact_screen.dart';

class ContactListScreen extends StatelessWidget {
  const ContactListScreen({
    Key? key,
  }) : super(key: key);

  @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: 20,
                itemBuilder: (context, index) => Dismissible(
                  key: Key("$index"),
                  child: ListTile(
                    onLongPress: (){
                      showContactInfo(context);
                    },
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const SingleContactScreen()),
                      );
                    },
                    leading:  CircleAvatar(
                      		//TODO-2: Load image

                    ),
                    title: const Text(
                      "Ivy Walobwa",
                    ),
                    trailing: const 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: () {
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => const NewContactScreen()),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

showContactInfo(BuildContext context) {
  return showMenu(
      context: context,
      position: const RelativeRect.fromLTRB(100, 150, 30, 0),
      items: const <PopupMenuItem>[
        PopupMenuItem(
          child: Text("info 1"),
        ),
        PopupMenuItem(
          child: Text("info 2"),
        ),
      ]);
}
Contact app initial code
...