パッケージ、リポジトリ、アプリカテゴリを検索

profile_photo のカバー
パッケージ詳細v1.0.3

profile_photo

バッジ付きのプロフィール写真を表示するためのシンプルなFlutterパッケージ

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
108
いいね数
13
Pub ポイント
160

パッケージをインストール

flutter pub add profile_photo

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

オプションのバッジ付きプロフィール写真を表示するように設計された軽量なFlutterパッケージです。アプリ内でのユーザーアバターの統合を簡素化し、さまざまな画像ソースをサポートし、クリーンでカスタマイズ可能なインターフェースを提供します。バッジ機能はステータス、通知、またはユーザー役割を示すのに最適です。Android、iOS、Web、macOS、Windows、Linuxなど、すべての主要プラットフォームで互換性があり、一貫した外観を保証します。チャットインターフェース、ユーザープロフィール、ソーシャル機能に最適です。

用途

  • ユーザーのプロフィールが表示されます
  • チャットインターフェース
  • ソーシャルメディアアプリ
  • 通知インジケーター
  • チームメンバー一覧

主な機能

  • バッジのサポート
  • クロスプラットフォーム互換性
  • シンプルな API
  • カスタマイズ可能なスタイル
  • 画像ソースの柔軟性
  • レスポンシブデザイン

適している対象

  • モバイルアプリ開発者
  • Webアプリケーション作成者
  • チャットアプリビルダー
  • ソーシャルネットワーキングプロジェクト
  • UI コンポーネントライブラリ

注意事項

  • 基本的なアバターのレンダリングに限定
  • 組み込みの画像キャッシュなし
  • 画像の読み込みエラーを手動で処理する必要があります
  • 大規模なアバターグリッドには最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

profile_photo

Creates a widget that was designed to be used to display a profile photo, but it could also be used in many other ways

Features

  • Ability to add a custom badge to the widget, could be used to display premium users for example
  • Will automatically figure out a users initals to display if no image is given, but a name is
  • ImageProvider as an image source to use either network or asset images
  • onTap and onLongPress call backs
  • Adjustable size
  • Adjustable corner radius
  • Adjustable outline width
  • Adjustable background and outline colors

Getting started

Add the dependency and add anywhere in widget tree

Usage

Minimum required code for a simple round photo (2nd example)

ProfilePhoto(
    totalWidth: 100,
    cornerRadius: 80,
    color: Colors.blue,
    image: const AssetImage('assets/test_profile_photo.jpg'),
),

More complicated example with initals shown, custom boarder and colors, and badge (3rd example)

ProfilePhoto(
    totalWidth: 200,
    cornerRadius: 25,
    color: Colors.blue,
    outlineColor: Colors.red,
    outlineWidth: 10,
    textPadding: 10,
    name: 'Brad Varnum',
    fontColor: Colors.white,
    nameDisplayOption: NameDisplayOptions.initials,
    fontWeight: FontWeight.w100,
    showName: true,
    image: const AssetImage('assets/test_profile_photo.jpg'),
    badgeAlignment: Alignment.bottomLeft,
    badgeSize: 60,
    badgeImage: const AssetImage('assets/star.png'),
    onTap: () {
        // open profile for example
    },
    onLongPress: () {
        // popup to message user for example
    },
),
example image

Additional information

  • Feel free to use as-is or fork and modify for what you need
  • If you find any issues, please create a issue in this repo
  • If you have any suggestions or feature requests, please create an issue
  • I made this mostly for fun, and explore the package creation process

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。