sakshi angre

Posted on May 18

How I Built and Published My First Flutter Package on pub.dev

#flutter #opensource #showdev #tutorial

Building apps is exciting, but creating something reusable for other developers feels completely different.

Recently, I built and published my first Flutter package called Profile Lift — a customizable profile UI package with editable profile support, settings screen, theme customization, image picker support, and smooth animations.

In this article, I’ll share the complete journey from idea to publishing it on profile_lift on pub.dev 🚀

Why I Built Profile Lift

Almost every mobile app has a profile screen.

Whether it’s:

social media apps
e-commerce apps
portfolio apps
SaaS platforms
productivity apps

developers often rebuild the same profile UI from scratch.

I wanted to create a reusable Flutter package that developers could plug directly into their projects with minimal setup.

That idea became Profile Lift.

Features

Profile Lift currently includes:

✅ Editable profile screen
✅ Settings screen
✅ Light & dark mode
✅ Theme customization
✅ Profile image picker
✅ Live image preview
✅ Smooth fade & slide animations
✅ Logout confirmation dialog
✅ Reusable callback architecture

Screenshots

Installation

Add this to your pubspec.yaml:

dependencies:
  profile_lift: ^0.0.1

Then run:

flutter pub get

Usage Example

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      home: ProfileLiftScreen(
        editable: true,

        profile: const ProfileLiftModel(
          name: "Christopher Baker",
          email: "christopher@gmail.com",
          phone: "+1 9876543210",
          address: "New York, USA",
          bio: "Flutter developer passionate about UI.",
          imageUrl: "https://i.pravatar.cc/300?img=12",
        ),

        onSaveProfile: (updatedProfile) {
          print(updatedProfile.name);
        },

        onSettings: () {},

        onLogout: () {},
      ),
    );
  }
}

Challenges I Faced

While building and publishing the package, I faced several issues:

Flutter package structure confusion
README formatting problems
Screenshot linking issues
pub.dev publish warnings
Theme management
Animation integration
Git ignored files during publishing

One thing I learned is that documentation matters a lot in open-source development.

Publishing on pub.dev

Publishing involved multiple steps:

Creating package structure
Writing README.md
Adding screenshots
Creating CHANGELOG.md
Adding LICENSE
Uploading to GitHub
Running:

flutter pub publish --dry-run

Finally publishing to pub.dev

Seeing the package go live was an amazing feeling.

What I Learned

This project taught me:

Flutter package architecture
reusable UI design
pub.dev publishing workflow
open-source practices
documentation writing
package maintenance basics

More importantly, it changed how I think about development — from just building apps to building reusable developer tools.

Future Improvements

I plan to add:

Glassmorphism UI
Responsive web support
More profile layouts
Gradient themes
Social media section
Premium animations
Firebase helper integration

Final Thoughts

Publishing my first Flutter package was a huge learning experience.

If you’re thinking about building your own Flutter package, start small and focus on solving a real problem for developers.

You can check out the package here:

⭐ GitHub Repository:
https://github.com/Sakshi-2508/profile_lift

📦 pub.dev Package:
https://pub.dev/packages/profile_lift

Thanks for reading 🚀

DEV Community