Antd 风格的 Flutter组件库

组件目录

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

互相吹捧，共同进步

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