Custom Flutter UI Material Design Cupertino Widgets — Meteora Web Guide • Meteora Web Agency

You're building a Flutter app and need to choose between Google's Material Design and Apple's Cupertino. The client wants a native look on both platforms, but your brand has its own identity — you don't want it to look like a system clone. The point is: Flutter gives you both toolkits, but using them well requires strategy, not just copy-paste. We at Meteora Web have worked with Flutter for years and have seen developers get lost between components that felt out of place on one platform or the other. In this guide, we show you how to combine Material Design, Cupertino, and custom widgets to build a UI that feels native but is unmistakably yours.

Why choose Material Design or Cupertino for your Flutter UI?

The question isn't “which is better”, but “which works for your end user”. On Android, users expect shadows, elevation, ripple effects, raised buttons. On iOS, they prefer flat surfaces, blur, fluid animations, and transparent navigation bars. Flutter gives you Material (google_fonts, ThemeData) and Cupertino (CupertinoPageRoute, CupertinoNavigationBar). The wrong choice? Using only Material on iOS — the user perceives it as “off”, even if they can't explain why. We always start with the target platform. If the app is Android-only, all Material. If hybrid, we use an adaptive approach: detect the platform at runtime and load the appropriate widget.

How to detect the platform in Flutter

Use Theme.of(context).platform or defaultTargetPlatform. Example:

import 'dart:io' show Platform;

Widget build(BuildContext context) {
  if (Platform.isIOS) {
    return CupertinoNavigationBar(
      middle: Text('Profile'),
    );
  } else {
    return AppBar(
      title: Text('Profile'),
    );
  }
}

Note: Platform doesn't work on the web; for web use Theme.of(context).platform. We use it with a Material fallback.

How to combine Material and Cupertino in one Flutter app?

You can't mix Material and Cupertino widgets in the same screen without visual consistency. Choose a “dominant theme” and use the other only for specific components (e.g., CupertinoSliverNavigationBar on iOS, AppBar on Android). We create an AdaptiveWidget:

class AdaptiveWidget extends StatelessWidget {
  final Widget Function(BuildContext) materialBuilder;
  final Widget Function(BuildContext) cupertinoBuilder;

  const AdaptiveWidget({Key? key, required this.materialBuilder, required this.cupertinoBuilder}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    switch (Theme.of(context).platform) {
      case TargetPlatform.iOS:
        return cupertinoBuilder(context);
      default:
        return materialBuilder(context);
    }
  }
}

Then use it like:

AdaptiveWidget(
  materialBuilder: (ctx) => MaterialButton(onPressed: (){}, child: Text('Save')),
  cupertinoBuilder: (ctx) => CupertinoButton.filled(onPressed: (){}, child: Text('Save')),
)

Common mistake: forgetting to handle padding and size differences. Cupertino buttons are taller and have more horizontal padding. Always test on real devices.

How to create custom Flutter widgets that respect the platform?

Custom widgets are the heart of an app that doesn't look like “yet another Flutter app”. The key is to extend StatelessWidget or StatefulWidget, but use the inherited Theme to adapt colors, spacing, and styles. We build our widgets starting from a CustomTheme that defines palette, fonts, elevations. Then in the widget we use Theme.of(context) to fetch the correct values.

Example: Adaptive custom card

class AdaptiveCard extends StatelessWidget {
  final Widget child;
  const AdaptiveCard({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final platform = Theme.of(context).platform;
    if (platform == TargetPlatform.iOS) {
      return Container(
        decoration: BoxDecoration(
          color: CupertinoTheme.of(context).scaffoldBackgroundColor,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: CupertinoColors.separator, width: 0.5),
        ),
        padding: EdgeInsets.all(16),
        child: child,
      );
    } else {
      return Card(
        elevation: 2,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        child: Padding(padding: EdgeInsets.all(16), child: child),
      );
    }
  }
}

Notice: on iOS we use thin borders and no shadow (Cupertino is flat), on Android we use shadow and smaller corners. Small differences that make a big perceived difference.

What are the most common mistakes when customizing Flutter widgets?

Three mistakes we often see in projects that come to us from other developers:

Ignoring the global theme — Hardcoding colors and sizes instead of using Theme.of(context). When the client wants a restyle, you have to change hundreds of widgets.
Not testing on small screens — A LayoutBuilder with MediaQuery is mandatory. On an iPhone SE, a button with padding 24 can become unusable.
Mixing navigation styles — Using CupertinoNavigationBar with MaterialPageRoute creates weird transitions. On iOS use CupertinoPageRoute, on Android MaterialPageRoute.

We solve this with an adaptive route wrapper:

class AdaptiveRoute {
  static Route<T> fadeThroughPlatform<T>(Widget page) {
    if (Theme.of(navigatorKey.currentContext!).platform == TargetPlatform.iOS) {
      return CupertinoPageRoute(builder: (_) => page);
    }
    return MaterialPageRoute(builder: (_) => page);
  }
}

How to integrate custom widgets with Material Design and Cupertino without breaking accessibility?

Accessibility (a11y) is often overlooked. Semantics widget is your friend. When you create a custom widget, wrap it in Semantics to provide labels and roles. Example for a custom button:

Semantics(
  label: 'Add to cart',
  button: true,
  onTap: () { /* action */ },
  child: GestureDetector(
    onTap: () { /* action */ },
    child: Container(
      decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(8)),
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      child: Text('Add', style: TextStyle(color: Colors.white)),
    ),
  ),
)

Also ensure color contrast meets WCAG guidelines. We use ColorFiltered or packages like contrast to verify.

Tools to speed up custom Flutter UI development

Don’t reinvent the wheel. Use stable, well-maintained packages:

flutter_screenutil — Adapt sizes to different screens. Essential for custom widgets.
provider or riverpod — Manage theme state and user preferences (e.g., dark mode).
google_fonts — Custom fonts without manual assets.
cupertino_icons — Native iOS icons when using Cupertino.

We have an internal template that already includes an adaptive theme, platform-aware routing, and base custom widgets. You can start from there to save weeks.

What to do next

We've seen how to combine Material Design, Cupertino, and custom widgets in Flutter without sacrificing consistency or brand identity. Now it's your turn:

Analyze your current app — If you already use Flutter, check how many times you hardcoded colors or padding. Replace them with theme references.
Implement an AdaptiveWidget for main components (buttons, cards, navigation bars). Test on iOS and Android.
Build a custom widget for a component you frequently use (e.g., an input field with validation). Wrap it in Semantics.
Read the official Flutter documentation on Material widgets and Cupertino widgets.
Check out our Flutter pillar for a full overview of mobile development with one codebase: Mobile Apps with Flutter — The Definitive Pillar.

Remember: a UI isn't beautiful because it's full of animations, but because every pixel communicates something. At Meteora Web, we care about every detail because we know the client's revenue depends on it.