Forem: sakshi angre

📸 Building Snap Picker — A Beautiful Animated Image Picker for Flutter

sakshi angre — Mon, 25 May 2026 10:45:27 +0000

📸 Building Snap Picker — A Beautiful Animated Image Picker for Flutter

Most Flutter image picker packages work…

But let’s be honest — most of them look outdated, basic, and boring.

So I decided to build something modern.

Introducing Snap Picker ✨

A beautiful animated image picker for Flutter with:

custom gallery UI
multi image selection
camera support
full screen image preview
upload flow
smooth interactions
modern premium design

🚀 Why I Built Snap Picker

I wanted an image picker that felt like:

Instagram
Snapchat
modern social apps

Instead of:

plain system UI
outdated design
poor UX

So I built a custom image picker experience completely in Flutter.

✨ Features

✅ Custom Gallery Picker
✅ Multi Image Selection
✅ Camera Support
✅ Full Screen Image Preview
✅ Swipe Between Images
✅ Zoom Support
✅ Upload Progress UI
✅ Remove Selected Images
✅ Draggable Bottom Sheet
✅ Smooth Animations
✅ Modern UI Design

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  snap_picker: ^0.0.1

Then run:

flutter pub get

⚡ Usage

Using Snap Picker is simple:

SnapPicker.show(
  context,
  allowMultiple: true,
  maxSelection: 5,
  onImagesSelected: (images) {
    print(images.length);
  },
);

🖼️ Beautiful Preview Grid

SnapPickerPreview(
  images: selectedImages,
  onRemove: removeImage,
)

Users can:

preview images
remove images
tap images for full screen view
zoom and swipe between images

🎨 The Goal

I didn’t want to create:

“just another image picker”

I wanted to create:

“an image picker developers actually enjoy using.”

🔥 What’s Coming Next

Future updates planned:

🎞️ Video Support
🫧 Gooey Animations
🔄 Reorder Images
📂 Album Selector
🌈 Glassmorphism UI
⚡ Faster Lazy Loading
🎨 Full Theme Customization

❤️ Final Thoughts

Building Snap Picker was such a fun experience because it combined:

Flutter animations
UI design
real-world UX

This package started as a small idea…
and slowly became a polished image picker experience.

If you’re building Flutter packages:
start small, focus on UI/UX, and keep improving version by version 🚀

⭐ Check out Snap Picker on pub.dev and GitHub:

📦 https://pub.dev/packages/snap_picker

💻 https://github.com/Sakshi-2508/snap_picker

🔗 Package

⭐ If you like the package, support it on pub.dev and GitHub.

Thanks for reading 💙

🫠 Building Squishy — Creating Beautiful Page Transitions in Flutter

sakshi angre — Mon, 25 May 2026 10:39:51 +0000

Flutter already provides smooth animations out of the box.
But when it comes to page transitions, most apps still use the same default slide animations.

I wanted something that felt:

softer
more interactive
visually satisfying
modern

Something that could give apps a unique personality.

That’s how Squishy was created 🚀

✨ What is Squishy?

Squishy is a Flutter package that provides modern organic page transitions with simple APIs.

Instead of boring default transitions, Squishy introduces effects like:

🫠 Blob transitions
🔥 Gooey liquid reveals
✨ Elastic bounce animations
🚀 Stretch/rubber transitions

The goal was simple:

Make navigation feel alive.

🧠 The Idea Behind It

Modern UI design is becoming more fluid and interactive.

Apps today are moving toward:

liquid animations
soft physics
playful motion
organic transitions

I wanted to experiment with transitions that feel:

smooth like liquid
stretchy like rubber
soft like slime
responsive like real-world motion

Instead of creating another generic animation package, I focused on giving each effect its own identity.

Effect	Feel
Elastic	Bouncy & playful
Blob	Organic & fluid
Stretch	Rubber-like reveal
Gooey	Sticky liquid motion

🚀 Installation

Add Squishy to your pubspec.yaml

```yaml id="z5wy4v"
dependencies:
squishy: ^0.0.1




Then run:



```bash id="l7gf3g"
flutter pub get

✨ Using Squishy

Using the package is intentionally simple.

```dart id="cvb4ut"
Navigator.of(context).push(
SquishyPageRoute(
page: const NextScreen(),
effect: SquishyEffect.blob,
),
);




That’s it.

---

# 🫠 Blob Transition

The Blob effect creates an organic liquid-like page reveal.

It was one of the first effects I built and instantly became the identity of the package.

The animation uses:

* custom clipping
* bezier curves
* animated reveal paths

to create a soft flowing transition.

---

# 🔥 Gooey Effect

The Gooey transition was designed to feel like sticky liquid separating between screens.

This effect was especially fun to experiment with because small curve adjustments completely changed the feel of the animation.

Creating smooth organic motion is much harder than traditional UI animations because:

* curves must feel natural
* motion must remain smooth
* performance must stay optimized

---

# 🚀 Stretch Transition

Stretch focuses more on rubber-like motion.

Instead of looking liquid, it feels like the page is stretching before opening.

This creates a more dramatic and playful interaction.

---

# 🎨 Designing the Demo App

I also wanted the demo app to look minimal and modern.

The showcase uses:

* off-white background
* bordered buttons
* clean spacing
* soft UI design

so the focus remains on the animations themselves.

---

# 🧩 Challenges During Development

One of the biggest challenges was making each effect feel different.

Many liquid effects can start looking too similar if:

* curves overlap
* reveal motion feels identical
* animation timing is the same

So a lot of time went into:

* tweaking bezier curves
* adjusting animation physics
* experimenting with reveal paths

to make every transition feel unique.

---

# 🌟 What I Learned

Building Squishy taught me a lot about:

* Flutter animations
* custom clippers
* animation curves
* package structure
* open source publishing
* documentation
* UI motion design

More importantly, it taught me how much small details matter in UI experiences.

Even subtle motion can completely change how an app feels.

---

# 🔮 Future Plans

Some future ideas for Squishy include:

* advanced liquid swipe transitions
* morphing page reveals
* gesture-driven animations
* customizable physics
* interactive transitions
* better performance optimizations

---

# 🌐 Links

## Pub.dev

[https://pub.dev/packages/squishy](https://pub.dev/packages/squishy)

## GitHub

[https://github.com/Sakshi-2508/squishy]
(https://github.com/Sakshi-2508/squishy)

---

# 💙 Final Thoughts

Publishing an open-source package feels amazing because it turns an idea into something developers around the world can actually use.

Squishy started as an experiment with page transitions, but it became a learning experience in animation design, package development, and creative UI engineering.

And honestly…

This is just the beginning 🚀

#Flutter #FlutterDev #OpenSource #Dart #Animation #MobileDevelopment #UIUX

Build Beautiful Animated Toasts in Flutter with ToastLift ✨

sakshi angre — Wed, 20 May 2026 09:59:04 +0000

🚀 Build Beautiful Animated Toasts in Flutter with ToastLift

Toast notifications are one of the most common UI elements in mobile apps, but many default toasts feel outdated and lack customization.

So I built ToastLift — a Flutter package for creating beautiful animated toast notifications with a modern UI.

✨ Features

✅ Success Toast
❌ Error Toast
⚠️ Warning Toast
ℹ️ Info Toast
⏳ Loading Toast

Additional Features:

Smooth animations
Modern minimal UI
Multiple toast positions
Lightweight package
Easy integration

📦 Installation

Add this to your pubspec.yaml:

```yaml id="j0vjlwm"
dependencies:
toast_lift: ^1.0.0




Run:


```bash id="wq0txo"
flutter pub get

🚀 Usage

Import package:

```dart id="g0i4nm"
import 'package:toast_lift/toast_lift.dart';




Show success toast:


```dart id="q8u0th"
ToastLift.show(
  context,
  title: "Success",
  message: "Profile saved successfully!",
  type: ToastLiftType.success,
);

📍 Custom Positions

```dart id="m4fht7"
ToastLiftPosition.top
ToastLiftPosition.center
ToastLiftPosition.bottom




Example:


```dart id="vst9z0"
ToastLift.show(
  context,
  message: "New update available!",
  type: ToastLiftType.info,
  position: ToastLiftPosition.top,
);

📸 Preview

🛠 Challenges During Development

While building this package, I learned:

Flutter package structure
Asset management
Animations
pub.dev publishing
GitHub package management

One major issue I faced was animation asset loading inside the example project, which taught me how Flutter packages manage assets differently from normal apps.

🔗 Links

Pub.dev

ToastLift Package

GitHub

ToastLift Repository

🎉 Final Thoughts

Publishing my first Flutter package was an amazing learning experience.

If you are planning to create your first package, start simple and focus on creating something useful for developers.

Thanks for reading 🚀

Sending love to all developers who continue learning, building, failing, improving, and never giving up 💫

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

sakshi angre — Mon, 18 May 2026 12:25:34 +0000

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 🚀