Skip to content

feature/supa_avatar #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

0xharkirat
Copy link

What kind of change does this PR introduce?

  • ✨ Feature: Add SupaAvatar widget for displaying & editing user profile avatars.
  • πŸ“ Documentation: Include full usage and customization guide in README.
  • πŸ”§ Refactor: Restructure example app folders for clarity & modularity.
  • 🚦 Routing: Add go_router with route redirection based on Supabase auth state.
  • πŸ› Bugfix
  • βœ… Test updates

What is the current behavior?

  • No reusable avatar upload component for Supabase users.
  • Example app has a flat and less scalable structure.
  • No route redirection based on user auth session.

What is the new behavior?

πŸ–ΌοΈ SupaAvatar Widget

  • Readonly & editable avatar display
  • Upload, override, and delete from Supabase Storage
  • Customizable metadata key (avatar_url by default)
  • Cache-busting for real-time UI updates
  • Bottom sheet for picking or removing avatar
  • Configurable design via props

avatar-demo

πŸ—‚οΈ Refactored Folder Structure of example app

Organized example app into:

lib/
└── src/
    β”œβ”€β”€ core/       # App config and shared constants
    β”‚   └── app_router.dart
    └── views/      # Screens: SignIn, Home, etc.

πŸ” Auth-Aware Routing

  • Redirects to /sign_in_up if user is signed out
  • Redirects to / if user is signed in

Additional context

Usage

SupaAvatar(
  radius: 48,
  isEditable: true,
  supabaseStoragePath: 'profile',
)

@0xharkirat
Copy link
Author

0xharkirat commented Apr 15, 2025

Added: Editor Type (modal or dialog),
Shows username or email initials while the image is loading using my own package ui_avatar,

Much more to come.

0415 (2)

@0xharkirat
Copy link
Author

fix the ui of avatar editor to clean & simple.

dialog modal
Simulator Screenshot - iPhone 15 Pro - 2025-04-15 at 14 56 50 Simulator Screenshot - iPhone 15 Pro - 2025-04-15 at 14 57 07

@0xharkirat
Copy link
Author

Hey Team, any comments or feedback? I am planning to build more flutter ui components for supabase, like firebase has for storage, database & many more.

@jwelmac
Copy link

jwelmac commented Jul 24, 2025

I love the changes you made here.
It really adds to the functionality of the Auth UI

@0xharkirat
Copy link
Author

I love the changes you made here. It really adds to the functionality of the Auth UI

Yeah. I wanted to create more UI features for supabase. I was very excited when I started working on it but no one replied for 3 months & I got disappointed. But this morning I saw this comment & really made my day. Kindly let me know if I should work on more UI features for flutter sdk?

@jwelmac
Copy link

jwelmac commented Jul 25, 2025

Its a pleasure my brother.

I think it would be great if you could do that.

I am not sure what is happening in supabase_community as I currently have two open PRs in the mock_supabase_http_client package since March.
supabase-community/mock_supabase_http_client#20
supabase-community/mock_supabase_http_client#22

It can get disappointing when you are trying to help and then no response.

If you are up for it, we can create a fork to maintain and grow. If this package starts to get maintained regularly once again we can always merge back into the main repository.
But, in that way we can help the community at large while the supabase_community maintainers tackle the issues they deem higher priority.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants