Antd 风格的 Flutter组件库

组件目录

• ActionSheet 操作面板
• Alert 告警提示
• AppBar 导航栏
• Avatar 头像
• Badge 徽标
• Breadcrumb 面包屑
• Button 按钮
• Calendar 日历
• CalendarDatetimePicker 日历时间选择器
• CalendarPicker 日历选择器
• Card 卡片
• CascaderPicker 级联选择
• Cell 列表项(单元格)
• Collapse 折叠面板
• DatePicker 日期选择器
• DatePickerCell 日期选择器单元格
• Checkbox 复选框
• Dialog 对话框
• Divider 分割线
• Empty 空状态
• Form 表单
• Grid 栅格
• Image 图片
• ImagesWall 图片墙
• Input 输入框
• InputNumber 数字输入框
• List 列表
• Loading 加载
• Mask 背景蒙层
• Modal 弹窗
• Page 页面
• Picker 选择器
• Popup 弹出层
• Progress 进度条
• Radio 单选框
• Rate 评分
• Scaffold 脚手架
• SearchBar 搜索框
• Select 选择器
• Space 间隔
• Steps 步骤条
• Switch 开关
• TabBar 标签栏
• Tabs 标签页
• Tag 标签
• TextArea 文本域
• Timeline 时间轴
• Toast 轻提示
• VerificationCodeInput 验证码输入框

直接使用

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return AntApp(
      title: 'Flutter Demo',
      theme: AntThemeData(
        // colorPrimary: material.Colors.amber,
      ),
      routes: {
      },
      home: const MyHomePage(title: 'Ant Mobile Flutter Demo Home Page'),
    );
  }
}

使用Getx

1. 直接使用Getx

AntThemeData antThemeData = AntThemeData();
AntTheme
(
data: antThemeData,
child: GetMaterialApp(
title: 'TrionesDev',
theme: antThemeData.toMaterialThemeData(),
getPages: Routes.routes,
home: const HomePage(),
onInit: () {

},
onReady: () {},
)
)

2. 使用封装的AntGetx组件 地址: https://github.com/trionesdev/triones-get-antd

使用方法

  runApp
(
GetAntApp(
title: 'TrionesDev',
theme: AntThemeData(),
getPages: Routes.routes,
home: const HomeLayout(),
onInit: () async {

},
onReady: () {},
)
);

互相吹捧，共同进步

留言回复不及时，可以通过关注公众号联系我们