Giter Club home page Giter Club logo

avatars's Introduction

avatars

Pub Version

A complete avatar widget with a priority & fallback system which allows you to specify multiple image sources like socials (Facebook, Instagram, GitHub, Gravatar) and custom providers (assets and network) or to use text (name initials or custom values).

The widget will automatically find the best available image/text source among those provided.

Avatars examples

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
   avatars: ^3.0.0

Usage

Basic - text

import 'package:avatars/avatars.dart';

//...
Avatar(name: 'Alberto Fecchi'),
Avatar(value: '89'),
//...

Using name property, the widget displays up to two initial letters found in the provided string. Using value property, the widget displays the exact provided string.

Avatar's background is calculated from a default list of Color(). You can use a custom set of colors using placeholderColors:

  //...
  Avatar(
    name: 'Alberto Fecchi',
    placeholderColors: [
      Color(0xFFFF0000),
      Color(0xFFFFFF00),
      //...
    ] 
  ),
  //...

Basic - images

An image source is an object used to generate, from local or remote sources, an ImageProvider() that will be used to show a picture inside the widget.

The sources list in Avatar() widget can contain multiple image sources: here, the priority & fallback system shows its power. If the first image source fails, the widget will try with the next one until a valid image source is found. If there are no sources available, the widget will use name or value data as seen in the previous example.

  //...
  Avatar(
    sources: [
      GitHubSource('luckyseven'),
      //...
    ]   
  ),
  //...

Here's the complete set of available image sources:

Socials

FacebookSource

Since Sep. 2020, to retrieve a user's profile picture by its ID from Facebook, you must make the request with an App Token or an Access Token. You can find more details here.

  FacebookSource(String facebookId, String appToken, [int size = 300])

GitHubSource

You can retrieve a GitHub profile image from user's username.

  GitHubSource(String username, [int size = 300])

GravatarSource

You can retrieve a Gravatar using the user e-mail address or its hash.

  GravatarSource(String identifier, [int size = 300])

InstagramSource

You can retrieve an Instagram profile picture using a username.

  InstagramSource(String username, [int size = 300])

Remote and local sources

NetworkSource

You can retrieve an image from any remote source.

  NetworkSource(String url)

GenericSource

GenericSource is generally used as a jolly image source: you can pass an ImageProvider() to show a picture.

  GenericSource(ImageProvider image)

Shape, dimension, border and color

You can pass an AvatarShape() object to the widget using the shape property. The AvatarShape class provides two helper methods: circle(double radius) and rectangle(double width, double height, [BorderRadius borderRadius = BorderRadius.zero]).

//...
Avatar(name: 'Alberto Fecchi', shape: AvatarShape.circle(50)),
Avatar(name: 'Alberto Fecchi', shape: AvatarShape.rectangle(100, 100, BorderRadius.all(new Radius.circular(20.0)))),
//...

Here's a list of other parameters which allows you to change the appearance of your avatars:

Parameter Type Default Description
backgroundColor Color Colors.transparent The background color used when the image is loading and/or when you load a transparent PNG.
border Border null You can pass a Border object here. Ex. Border.all(color: Colors.blue, width: 3).
elevation double 0 The standard Material elevation.
loader Widget Center(child: CircularProgressIndicator()) You can pass any custom Widget to replace the default loader.
margin EdgeInsetsGeometry null You can pass an EdgeInsetsGeometry to change default margins (inherited from Card).
shadowColor Color If null then the ambient CardTheme's shadowColor is used. If that's null too, then the overall theme's ThemeData.shadowColor (default black) is used. The color to paint the shadow below the avatar.
textStyle TextStyle TextStyle(color: Colors.white, fontSize: height / 2); The TextStyle used when your widget uses text values from name or value parameters.

Gestures

You can use onTap to pass a callback function:

//...
Avatar(
 onTap: () {
   print("Tap!")
 }),
)
//...

Cache

This package uses flutter_cache_manager as dependency. The useCache set to true enables cache for every remote image request, improving performances. The default cache expiration is set to 7 days.

//...
Avatar(
 useCache: true
)
//...

Suggestions, improvements, issues and more

Have you used this package in your project?

Say hello with a tweet!

Wanna improve this package?

The library source code lives inside the demo project on GitHub. Fork it and work! ;)

Need support?

Feel free to contact me at [email protected] or just open an issue on the official repository on GitHub.

License

MIT License - Copyright (c) Alberto Fecchi

Full license here

avatars's People

Contributors

farox7 avatar luckyseven avatar wahdanz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.