Based in the work of 55Build credits https://github.com/55Builds/Flutter-FFContactAvatar

ff_contact_avatar #

A highly configurable Column widget for displaying a contact avatar with name and short message. Library also includes the ability the create a ListView using the FFContactAvatarList Widget or using the convenience functions fromModelList (to create a ListView directly, suited to a small number or items) and fromModelListWithBuilder (to create a ListView using the .builder approach, suited to a large number of items).

Add dependency #

dependencies:
  ff_contact_avatar: ^0.1.1

Basic use (Single Avatar item) #

To manually configure each item, simply create FFContactAvatar objects using the approach below...

import 'package:flutter/material.dart';
import 'package:ff_contact_avatar/ff_contact_avatar.dart';
...
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FFContactAvatar(
              name: 'Ed Roberts',
              message: 'He\'s a man',
              showBadge: true,
            ),
            SizedBox(height: 10),
            FFContactAvatar(
              name: 'Mr Ed',
              message: 'He\'s a horse',
              image: Image.network(
                  '<URL of file here or swap for Image.asset(...)'),
              showBadge: true,
            ),
          ],
        ),
      ),
    );

Basic use with Theme #

To use a specific theme for each item, specifying it using the inline option below...

...
            FFContactAvatar(
              name: 'Ed Roberts',
              message: 'He\'s a man',
              showBadge: true,
              theme: FFContactAvatarTheme(
                backgroundColor: Colors.blueAccent,
                avatarElevation: 20.0,
              ),
            ),
...

Simple ListView creation #

If you need a list for only a small number of items, it is recommended to create a list of FFContactAvatarModel objects to store the data, before creating the ListView directly from the list of models...

...
final List<FFContactAvatarModel> models = [
    FFContactAvatarModel(
      name: 'Ed Roberts',
      message: 'He\s a man',
      showBadge: true,
    ),
    FFContactAvatarModel(
      name: 'Mr Ed',
      message: 'He\s a horse',
      showBadge: false,
      image: Image.network(
          'https://upload.wikimedia.org/wikipedia/commons/8/81/Mister_Ed.JPG'),
    ),
    FFContactAvatarModel(
      name: 'Mrs Roberts',
      message: 'Ed\'s Wife',
    ),
    FFContactAvatarModel(
      name: 'Mrs Horse',
      message: 'Also Ed\'s Wife',
      showBadge: true,
    ),
  ];
...
return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Output a ListView using the manual data set (NO builder)
            Text('Sample using full ListView'),
            Expanded(
              child: FFContactAvatarList.fromModelList(
                models,
                scrollDirection: Axis.horizontal,
                onSelectAvatar: (index) {
                  print('Index ' + index.toString() + ' selected.');
                },
              ),
            ),
            SizedBox(
              height: 1,
              child: Container(
                color: Colors.grey,
              ),
            ),
          ],
        ),
      ),
    );
...

Creating a ListView Builder #

Using ListView.builder approach is recommended when you need to display a large number of items in a ListView. This approach allows the builder to handle displaying only those items that need to be visible to the user, deriving better performance.

//
// Create the list of data as before ... it just needs to be a List<FFContactAvatarModel> object
//
return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Output a ListView using the .builder approach (using long list of generated data)
            Text('Sample using ListView.Builder'),
            Expanded(
              child: FFContactAvatarList.fromModelListWithBuilder(
                longList,
                context: context,
                scrollDirection: Axis.horizontal,
                onSelectAvatar: (index) {
                  print('Index ' + index.toString() + ' selected.');
                },
              ),
            ),
          ],
        ),
      ),
    );

Theme #

The avatar has a Theme class which can be used to define the majority of appearance settings for the avatar.

backgroundColor: The background color for the CircleAvatar when initials are being displayed (i.e. no image) (default = blueGrey)
foregroundColor: The color to use for the text of initials (default = white)
badgeColor: The color to use for the notification badge circle (default = red)
avatarRadius: The radius of the CircleAvatar widget (default = 31)
initialsTextStyle: The default text style for initials (default = bold, 26pt with 1.4 letter spacing)
nameTextStyle: The default text style for the name (default = bold, 13pt)
messageTextStyle: The default text style for the message (default = normal, 11pt)
verticalPadding: The space to include between each vertical component (default = 2.0)
avatarElevation: The elevation to be used for drop shadow effect (default = 4.0)
itemExtent: The extent (cross-axis width/height) for each item (only applies to ListView) (default = 80)
listPadding: The padding (as an EdgeInsets object) to use in the ListView (default = EdgeInsets.all(16.0))