super_profile_picture

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Super Profile Picture é um widget personalizável do Flutter projetado para exibir fotos de perfil com suporte a imagens e avatares de texto. Oferece estilos flexíveis, opções de formato e fallback dinâmico quando as imagens não estão disponíveis. Ideal para interfaces de usuário em aplicativos sociais, plataformas de bate-papo ou painéis, garantindo apresentação visual consistente em todos os dispositivos. O widget se integra perfeitamente em projetos Flutter e suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Perfil do usuário exibido
Interfaces de chat
Widgets do painel
Aplicativos de mídia social
Lista de membros da equipe

Principais recursos

Suporte a avatar de imagem e texto
Formas e tamanhos personalizáveis
Texto de fallback para imagens ausentes
Design agnóstico de plataforma
Integração fácil com o Flutter
Manuseio de layout responsivo

Indicado para

Desenvolvedores construindo aplicativos sociais
Designers de UI que precisam de avatares consistentes
Projetos que exigem compatibilidade entre plataformas
Aplicativos com perfis de usuário ou recursos de mensagens
Equipes que desejam componentes de avatar reutilizáveis

Considerações

Requer configuração de carregamento de imagem para URLs remotas
Limitado à funcionalidade básica do avatar
Nenhuma geração integrada de avatares a partir de nomes
Pode ser necessário estilização adicional para interfaces de usuário complexas
Depende de bibliotecas externas de carregamento de imagens

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

logo

version

A customizable Flutter widget for displaying profile pictures, supporting both image and text options. It will show label text in case the image is not provided or fails to load. You can use any image provider, such as NetworkImage, AssetImage, and more, to display the image.

Live Demo & Experiment Page

Live demo: Demo & Experiment site

Installation

i. Add the latest version of this package to your pubspec.yaml file, and run: 'dart pub get':

dependancies:
  super_profile_picture: ^1.0.0

ii. Import the package in your Flutter App and use it.

import 'package:super_profile_picture/super_profile_picture.dart';

Note

The background color will be set according to the first letter of the label. Customization of the background color is not currently supported but may be added in the future.

Code Sample

Default

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),

);

Max Label Length


SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    textDecorationProperties: TextDecorationProperties(
         maxLabelLength: 3,  
    ),
);

Empty Name / Blank

SuperProfilePicture(
    label: "",
    radius: 30,
);

With Border

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    border: Border.all(width: 6, color: Colors.blue),
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),
    border: Border.all(width: 6, color: Colors.blue),

);

Properties

label
radius
textDecorationProperties
- fontSize;
- maxLabelLength;
- useFittedBox;
- fontColor;
- fontWeight;
- letterSpacing;
- padding;
- fontStyle;
imageDecorationProperties
- frameBuilder;
- loadingBuilder;
- errorBuilder;
- semanticLabel;
- excludeFromSemantics;
- width;
- height;
- color;
- opacity;
- colorBlendMode;
- fit;
- alignment;
- repeat;
- centerSlice;
- matchTextDirection;
- gaplessPlayback;
- isAntiAlias;
- filterQuality;
border
borderRadius
image
clipBehavior

Future Tasks

Add customizable background color function.

Buscar pacotes, repositórios e categorias de apps

Instalar pacote