Antd 风格的 Flutter组件库

组件目录

• Scaffold 脚手架
• Button 按钮
• Collapse 折叠面板
• Dialog 对话框
• Divider 分割线
• Grid 栅格
• Space 间距
• AppBar 导航栏
• TabBar 标签栏
• Tabs 标签页
• Avatar 头像
• Card 卡片
• List 列表
• Tag 标签
• Cascader 级联选择
• Checkbox 复选框
• Form 表单
• Input 输入框
• Picker 选择器
• CalendarPicker 日历选择器
• CalendarDatetimePicker 日历时间选择器
• Radio 单选框
• Rate 评分
• SearchBar 搜索框
• Switch 开关
• TextArea 文本域
• ActionSheet 操作面板
• Empty 空状态
• Modal 弹窗
• Popup 弹出层
• Toast 请提示
• Badge 徽标
• Image 图片
• ImagesWall 图片墙
• Alert 告警提示
• Mask 背景蒙层
• Timeline 时间轴
• Breadcrumb 面包屑
• InputNumber 数字输入框

直接使用

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: () {},
  ));

互相吹捧，共同进步

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