antd-flutter

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #golang #go #java #windows #cli #kubernetes #security

(★ 16)

Antd Flutter implementation, zero dependencies, ultra-lightweight (only 200kB), 50+ components, complete Antd Token system implementation.

antd-flutter 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
<div align="center">
<img height="90" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
<img height="90" src="https://storage.googleapis.com/cms-storage-bucket/lockup_flutter_horizontal.847ae81f5430402216fd.svg">
</div>
<h1>Antd Flutter Mobile</h1>

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 · [中文](https://github.com/OpenSourceNoCode/antd-flutter/blob/main/README-zh_CN.md)
</div>

[Document](https://antd-flutter.vercel.app/) · [Web Demo](https://opensourcenocode.github.io/antd-flutter/)

## 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
- List seamless scrolling to top/bottom, with jump navigation to any position and content layout

## 📦 Installation

```bash
flutter pub add antd_flutter_mobile
```

## 🔨 Example

```dart
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

```dart
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

```dart
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

```dart
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"),
            )
          ],
        )),
  ));
}
```

antd-flutter

antd-flutter 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

antd-flutter

antd-flutter 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README