trionesdev_antd_mobile 0.0.1

antd ui

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: 'XXX',
    theme: AntThemeData(),
    getPages: Routes.routes,
    home: const HomeLayout(),
    onInit: ()  async {

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

互相吹捧，共同进步

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

[]