Antd Flutter Mobile

Antd Flutter Mobile is an implementation of Ant Design Mobile for the Flutter platform. With zero dependencies and an ultra-lightweight package (only 200kB in total), it offers 50+ high-quality components covering common interaction scenarios such as themes, overlays, forms, and precise list positioning.

English · 中文

Document · Web Demo

Please Note: This project is currently in its early alpha stage. Please be advised that component properties are subject to change without prior notice. We highly recommend evaluating its suitability before integrating it into your projects.

For immediate support and best practices, you can reach us through the following channels:

• QQ Group: 697050187
• Direct Message on X: https://x.com/howie3526371309
• GitHub Issues: https://github.com/OpenSourceNoCode/antd-flutter/issues

✨ Features

• Zero dependencies, dark mode works out of the box, setup completes upon installation.
• Feather-light, The complete package weighs in at just 218KB, icons included.
• Innovative style system, not bound to any specific UI implementation—flexible and powerful, allowing you to customize every element you see
• Self-contained solution, meeting all needs from pop-ups to scroll interactions with one component library

📦 Installation

flutter pub add antd_flutter_mobile

🔨 Example

import 'package:antd_flutter_mobile/index.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    builder: (context, child) {
      return const Center(
        child: AntdButton(
          child: Text("Button"),
        ),
      );
    },
  ));
}

🔨 Use Layer

import 'package:antd_flutter_mobile/index.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    navigatorObservers: [AntdLayer.observer],
    home: AntdTokenBuilder(builder: (context, token) {
      return AntdBox(
        style: AntdBoxStyle(
            color: token.colorFillTertiary, alignment: Alignment.center),
        child: AntdButton(
          onTap: () {
            AntdToast.show(
              "Toast",
              position: AntdToastPosition.top,
            );
          },
          child: const Text("Button"),
        ),
      );
    }),
  ));
}

🔨 Custom Theme

import 'package:antd_flutter_mobile/index.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(AntdProvider(
      theme: AntdTheme(
          mode: AntdThemeMode.light,
          buttonStyle: (context, button, style, token) {
            if (button.size == AntdSize.large) {
              return AntdButtonStyle(
                  buttonStyle: AntdBoxStyle(color: token.colorWarning));
            }
            return style;
          },
          token: const AntdSeedToken(
            radius: 6,
            colorError: Color(0xffff3141),
            colorInfo: Color(0xff1677ff),
            colorLink: Color(0xff1677ff),
            colorPrimary: Color(0xffad05ef),
            colorSuccess: Color(0xff00b578),
            colorText: Color(0xff171717),
            colorBgBase: Color(0xffffffff),
            colorWarning: Color(0xffff8f1f),
            fontSize: 14,
            lineWidth: 2,
            sizeStep: 4,
            sizeUnit: 2,
            arrow: Size(16, 8),
          )),
      builder: (context, theme) {
        return MaterialApp(
          builder: (context, child) {
            return const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                AntdButton(
                  child: Text("Pick Button"),
                ),
                AntdButton(
                  size: AntdSize.large,
                  child: Text("Waining Button"),
                )
              ],
            );
          },
        );
      }));
}

🔨 Style System

Priority: 3>4>1>2

import 'package:antd_flutter_mobile/index.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: AntdStyleBuilderProvider<AntdBoxStyle, AntdBox>(
      /// 1
        builder: (context, box, style, token,) {
          return AntdBoxStyle(
              color: token.colorPrimary,
              size: 100,
              textStyle: token.font.md.copyWith(color: token.colorSuccess),
              alignment: Alignment.center);
        },
        child: Row(
          children: [
            AntdStyleProvider<AntdBoxStyle>(
              /// 2
                style: const AntdBoxStyle(size: 50),
                child: AntdBox(
                  /// 4
                  style: AntdBoxStyle(
                      radius: 10.radius.all,
                      textStyle: const TextStyle(color: Colors.white)),
                  /// 3
                  styleBuilder: (context, box, style, token,) {
                    return AntdBoxStyle(
                        border: token.border
                            .copyWith(color: token.colorSuccess, width: 3)
                            .all);
                  },
                  child: const Text("box1"),
                )),
            AntdBox(
              style: AntdBoxStyle(margin: 10.left),
              child: const Text("box2"),
            )
          ],
        )),
  ));
}