Flutter UI组件插件bilions_ui的使用

Bilions Flutter UI

函数

Alert

alert(
  'Title here',
  'Description here',
  variant: Variant.warning, 
)

Toast

toast('Confirmed', variant: Variant.success);

确认对话框

confirm(ConfirmDialog(
    'Are you sure?', 
    variant : Variant.success,
    confirmed: () {
      // 在这里执行操作
    },
  ),
)

图片选择器

openUploader(context, 
  variant: 'primary',
  onPicked: (FileInfo file) {
    print(file.path); // 打印文件路径
  },
);

在 ios/Runner/info.plist 中添加以下行：

<key>NSPhotoLibraryUsageDescription</key>
<string>允许访问相册以上传你的个人头像</string>
<key>NSCameraUsageDescription</key>
<string>允许访问相机以上传你的个人头像</string>

图片预览

preview([
  'https://picsum.photos/id/237/536/354',
  'https://picsum.photos/id/238/536/354',
  'https://picsum.photos/id/239/536/354',
])

菜单

menu(
  MenuList([
    MenuListItem(
      Icon(
        Icons.edit,
        size: 20,
      ),
      title: '编辑',
      onPressed: () {
        // 在这里执行操作
      },
    ),
  ])
)

组件

日期选择器输入

BilionsDatePicker(label: '出生日期', onChanged: (date) => {}),

日期范围选择器输入

BilionsDateRangePicker(
    label: '出生日期',
    onChanged: (start, end) => {

    },
),

文本输入

BilionsTextInput(label: '全名', onChanged: (text) => {})

密码输入

BilionsPasswordInput(
  label: '密码',
  onChanged: (value) => {},
  variant: Variant.danger,
)

头像图像

Avatar(
  'https://i.pravatar.cc/150?img=3',
  title: 'Zin Kyaw Kyaw',
  subTitle: 'aj@bilions.org',
)

图片滑块

ImageSlider([
  'https://picsum.photos/id/237/536/354',
  'https://picsum.photos/id/238/536/354',
  'https://picsum.photos/id/239/536/354',
])

按钮

主按钮

PrimaryButton(
  '按钮标题',
  variant : Variant.success,
  onPressed: () {
    // 在这里执行操作
  },
)

辅助按钮

SecondaryButton(
  '按钮标题',
  variant : Variant.success,
  onPressed: () {
    // 在这里执行操作
  },
)

提醒窗口

BilionsAlert(
  '起床了',
  '你需要编写Flutter代码',
  icon: Icon(Icons.alarm),
)

卡片

CardWidget(
  header: const Avatar(
    'https://i.pravatar.cc/150?img=3',
    title: 'Zin Kyaw Kyaw',
    subTitle: 'aj@bilions.org',
  ),
  body: Column(
    children: const [
      Span(
        "Lorem Ipsum是印刷和排版行业的简单假文。自1500年代以来，Lorem Ipsum一直是行业的标准假文，当时一个未知的打印机拿了一整页并打乱了所有的字母来制作一本样本书。它不仅存活了五个世纪，还进入了电子排版时代，基本保持不变。Lorem Ipsum在1960年代随着Letraset纸张的发布而流行起来，其中包含Lorem Ipsum段落，并且最近随着Aldus PageMaker等桌面出版软件的发布，包括各种版本的Lorem Ipsum。",
      )
    ],
  ),
  footer: const Text('这是页脚'),
)

表格

BilionsTable(
    variant: Variant.success,
    widths: const [50, 30],
    header: const [
      TextLeft('姓名', color: Colors.green, bold: true),
      TextCenter('排名', color: Colors.green, bold: true),
      TextRight('价格', color: Colors.green, bold: true),
    ],
    body: const [
      [TextLeft('Ajay Pillai'), TextCenter('1'), TextRight('1000')],
      [TextLeft('Kumar Sharno'), TextCenter('2'), TextRight('1000')],
      [TextLeft('Anju Skk'), TextCenter('3'), TextRight('1000')],
      [TextLeft('Zin Kyaw Kyaw'), TextCenter('4'), TextRight('1000')],
    ],
  ),

工具

日期格式化

• 获取当前时间 now() 将返回当前的 DateTime 实例。
• 格式化日期为字符串 moment.dateToString(now()) 将返回格式化的字符串日期。
• 格式化日期为字符串 moment(now()).format(format: 'dd MMM yyyy') 将返回格式化的字符串日期。
• 格式化日期为字符串 moment('2022-11-22').parse() 将返回 DateTime 实例。

颜色主题

BilionsColor.primary
BilionsColor.primaryLight
BilionsColor.warning
BilionsColor.warningLight
BilionsColor.danger
BilionsColor.dangerLight
BilionsColor.info
BilionsColor.infoLight
BilionsColor.success
BilionsColor.successLight

变体

Variant.primary
Variant.warning
Variant.danger
Variant.info
Variant.success

颜色主题配置

如果你想设置自己的颜色？

你可以在 main() 函数中设置自己的颜色。

void main() {

  BilionsUI bilionsUI = BilionsUI();
  bilionsUI.setColors(
    ColorConfig(
      danger: Colors.red,
      primary: Colors.blue,
      success: Colors.green,
      warning: Colors.yellow,
      info: Colors.purple,
    ),
  );

  runApp(const MyApp());
}