Flutter iOS Liquid Glass

Implementing an Aqua or Liquid (fluid) design in Flutter—reminiscent of Apple’s Aqua UI or the more modern “liquid” design trends —can be achieved with or without external packages.

🔷 Aqua/Liquid Design Elements:

1. Glassmorphism (blurred glass)
2. Fluid animations & motion
3. Soft gradients & glowing effects
4. Semi-transparent, layered UI
5. Realistic water/liquid ripple or blob effects

✅ Native Flutter (No External Libraries)

1. Glassmorphism with BackdropFilter

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

class GlassmorphicCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          width: 300,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.2),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.white.withOpacity(0.2)),
          ),
          child: Center(
            child: Text(
              "Aqua Card",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

2. Fluid Gradient Background

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blueAccent, Colors.cyanAccent],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

3. Neumorphic/Aqua-Style Buttons

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.white.withOpacity(0.3),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
    elevation: 5,
  ),
  onPressed: () {},
  child: Text('Press', style: TextStyle(color: Colors.white)),
)

4. Fluid Shape Animations (Custom Painter or AnimatedContainer)

Create blob-style shapes using CustomPainter with Path, or use AnimatedContainer with ClipPath.

5. Demo no lib implementation

https://medium.com/@pranavdave.code/recreating-ios-26s-liquid-glass-ui-in-flutter-9093e5467915

✅ Using External Libraries (More Effects)

1. glassmorphism package

pub.dev → glassmorphism

GlassmorphicContainer(
  width: 350,
  height: 200,
  borderRadius: 20,
  blur: 15,
  alignment: Alignment.bottomCenter,
  border: 2,
  linearGradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.1),
      Colors.white38.withOpacity(0.05),
    ],
  ),
  borderGradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white24,
      Colors.white10,
    ],
  ),
)

2. liquid_progress_indicator for animated fluid UI

pub.dev → liquid_progress_indicator

LiquidCircularProgressIndicator(
  value: 0.5, // 50%
  backgroundColor: Colors.white,
  valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
  borderColor: Colors.blue,
  borderWidth: 3.0,
  direction: Axis.vertical,
)

3. animated_background or rive for fluid animation

• rive – For fully interactive animations
• animated_background – For particle or fluid-like motion effects

🔧 Tips for Aqua/Liquid Design

Feature	Native Support?	Recommended
Glassmorphism	✅ Yes (BackdropFilter)	✅
Liquid Animations	🚫 Not directly	✔️ liquid_progress_indicator, rive
Dynamic Blobs	🚫 Not directly	✔️ animated_widgets, custom CustomPainter
Aqua-like Buttons	✅ Yes	✅
Water ripple interaction	🚫 Not directly	✔️ Rive or custom shader

🧪 Bonus: Blur + Glow Together

BoxDecoration(
  color: Colors.white.withOpacity(0.2),
  borderRadius: BorderRadius.circular(20),
  boxShadow: [
    BoxShadow(
      color: Colors.blueAccent.withOpacity(0.6),
      blurRadius: 20,
      spreadRadius: 1,
    ),
  ],
)

Here’s a full Flutter demo page that combines glassmorphism, fluid gradients, liquid progress, glowing shadows, and animated background effects – giving you a modern Aqua/Liquid design UI.

✅ Full Flutter Template (Using Core & Packages)

📦 Dependencies (in pubspec.yaml):

dependencies:
  flutter:
    sdk: flutter
  glassmorphism: ^3.0.0
  liquid_progress_indicator: ^0.4.0
  animated_background: ^2.0.0

🧩 Main UI Code:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';
import 'package:animated_background/animated_background.dart';

void main() => runApp(MyAquaApp());

class MyAquaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Aqua Design Demo',
      theme: ThemeData.dark(),
      home: AquaHomePage(),
    );
  }
}

class AquaHomePage extends StatefulWidget {
  @override
  State<AquaHomePage> createState() => _AquaHomePageState();
}

class _AquaHomePageState extends State<AquaHomePage>
    with TickerProviderStateMixin {
  double progress = 0.65;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 🌌 Fluid Gradient Background + Particles
          AnimatedBackground(
            behaviour: RandomParticleBehaviour(
              options: ParticleOptions(
                baseColor: Colors.white30,
                spawnOpacity: 0.0,
                opacityChangeRate: 0.25,
                minOpacity: 0.1,
                maxOpacity: 0.4,
                spawnMinSpeed: 10.0,
                spawnMaxSpeed: 70.0,
                spawnMinRadius: 5.0,
                spawnMaxRadius: 15.0,
              ),
            ),
            vsync: this,
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xFF1E3C72), Color(0xFF2A5298)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
            ),
          ),

          // 💠 Center Aqua Card
          Center(
            child: GlassmorphicContainer(
              width: 320,
              height: 400,
              borderRadius: 25,
              blur: 20,
              alignment: Alignment.center,
              border: 1,
              linearGradient: LinearGradient(
                colors: [
                  Colors.white.withOpacity(0.2),
                  Colors.white.withOpacity(0.05),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderGradient: LinearGradient(
                colors: [
                  Colors.white.withOpacity(0.4),
                  Colors.white.withOpacity(0.1),
                ],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 🔵 Liquid Progress
                  SizedBox(
                    height: 140,
                    width: 140,
                    child: LiquidCircularProgressIndicator(
                      value: progress,
                      valueColor:
                          AlwaysStoppedAnimation(Colors.cyanAccent.shade200),
                      backgroundColor: Colors.white10,
                      borderColor: Colors.white30,
                      borderWidth: 2.0,
                      direction: Axis.vertical,
                      center: Text(
                        '${(progress * 100).round()}%',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 30),
                  // 🌟 Aqua Button
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        progress = (progress + 0.1) % 1.0;
                      });
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white.withOpacity(0.15),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30)),
                      padding: EdgeInsets.symmetric(
                          vertical: 14.0, horizontal: 30.0),
                      elevation: 8,
                      shadowColor: Colors.cyanAccent.withOpacity(0.6),
                    ),
                    child: const Text(
                      "Increase",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        letterSpacing: 1.2,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

🎨 What This Includes:

Feature	Implemented?
Glassmorphism	✅ Yes (glassmorphism)
Fluid Gradient BG	✅ Yes (BoxDecoration)
Liquid Indicator	✅ Yes (liquid_progress_indicator)
Particle Motion	✅ Yes (animated_background)
Glow + Blur	✅ Yes (shadows + backdrop)
Aqua Button	✅ Styled with glow & transparency

🔄 Optional Improvements:

• Use Rive for fancier fluid blobs or water waves.
• Replace the particle background with shader effects if targeting desktop/Web.

external libraries

Great question.

Using external libraries in Flutter for implementing Aqua/Liquid design gives you faster development, more refined visuals, and advanced animations that are very hard (or verbose) to implement manually. Below is a categorized list of recommended libraries for Aqua-style UI, along with their benefits and how you might use each.

✅ Top External Libraries for Aqua / Liquid Design

🔹 1. glassmorphism

✅ Best for: Blurred translucent containers (glass UI)

Why use it?

• Saves time vs. writing BackdropFilter and gradients yourself.
• Handles border, radius, blur, and gradient overlays easily.

Usage:

GlassmorphicContainer(
  width: 300,
  height: 200,
  borderRadius: 20,
  blur: 15,
  linearGradient: LinearGradient(...),
  border: 2,
  borderGradient: LinearGradient(...),
)

🔹 2. liquid_progress_indicator

✅ Best for: Aqua-like liquid fill animations

Why use it?

• Out-of-the-box circular and linear progress bars that animate like real water.
• Fully customizable.

Usage:

LiquidCircularProgressIndicator(
  value: 0.6,
  valueColor: AlwaysStoppedAnimation(Colors.cyanAccent),
  backgroundColor: Colors.white24,
)

🔹 3. animated_background

✅ Best for: Particle systems, motion, floating background effects

Why use it?

• Great for animating soft particles or floating blobs.
• Perfect to emulate dynamic liquid environments or underwater vibes.

Usage:

AnimatedBackground(
  behaviour: RandomParticleBehaviour(...),
  vsync: this,
  child: Container(),
)

🔹 4. rive

✅ Best for: High-quality interactive fluid animations

Why use it?

• Build and export complex liquid-like animations from rive.app.
• Control animations via code (triggers, state machines).

Use Case: Liquid splash intro, ripple touch effects, fluid morphing buttons.

Usage:

RiveAnimation.asset('assets/water_blob.riv')

🔹 5. flutter_blurhash

✅ Best for: Blurred image placeholders or transitions

Use when you want to create smooth loading or blur effects in image-heavy designs.

🔹 6. clay_containers

✅ Best for: Neumorphism-style soft UI (close to Aqua aesthetics)

Soft shadows and light-play in buttons or cards for tactile “pressed” effect.

🔹 7. animated_widgets

✅ Best for: Adding smooth, animated movements (e.g., wave, bounce)

Helps create smooth transitions for aqua-like behaviors (buttons pulsing, fluid shifting).

Bonus Libraries (Optional):

Library	Use Case
shimmer	For placeholder fluid shine effects
flutter_animate	Composable, chainable animations for fluid UI
custom_clippers	Create curved shapes and blobs manually

🧠 When to Use Libraries

Use Case	Native Flutter	External Library
Basic Glass UI	✅ Yes	Optional
Water-like Progress Indicator	❌ Hard	✅ Yes (liquid_progress_indicator)
Complex Fluid Animations	❌ Very hard	✅ Yes (rive, animated_background)
Aqua-style Buttons & Blur Cards	✅ Yes	✅ Faster with glassmorphism
Wavy Transitions, Ripples	❌ Tedious	✅ Yes (custom shaders, Rive)

🔚 Conclusion

You can build basic Aqua UI without packages, but to achieve the true “liquid” experience with motion, fill, and blur, these libraries are your best allies:

🔥 Top 3 Must-Use:

1. glassmorphism
2. liquid_progress_indicator
3. animated_background / rive

Liquid Packages

Here’s my take on the top “liquid…” Flutter packages on pub.dev—a look at features, maturity, trustworthiness, and suitability for implementing aqua/glassy liquid UI:

🔍 Package Reviews

1. liquid_glass_renderer

• Purpose: Advanced glass‑fusion effects: blending multiple translucent shapes with refraction and blur via shaders. (Dart packages, Dart packages)
• Strengths: Uses Flutter ‘Impeller’ shader support for high‑quality performance. Can blend up to ~64 shapes. Ideal for true “liquid glass” visual effects. (Dart packages)
• Limitations: Still in pre‑release, only works on Impeller (so unsupported on Web, some desktop builds); blending blur shapes has visual artifacts currently. Pre-release API may change. (Dart packages)

Another similar package could be find here: https://github.com/renancaraujo/liquido

2. liquid_glass

• Purpose: A lightweight widget mimicking the iOS 18-style translucent blur/tint glass (liquid glass blur effect). (Dart packages)
• Strengths: Easy to use, customizable blur radius, tint, opacity, rounded corners. Lightweight and fast. (Dart packages)
• Limitations: Published by an unverified uploader, low download volume (~hundreds), limited community feedback. (Dart packages)

3. liquid_loader

• Purpose: Animated “liquid in bottle” loader, with waves, bubbles, shapes like sphere/triangle/rectangle. (Dart packages)
• Strengths: Very visual, good for fun spinner or thematic loading indicator with liquid motion. (Dart packages)
• Limitations: Niche use case (bottle-shaped loaders), not a general UI framework for glassy overlays.

4. liquid_pull_refresh

• Purpose: Custom pull-to-refresh widget with a liquid animation effect. (Dart packages)
• Strengths: Unique animated drag refresh UX, gives a water-droplet-like appearance. (Dart packages)
• Limitations: Only applicable to scroll‑view refresh scenarios, not general UI design.

5. liquid_flutter

• Purpose: A full “liquid design system” implementation (themed component set) by Merck/EMD, used internally at Merck. (Dart packages, Dart packages)
• Strengths: Offers a complete suite of components designed for “liquid” UI semantics.
• Limitations: Proprietary license restricting usage to Merck clients; not for public reuse. (Dart packages)

6. fluid_animations

• Purpose: Focused on physics-based animations inspired by iOS/SwiftUI—smooth spring, bounce, keyframe transitions. (Dart packages)
• Strengths: Great for creating fluid motion in buttons, transitions, subtle interactive effects. Lightweight and widely usable. (Dart packages)
• Limitations: Not specifically glassy nor blur‑focused—more for motion and transitions.

🧠 Summary Table

Package	Use Case	Maturity & Trust	Platform Support	Best For
liquid_glass_renderer	Multi-shape blending glass UI	New, pre‑release; faster dev only	Android/iOS on Impeller only	Complex, high-quality glass effects
liquid_glass	Single translucent blur widget	Early-stage; low usage; verify code	Android/iOS	Simple glass overlay containers
liquid_loader	Bottle-style liquid loader	Stable release; niche use	Cross-platform	Animated loaders, novelty effects
liquid_pull_refresh	Pull-to-refresh animations	Stable; moderate feedback	Android/iOS	Themed refresh indicators
liquid_flutter	Enterprise liquid UI framework	Proprietary; limited public availability	Android/iOS (Merck only)	Organization-specific design system
fluid_animations	Smooth spring animations	Stable; general-purpose	Cross-platform	Fluid motion/animations across UI

🔐 On Safety & Reliability

Many pub.dev packages, especially newer ones, may be experimental or maintained by individuals. It’s wise to:

• Review the package code or visit its GitHub repo.
• Check number of contributors, issue resolution, and whether maintenance is ongoing. (Reddit, Dart packages, Dart packages, Dart packages, Dart packages, Dart packages, Dart packages, Dart packages, GitHub, Stack Overflow)
• Avoid depending on unverified or unmaintained packages for production-critical features. (Level Up Coding)

✅ My Recommendations

For building an Aqua‑style liquid glass UI:

• Use liquid_glass_renderer if you need high-quality, blending glass effects—but only if your target supports Impeller (iOS/Android mobile currently).
• Or choose liquid_glass for simpler translucent glass overlays with minimal fuss.
• Pair with fluid_animations for smooth, responsive transitions that feel fluid.
• Add liquid_loader or liquid_pull_refresh if you want thematic loading or refresh elements.

Would you like a small demo combining, say, liquid_glass_renderer and fluid_animations to make a dynamic Aqua UI? Or help evaluating GitHub source health?

Does the latest iOS android flutter versions use impeller by default

Yes — as of mid-2024, the latest stable versions of Flutter, iOS, and Android behave as follows with respect to Impeller:

✅ Impeller Adoption in Flutter

Platform	Impeller Support	Default Status	Notes
iOS	✅ Fully supported	✅ Enabled by default (since Flutter 3.10)	iOS now always uses Impeller
Android	✅ Supported (Vulkan/Skia fallback)	⚠️ NOT enabled by default yet (as of Flutter 3.22) Enabled from ✅ 3.27 https://docs.flutter.dev/perf/impeller	Still under active testing

📦 What is Impeller?

Impeller is Flutter’s next-gen rendering engine (replacing Skia on some platforms), designed for:

• Lower shader compilation jank
• Better GPU utilization
• Faster animation/rendering pipeline
• Compatibility with Metal (iOS) and Vulkan (Android)

📱 iOS – Impeller is Default

• Since Flutter 3.10, Impeller is the default rendering backend on iOS.
• Targets Metal for better performance and zero shader warm-up.

✅ You don’t need to do anything — all Flutter iOS apps now use Impeller by default (unless overridden).

🤖 Android – Opt-in Required (as of 2025)

• Impeller is available, but still opt-in for most stable Flutter builds.
• Currently supports Vulkan on modern Android devices.
• Still being refined for older GPUs and compatibility issues.

To enable Impeller on Android:

flutter build apk --enable-impeller

Or set it in your AndroidManifest.xml:

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true"/>

🧪 How to Check If Impeller Is Active

Add this line to log the current renderer:

debugPrint(PlatformDispatcher.instance.nativeRendererType.name);

Output will show:

• impeller ✅
• or skia ❌

🔚 TL;DR

Platform	Impeller Usage (as of Flutter 3.22)
iOS	✅ Default & stable
Android	⚠️ Optional, still evolving

So yes — iOS uses Impeller by default, but Android still uses Skia unless you enable Impeller manually.

Would you like help with enabling it, or seeing if your app’s widgets will render correctly under Impeller?

I am targeting only mobile, but I don’t have impeller enabled on Android. What’s your recommendation for go to package

Since you’re targeting only mobile (iOS + Android) and don’t have Impeller enabled on Android, here’s a practical recommendation:

✅ Recommended “Go-To” Aqua Design Package (No Impeller Required)

🏆 Use this combo:

Role	Package	Why it works for your case
🔲 Glassmorphism	glassmorphism	Simple, beautiful translucent UI with blur — pure Dart, no Impeller/shaders needed.
🔄 Liquid animation	liquid_progress_indicator	Visually rich, animated water-style progress bars — Skia-compatible, no special GPU needed.
✨ Background FX	animated_background	Lightweight particle motion or liquid-like floating effects — runs fine without Impeller.
🎯 Transitions	fluid_animations (optional)	Adds smooth transitions and motion, works well without Impeller.

🔧 Why Not liquid_glass_renderer?

• liquid_glass_renderer uses custom fragment shaders, which are only performant with Impeller.
• Without Impeller on Android, it will:
  • Fall back to Skia, which has poor shader performance (visible jank).
  • Possibly cause app launch delays due to shader compilation.
• Result: Inconsistent visual quality between Android and iOS.

So, skip liquid_glass_renderer for now unless you go all-in on Impeller.

✅ Safe and Stable Aqua Stack (No Impeller Needed)

// Combine these
GlassmorphicContainer(
  // frosted glass effect
);

LiquidCircularProgressIndicator(
  // fluid fill progress
);

AnimatedBackground(
  // ambient motion
);

Optional:

AnimatedWidgets / fluid_animations
// for pulsing, bounce, scale effects

🧪 Want visual fidelity + performance?

If you’re okay with enabling Impeller on Android, then liquid_glass_renderer becomes viable — offering:

• More realistic blur/frost layering
• Multi-shape glass blending (like iOS 18/visionOS)

But if you’re keeping Skia on Android for now — stick with the Skia-safe stack above.

Would you like me to generate a minimal Flutter template using the recommended combo (glassmorphism, liquid_progress_indicator, animated_background)?

Can I enable impeller and if it is not present on Android to fall back to some of the other

Yes, you can enable Impeller on Android and Flutter will automatically fall back to Skia if Impeller isn’t supported — but there are important caveats to understand.

✅ Impeller Fallback Behavior on Android

🔧 What Happens:

When you enable Impeller via:

flutter build apk --enable-impeller

or:

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true"/>

👉 Flutter will attempt to use Impeller on supported devices (typically Vulkan-capable GPUs).
👉 If the device does not support Impeller, Flutter will automatically fall back to Skia.

⚠️ But… Here’s the Catch:

Some Impeller-dependent packages like liquid_glass_renderer:

• Use fragment shaders or runtime shader effects that don’t degrade gracefully when Skia is used.
• May crash, display visual artifacts, or fail silently when shader support isn’t fully there.

Flutter itself will not crash — but you must handle degraded visuals or fallback UI logic yourself.

🛠️ How to Handle This Gracefully

✅ Detect Renderer at Runtime:

Flutter 3.13+ exposes renderer info:

import 'dart:ui';

void checkRenderer() {
  final renderer = PlatformDispatcher.instance.nativeRendererType;
  print('Renderer: $renderer');
}

Returns:

• RendererType.impeller
• RendererType.skia
• RendererType.unknown

💡 Strategy: Conditional Widget Logic

Widget build(BuildContext context) {
  final renderer = PlatformDispatcher.instance.nativeRendererType;

  if (renderer == RendererType.impeller) {
    return FancyGlassWithShaders(); // e.g. `liquid_glass_renderer`
  } else {
    return GlassmorphicContainer( // Skia-safe alternative
      width: 300,
      height: 200,
      blur: 10,
      borderRadius: 20,
      ...
    );
  }
}

✅ Best Practice (Recommended):

Tier	Package/Strategy	Renderer Support	Fallback Needed?
⭐ Primary UI	glassmorphism, fluid_animations	✅ Skia + Impeller	❌ No
🎯 Conditional FX	liquid_glass_renderer	⚠️ Impeller only (visual)	✅ Yes
✅ Background	animated_background, rive	✅ Cross-platform (Skia OK)	❌ Usually No

✅ TL;DR

• Yes, you can enable Impeller on Android — it falls back to Skia when unsupported.
• But, if you’re using shader-heavy packages, you must detect the renderer at runtime and provide safe alternatives for Skia.
• Use glassmorphism + fluid_animations as your reliable core stack, and optionally add Impeller‑only visuals conditionally.

Would you like a working code snippet that includes runtime detection and switches between shader and fallback UIs?

Could you give me example of device that doesn’t have impeller, or maybe I could start such emulator

Great question. While Flutter supports Impeller on Android, it only works on devices that support Vulkan with compatible GPU drivers. Many older or lower-end Android devices, and even some emulators, do not support Impeller and fall back to Skia.

📱 Examples of Devices That Likely Don’t Support Impeller

Device Model	Reason	Renderer fallback
Samsung Galaxy A10 (2019)	Low-end Exynos GPU, limited Vulkan support	Skia
Moto E6 / E5	Snapdragon 435/425 — no Vulkan or limited	Skia
Google Nexus 5X / 6P	Adreno 418/430 — Vulkan partially supported	Skia (partial)
Older Android One phones	MediaTek chips with limited GPU drivers	Skia
Some Android 8–9 devices	Vulkan 1.1+ not supported	Skia

📝 Many budget or mid-tier Androids from 2018–2020 will lack Vulkan 1.1 support or have incomplete shader support.

💻 Can You Start an Emulator Without Impeller?

Yes — and this is the easiest way to test Skia fallback.

✅ Start a Flutter emulator that doesn’t use Vulkan:

In Android Studio or AVD Manager:

1. Open AVD Manager → Create New Virtual Device.
2. Choose a device like Pixel 3, Nexus 5X, or any standard phone.
3. In the System Image step:
   • Choose an older API level, like API 29 (Android 10) or API 28 (Android 9).
   • Select a non-Vulkan image (x86 or x86_64). Avoid “Google Play” system images if possible—they may support Vulkan.
4. After setup, run:

   flutter run --enable-impeller
   

5. Then check renderer:

   print(PlatformDispatcher.instance.nativeRendererType);
   

It will most likely return:

RendererType.skia

🧪 Alternative: Force Skia by Disabling Impeller

Even easier: test fallback logic by not enabling Impeller:

flutter run --disable-impeller

Then your renderer will default to Skia on all devices, which lets you validate your fallback UI.

✅ TL;DR

• Many older or budget Android phones still use Skia due to missing Vulkan or GPU support.
• You can emulate this by launching an AVD with API 28–29 and x86 system image (no Vulkan).
• Or just disable Impeller at runtime to test fallback behavior.