Building the Smoothest Floating Navbar in Flutter: A Deep Dive into Physics-Based Animations

Damantha Jasinghe — Sun, 01 Mar 2026 18:16:47 +0000

🎯 The Problem with Default Navigation

Let's be honest: Flutter's default BottomNavigationBar works, but it's... boring. In today's competitive app market, user experience and visual polish can make or break your application. Users expect more than just functionality—they crave delightful interactions and smooth animations.

I set out to build something different: a navigation bar that doesn't just work, but feels alive.

✨ The Vision: Beyond Basic Navigation

I wanted to create a navigation component that:

Feels natural with physics-based movements
Delights users with every tap
Adapts intelligently to user behavior
Looks premium without sacrificing performance

The result? A floating navbar that combines:

🎯 Magnetic snapping - Tabs snap into place like they're magnetically attracted
🌊 Spring physics - Every movement has natural bounce and momentum
🔄 Shared axis transitions - Smooth morphing between states
📉 Scroll-aware behavior - Intelligently hides when you scroll down

🧠 The Physics Behind the Magic

Spring Animations: The Secret Sauce

Instead of traditional easing curves, I implemented physics-based spring animations. Here's why:

// Traditional animation
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
)

// Physics-based animation
SpringAnimation(
  spring: SpringDescription(
    mass: 1.0,
    stiffness: 300,
    damping: 30,
  ),
)

Spring animations feel more natural because they mimic real-world physics. When you tap a tab, it doesn't just move—it bounces slightly, like a physical object responding to force.

The 40px Scroll Threshold

One subtle but important detail: the navbar only hides after scrolling 40px. This prevents accidental hiding during small scroll movements or when users are just exploring.

void _onScroll() {
  if (_scrollController.position.pixels > 40) {
    // Hide navbar
  } else {
    // Show navbar
  }
}

🎨 Design Decisions

Pill Morph Animation

The selected tab expands into a pill shape, creating a clear visual hierarchy. This uses Flutter's powerful animation system to smoothly interpolate between shapes:

AnimatedContainer(
  width: selected ? expandedWidth : collapsedWidth,
  height: 56,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(selected ? 28 : 16),
    color: selected ? accentColor : Colors.transparent,
  ),
)

Dynamic Color Shifts

Each tab has its own accent color that subtly influences the navbar's appearance when selected. This creates a visual connection between the navbar and the content.

Dark Glass Effect

Using Flutter's BackdropFilter, I added a subtle blur effect that gives the navbar a modern, premium look:

ClipRRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      color: Colors.white.withOpacity(0.1),
    ),
  ),
)

🚀 Implementation Challenges

Challenge 1: Hit Testing

With a floating navbar, touch targets need to be precise. I optimized the hit testing to ensure users never miss a tap:

@override
bool hitTest(Offset position) {
  // Custom hit test logic for floating position
  return _isPointWithinNavbar(position);
}

Challenge 2: Performance

Multiple animations running simultaneously could cause jank. Solution? Heavy optimization:

Used const constructors where possible
Minimized rebuilds with AnimatedBuilder
Cached expensive calculations

Challenge 3: Overflow Handling

Different screen sizes need different layouts. The navbar adapts by:

Dynamically calculating label widths
Adding overflow protection
Maintaining touch targets size

💡 Key Takeaways

1. Physics > Curves

Spring animations might be more complex, but they create a significantly better user experience. Users might not notice consciously, but they'll feel the difference.

2. Thresholds Matter

The 40px scroll threshold wasn't random—it came from user testing. Too sensitive, and users get frustrated; too lenient, and the feature is useless.

3. Polish is in the Details

The magnetic snapping, the subtle blur, the dynamic colors—each individually is small, but together they create a premium feel.

🛠️ How to Use It

Ready to try it yourself? Here's how:

// 1. Add to your Scaffold
Scaffold(
  body: yourContent,
  bottomNavigationBar: CustomFloatingNavbar(
    items: [
      NavItem(Icons.home, "Home"),
      NavItem(Icons.search, "Search"),
      NavItem(Icons.favorite, "Likes"),
      NavItem(Icons.person, "Profile"),
    ],
    onItemSelected: (index) {
      // Handle navigation
    },
  ),
)

// 2. Make pages scrollable
SingleChildScrollView(
  controller: scrollController,
  child: yourContent,
)

📊 Performance Metrics

After extensive testing:

60fps animations on mid-range devices
Zero frame drops during transitions
< 2ms layout time
Minimal memory footprint

🔮 Future Improvements

I'm planning to add:

[ ] Custom theme builder
[ ] More animation presets
[ ] Gesture-based navigation
[ ] Accessibility improvements

🎁 Try It Yourself!

The complete code is available on GitHub:

🔗 github.com/Damantha126/Floating-Navbar-M3

Give it a ⭐ if you find it useful!

💭 Final Thoughts

Building this navbar taught me that great UI is about feeling, not just function. When users interact with your app, every animation, every transition, every micro-interaction contributes to their overall impression.

Don't settle for default widgets. Push boundaries. Your users will thank you.

📫 Let's Connect!

Portfolio: damanthaja.dev
LinkedIn: linkedin.com/in/damanthajasinghe
GitHub: @Damantha126

Have questions or want to contribute? Open an issue or PR on GitHub!

Flutter #UIDesign #MobileDev #OpenSource #Animation

🚀How to Download files from Terabox with Python

Damantha Jasinghe — Fri, 11 Apr 2025 11:34:20 +0000

Tired of navigating clunky download links or struggling with Terabox file sharing? Say hello to terabox-downloader, a powerful and beginner-friendly Python package that simplifies your file interactions with Terabox. Whether you’re a bot developer, data hoarder, or just a curious Pythonista, this tool gives you direct access to Terabox file metadata and lets you download files with custom progress tracking — all in a few lines of code.

Let’s break down what it does and how to get started.

🌟 Features

🔗 Get direct download links from Terabox.
📝 View file name, size, and thumbnail.
📥 Download files to any folder.
📊 Add a built-in or custom progress bar.
❌ Helpful error handling for smoother scripting.
🐍 Compatible with Python 3.7+.

⚙️ Installation

pip install terabox-downloader

🍪 How to Get Your Cookie

To interact with Terabox, you’ll need your account’s cookie — a quick one-time setup.

Open Edge and log in to your Terabox account.
Click the padlock🔒 in the address bar → “Permissions for this site”.
Head to Cookies and site data → Cookies in use.
Find the lang and ndus cookies under terabox.com.
Combine them like this:

cookie = "lang=en; ndus=YOUR_VALUE_HERE;"

💡 Need help? Here’s a visual guide.

🚀 Quick Start

from TeraboxDL import TeraboxDL

# Step 1: Add your Terabox cookie
cookie = "lang=en; ndus=YOUR_COOKIE_HERE;"

# Step 2: Create the client
terabox = TeraboxDL(cookie)

# Step 3: Provide a file link
link = "https://www.terabox.app/s/your_link_here"

# Step 4: Fetch file info
file_info = terabox.get_file_info(link)

# Step 5: Show the results
if "error" in file_info:
    print("Error:", file_info["error"])
else:
    print("Name:", file_info["file_name"])
    print("Size:", file_info["file_size"])
    print("Thumbnail:", file_info["thumbnail"])
    print("Link:", file_info["download_link"])

📂 Downloading Files

Now let's download that file!

result = terabox.download(file_info, save_path="downloads/")

if "error" in result:
    print("Download Error:", result["error"])
else:
    print("✅ File downloaded to:", result["file_path"])

🧪 Custom Progress Bar

Add a custom progress bar for better UI integration:

def progress_callback(downloaded, total_size, percentage):
    done = int(50 * downloaded / total_size)
    print(f"\r[{'=' * done}{' ' * (50 - done)}] {percentage:.2f}%", end='')

terabox.download(file_info, save_path="downloads/", callback=progress_callback)

Use this in bots, GUI apps, terminal tools, or anywhere you want real-time feedback!

✅ Why You’ll Love It

Whether you're automating downloads, building a bot, or scraping data, terabox-downloader is a clean and powerful tool for Python devs. It brings simplicity to something that’s often annoying — dealing with file sharing platforms.

🔗 GitHub Repo

If you found this helpful, consider starring the GitHub repo or following for more dev tools and tips!

DEV Community: Damantha Jasinghe