ff_contact_avatar 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 80

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

FFContactAvatarModel #

The Model object is provided to encapsulate the creation of data in a way that is compatible with the easy creation of FFContactAvatar and related List Widgets.

The following parameters are available:

  final String name;        // Name value 
  final String message;     // Message value
  final Image image;        // Optional image value
  final bool showBadge;     // Bool value (should notification badge be displayed, default = false
  final VoidCallback onTap; // onTap handler (void callback)

FFContactAvatar Attributes #

  • theme: A FFContactAvatarTheme theme object
  • image: An Image object for the image to display in the CircleAvatar
  • name: A String of the contact name to display (will also be used to create the initials if no image is provided, with a maximum initials length of 2)
  • message: A string of the message to display
  • showBadge: A bool value indicating if the notification badge should be displayed (default = false)
  • onTap: A void callback function triggered when the circle avatar is tapped
  • model: A FFContactAvatarModel object which can be used to provide the name, message, image and showBadge options instead of specifying individually.

FFContactAvatarList Attributes #

  • models: A List
  • scrollDirection: An Axis attribute which specifies the direction of the ListView (e.g. Axis.horizontal)
  • theme: An FFContactAvatarTheme object which can specific the theme of ALL items in the ListView
  • onSelectAvatar: A callback function (which requires a int type index parameter) that will be called when a child of the ListView is tapped, with the index representing the zero-based index of the selected item.

FFContactAvatarList Convenience Functions #

The static function fromModelList can be called to easily create a ListView using standard theme and options...

static StatelessWidget fromModelList(
    List<FFContactAvatarModel> models, {
    Axis scrollDirection = Axis.horizontal,
    FFContactAvatarListSelected onSelectAvatar,
  })

The static function fromModelListWithBuilder can be called to easily create a ListViewBuilder using standard theme and options...

static StatelessWidget fromModelListWithBuilder(
    List<FFContactAvatarModel> models, {
    Axis scrollDirection = Axis.horizontal,
    FFContactAvatarListSelected onSelectAvatar,
    @required BuildContext context,
  })

[0.1.1] - 30-NOV-2019 #

  • Added FFContactAvatarModel as a class to pass in all data attributes
  • Support instantiating FFContactAvatar using a model class (optional instead of passing individual elements)
  • Added FFContactAvatarList to support creating ListView for a list of model objects
  • Added onTap to provide a callback function to FFContactAvatar

[0.1.0] - 27-NOV-2019 #

  • First release of FFContactAvatar

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:ff_contact_avatar/ff_contact_avatar.dart';

import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFContactAvatar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'FFContactAvatar Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Models is a short, manually created set of data, used to demonstrate
  // a ListView WITHOUT a ListView.builder
  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,
    ),
  ];

  // longList is populated with random data, used to demonstrate use WITH a ListView.builder
  final List<FFContactAvatarModel> longList = [];

  @override
  Widget build(BuildContext context) {
    // Create a 200 long list of data using random word pairs
    generateWordPairs().take(200).forEach((pair) {
      longList.add(
        FFContactAvatarModel(
          name: pair.first + ' ' + pair.second,
          message: generateWordPairs().take(1).first.join(' '),
        ),
      );
    });

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // --------- SECTION 1
            // Manually output 2 x avatars
            Text('Sample using Individual Avatars'),
            FFContactAvatar(
              name: 'Ed Roberts',
              message: 'He\'s a man',
              showBadge: true,
              theme: FFContactAvatarTheme(
                backgroundColor: Colors.blueAccent,
                avatarElevation: 20.0,
              ),
            ),
            SizedBox(height: 10),
            FFContactAvatar(
              name: 'Mr Ed',
              message: 'He\'s a horse',
              image: Image.network(
                  'https://upload.wikimedia.org/wikipedia/commons/8/81/Mister_Ed.JPG'),
              showBadge: true,
            ),
            SizedBox(
              height: 1,
              child: Container(
                color: Colors.grey,
              ),
            ),
            // --------------- SECTION 2
            // 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,
              ),
            ),
            // --------------- SECTION 3
            // 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.');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  ff_contact_avatar: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:ff_contact_avatar/ff_contact_avatar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • ff_contact_avatar that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test