Mateo Mobile for Flutter

mateo_mobile is the Flutter implementation of Mateo for mobile software, a simple, expressive, warm design system.

Use it when you want a mobile interface that feels like it was made with care, careful with motion, generous with feedback, and ready for real product surfaces.

What You Get

• A complete Mateo app shell with theme, overlays, typography, and system UI.
• Branded buttons, icon buttons, text buttons, search actions, and tap feedback.
• Mobile feedback patterns including bottom sheets, typed toasts, skeletons, loading text, and animated indicators.
• Gesture-first building blocks for swipe navigation, drag resistance, hero motion, vertical snap feeds, and edge fades.
• Mobile foundations for color, typography, maps, reduced motion, safe areas, touch targets, and semantic labels.

Mateo Mobile currently supports Android and iOS. Web and desktop are separate platform lanes, not targets of this Flutter package.

Install

flutter pub add mateo_mobile

The package targets the current Mateo Flutter lane. See pubspec.yaml for the exact SDK constraint.

Start

MateoApp is the recommended integration. It installs the Mateo theme, mobile system UI styling, and overlay infrastructure used by Mateo components.

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MateoApp(
      title: 'My App',
      color: const (
        primary: Color(0xFFFF4A4B),
        onPrimary: Color(0xFFFFFFFF),
      ),
      home: Scaffold(
        body: Center(
          child: MateoButton(
            label: 'Continue',
            variant: MateoButtonVariant.primary,
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

Use MateoApp.router for declarative routing. If your app must keep its own MaterialApp, use the manual integration guide.

Use Components

Every public API is exported from one entry point:

import 'package:mateo_mobile/mateo_mobile.dart';

MateoButton(
  label: 'Save changes',
  variant: MateoButtonVariant.primary,
  onPressed: saveChanges,
)

MateoToast.show(
  context,
  message: 'Saved',
  type: MateoToastType.success,
)

For exact component behavior, variants, states, and ownership rules, use the component guide as the source of truth.

Explore Mateo Mobile

Platform Notes

Mateo respects reduced motion, text scaling, safe areas, platform navigation expectations, semantic labels, and touch-target requirements. Your app remains responsible for its own content, localization, device matrix, route structure and product-specific accessibility validation.