Coder Legion - Recent posts tagged techwithsam

Flutter Performance Optimization 2026 (Make Your App 10x Faster + Best Practices)

Sun, 22 Mar 2026 20:11:53 +0000

Hey guys, Samuel here again. One of the crucial aspects of mobile app development is performance optimization to ensure the app is usable even on low-quality devices and delivers a very good user experience, which is what we will be looking into today.

To optimize a Flutter application's performance, focus on minimizing unnecessary widget rebuilds, using efficient rendering techniques, and managing resources effectively. The key steps involve leveraging built-in tools for profiling, optimizing UI code, and improving data handling efficiency.

Performance Diagnosis

Before optimizing, you must identify bottlenecks using the right tools:

Run in Profile Mode: Always profile your app in profile mode on a physical device, as debug mode performance is not representative of the final release build.

flutter run --profile

Flutter DevTools: Use the Flutter DevTools suite (Performance, Memory, Network tabs) to analyze frame rendering times, CPU usage, memory allocation, and network latency.
Performance Overlay: Use the built-in PerformanceOverlay widget or press 'P' in the terminal while running the app to see real-time UI and GPU thread frame times. Red bars indicate "jank" (dropped frames).

MaterialApp(
  ...
  showPerformanceOverlay: true,
  ...
),

Most performance issues stem from inefficient UI code.

Minimize Widget Rebuilds:

- Use const constructors for widgets that don't change to allow Flutter to reuse them at compile time, reducing runtime overhead.

const Text("This widget would not rebuild"),

- Refactor large build methods into smaller, dedicated StatelessWidget or StatefulWidget classes to localize the scope of rebuilds.

- Use state management solutions (like Provider, Riverpod, or BLoC) with Consumer or Selector to ensure only the necessary parts of the UI rebuild when the state changes.

- Use ValueListenableBuilder or AnimatedBuilder for fine-grained updates instead of calling setState() on large widgets.

Optimize Lists and Animations:

- For long lists, use ListView.builder (or SliverList) to lazy load items, building them only when they become visible on screen.

ListView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  itemCount: 1,
  itemBuilder: (context, index) {
    return ListTile();
  },
),

// OR

 SliverList.builder(
  itemBuilder: (context, index) =>
      Container(height: 100),
 ),

- Wrap complex, frequently animating widgets in a RepaintBoundary to isolate their repainting from the rest of the UI.

RepaintBoundary(child: ...),

- Avoid using the Opacity widget directly for animations; prefer FadeTransition instead, as it's more performant.

Resource and Data Management

Efficiently handle data, images, and heavy computations to prevent UI freezes.

Image Handling:

- Use the cached_network_image package for images from the network to implement efficient caching and reduce network requests.

- Compress images before bundling them with the app and loading them at optimal resolutions.

Asynchronous Operations:

- Use async/await, FutureBuilder, and StreamBuilder to perform network requests and other I/O operations without blocking the main UI thread.

- For CPU-intensive tasks (e.g., heavy data processing), use Isolates via the compute function to run them on a separate thread.
Memory Management:

- Always dispose of controllers (AnimationController, TextEditingController, etc.), StreamSubscription instances, and other resources in the dispose() Method of your StatefulWidget to prevent memory leaks.

Network Optimization:

- Implement data pagination for large datasets to avoid fetching all data at once.
- Cache API responses to reduce the number of network calls and improve perceived performance.

App Size and Build Optimizations

Reduce App Size:

- Remove unused assets and libraries ("tree-shaking").
- Use the flutter build apk --split-per-abi command to generate smaller APKs for different device architectures.

Enable Release Mode: Always verify final performance using flutter run --release or by building the app in release mode.

That's it! You've fully optimized your Flutter app performance if you follow all the principles. If you have any questions, make sure to drop them in the comment section.

Join Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

How to Build Responsive Flutter Apps for Phones, Foldables, Tablets & Web (2026)

Sun, 22 Mar 2026 20:07:58 +0000

Hey everyone, Samuel here! In 2026, your Flutter app needs to look perfect on a tiny phone, a folding tablet, a desktop window, and even on the web — all from one codebase.

Nothing kills user experience faster than a layout that breaks on different screen sizes.

Today, we’re doing a complete how-to: building fully responsive UIs using MediaQuery, LayoutBuilder, breakpoints, and the best scaling tricks in 2026. By the end of this article, you’ll have all you need to build professional apps that automatically adapt everywhere. Let’s jump in!

Why Responsive Matters + Core Concepts

First, a quick difference: Responsive design means the UI scales and reflows. Adaptive design means it completely changes the structure (e.g., showing a side menu on a tablet). In 2026, users expect buttery smooth adaptation — no overflow, no tiny text, no broken layouts. The two weapons we’ll use most:

MediaQuery → get screen size, orientation, padding
LayoutBuilder → get exact constraints of the parent widget

These are built-in, zero dependencies, and still the foundation.

MediaQuery & Basic Responsiveness

Let’s start simple. In your home screen:

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;

Now build a profile card:

Container(
  width: screenWidth * 0.9,           // 90% of screen
  height: screenHeight * 0.25,
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(... glassmorphism ...),
  child: Column(...)
)

See how it automatically scales?

Next, orientation handling:

if (isLandscape) {
  return Row(children: [sidebar, mainContent]);
} else {
  return Column(children: [header, mainContent]);
}

That already makes it way better on tablets and desktops.

Advanced — LayoutBuilder + Breakpoints

Now the real power tool: LayoutBuilder.

Wrap your Scaffold body:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth >= 1024) return DesktopLayout();
    if (constraints.maxWidth >= 600) return TabletLayout();
    return MobileLayout();
  },
)

We have three separate widgets: MobileLayout (stacked), TabletLayout (two-column), and DesktopLayout (sidebar + content).

The layout instantly switches as you resize the window, no refresh needed.

Scaling Magic with Flutter ScreenUtil (2026 Best Practice)

For pixel-perfect scaling across all devices, we can still use flutter_screenutil in 2026.

Add to pubspec:

dependencies:
  flutter_screenutil: ^5.9.3   # latest stable

Then in the main.dart:

ScreenUtilInit(
  designSize: const Size(375, 812),   // iPhone 12/13 size
  minTextAdapt: true,
  splitScreenMode: true,
  builder: (context, child) => MaterialApp(...)
)

Now you can write:

Text(’Hello’, style: TextStyle(fontSize: 16.sp)),
Container(width: 200.w, height: 50.h)

It scales fonts, padding, everything automatically. Combine this with LayoutBuilder, and you have production-ready responsive UIs.

Quick pause before we finish, I want to invite you to my free newsletter personally. Every week, I send the exact code snippets, early access to full project repos, and the latest 2026 tips that I don’t always cover in videos. It’s completely free, zero spam, and it’s the fastest way to level up. Just click this link: https://techwithsam.dev/newsletter — I’d love to see you there!

Best Practices & SafeArea

Final pro tips for 2026:

Always wrap top-level content in SafeArea
Use MediaQuery.padding for notches and dynamic islands
Limit max width on large screens: ConstrainedBox(maxWidth: 1200)
Test in all orientations + web + different window sizes
Use const everywhere
Profile with DevTools — responsive UIs should stay under 8ms per frame

That’s it! You now have everything to build beautiful, responsive UIs that work everywhere. If you have any questions, make sure to drop them in the comment section.

Don’t forget to join my Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

Stitch + Antigravity + Flutter: Build Apps with AI Agents in 2026

Sun, 22 Mar 2026 19:55:52 +0000

In 2026, the way we build Flutter apps has completely changed. You no longer start by opening VS Code and typing widgets line by line.

Instead, you describe your app in plain English, an AI agent designs the entire UI, another agent writes and wires up the code, and you only guide the process.

That’s exactly what Google’s Stitch + Antigravity + Flutter combo delivers.

Today I’m going to show you the complete end-to-end workflow: from a simple prompt to a fully functional Flutter app in under a few minutes. This is the new skill every Flutter developer needs in 2026.

Why This Workflow Matters Right Now

Stitch is Google’s AI design agent. You give it a text prompt or even a rough sketch, and it instantly generates production-ready UI designs and structured metadata.

Antigravity is Google’s agentic IDE — a next-gen VS Code fork powered by Gemini. It doesn’t just suggest code; it plans, runs terminal commands, installs packages, writes tests, and iterates until the app works.

When you connect Stitch output to Antigravity via the new MCP (Model Context Protocol) connectors, the AI agent converts the design into real Flutter + Dart code.

This is what the community is calling “vibe coding” or “agentic development.” The developer is still in control — you review, tweak prompts, and make final decisions. But the heavy lifting is handled by agents.

Perfect for rapid prototyping, MVPs, or even production features.

Prerequisites & Setup

Before we build:

Flutter 3.27+ (stable)
Google account with access to Antigravity (antigravity.google)
Stitch access at stitch.withgoogle.com (Google Labs)

Step 1: Install Antigravity (it’s a separate IDE). Download from antigravity.google and open it.

Step 2: Enable MCP connectors in Antigravity settings (this links Stitch directly).

Step 3: Create a new Flutter project in Antigravity or create an empty folder and open it on Antigravity; it will handle every other setup.

Live Build Demo — Let’s Build a Real App. We’re going to build a simple ‘Daily Habit Tracker’ app using only prompts.

First, open Stitch:

Prompt:

Create a clean, modern mobile habit tracker application UI designed to help users build consistent daily routines and maintain positive habits. The design should feel minimal, motivating, and calming, encouraging users to stay consistent with their goals. Use a modern, accessible color system with a primary accent color and soft neutral backgrounds. Support both light mode and dark mode. Use rounded cards, subtle shadows, smooth spacing, and simple iconography to create a polished mobile experience. The application should include bottom navigation with the following sections:

Home / Today Screen

*   Display a daily streak counter at the top with a visually engaging streak indicator (flame or progress ring).
    
*   Show today’s habits list in card format.
    
*   Each habit should include:
    
    *   A checkbox or toggle to mark completion.
        
    *   Habit name.
        
    *   Optional small progress indicator.
        
*   Include a progress summary showing how many habits are completed for the day.
    
*   Add a motivational quote section at the bottom to inspire users.
    

Habits Screen

*   Display a list of all created habits.
    
*   Each habit card should show:
    
    *   Habit name
        
    *   Current streak
        
    *   Completion progress
        
*   Provide an “Add Habit” floating action button.
    
*   Allow editing or deleting habits.
    

Progress / Statistics Screen

*   Display weekly and monthly habit completion charts.
    
*   Show streak history and completion percentages.
    
*   Include visual elements like line charts or progress rings.
    

Profile / Settings Screen

*   Display a circular user avatar.
    
*   Show user statistics such as:
    
    *   Total habits created
        
    *   Longest streak
        
    *   Total days completed
        
*   Include settings such as:
    
    *   Dark mode toggle
        
    *   Notification reminders
        
    *   Habit reminder times
        

Design Style

*   Minimalist and modern mobile UI
    
*   Rounded cards and soft shadows
    
*   Smooth spacing and readable typography
    
*   Friendly icons and subtle animations
    
*   Clean bottom navigation bar
    
*   Consistent spacing and hierarchy

Stitch instantly generates the full UI design + metadata. Now select the screens generated by Stitch and click on Export — then select MCP

Now copy the Prompt and move to Antigravity:

Open the Agent Tab and paste the prompt from Stitch

After Antigravity is done downloading all the screens, then you can give it an instruction of what to build e.g

Use the UI layout generated from Stitch and build a Flutter application using Dart. 
The project should follow Clean Architecture and separate presentation, domain, and data layers. 
Use the Riverpod for state management. Ensure UI components are separated from business logic and follow a clear architecture project structure.

Watch the magic afterward. By the way, the AI Agent will ask for permission to run some commands; make sure you go through and approve accordingly.

After 10–12 minutes, run flutter run and the fully functional app appears on your emulator.

Best Practices & Pro Tips

Key lessons from using this daily:

Always start with a clear, detailed prompt in Stitch (include platform, theme, accessibility).
In Antigravity, use the ‘Manager Agent’ mode and give it one task at a time.
Review every generated file — AI is fast but not perfect yet (especially complex state logic).
Combine with your existing skills: Use Riverpod, GoRouter, and Impeller optimizations from my earlier videos.
Limitations: Native plugins and heavy custom logic still need human oversight.
Pro move: Save your best prompts as reusable skills in Antigravity for future projects.

This workflow is gaining traction in the Flutter community right now because it lets you go from idea to a working app faster than ever.

Quick pause before we finish, if you’re serious about mastering AI tools like this, join my free Flutter + AI newsletter. Every week, I share the exact prompts, workflows, and early access to new agent skills that I test before they hit YouTube. Completely free, no spam — just the most relevant stuff for Flutter developers. https://techwithsam.dev/newsletter — I’d love to see you there!

This is the new reality of Flutter development in 2026 — Stitch for design, Antigravity for agentic building, and you as the conductor.