atomsbox

一个精选的、可重用的、预风格化的 Flutter 小部件库,基于原子设计原则组织,以便大规模构建应用程序。

请访问 atomsbox.com 了解更多!


入门

要使用 atomsbox 中的任何预风格化组件,请遵循以下步骤

  1. 将最新版本的软件包添加到您的 pubspec.yaml 文件中

dependencies:
  atomsbox: <latest_version>
  1. 要保留 atomsbox 的设计,请导入该软件包并使用库中预定义的theme

import 'package:atomsbox/atomsbox.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.theme,
      darkTheme: AppTheme.darkTheme,
      themeMode: currentMode,
      home: const HomeScreen(),
    );
  }
}

用法

三个关于如何在 Flutter 应用中使用 atomsbox 组件的示例。还有更多组件可用,请在 atomsbox.com! 查看组件库!

创建一个 AppCardImageAndContentBlock 预风格化组件

AppCardImageAndContentBlock(
  margin: const EdgeInsets.only(bottom: AppConstants.sm),
  headline: AppText('This is a card'),
  subhead: sampleText,
  actions: [
    AppFilledButton(
        onPressed: () {}, child: AppText('Action 1')),
    AppFilledButton.gradient(
        onPressed: () {}, child: AppText('Action 2')),
  ],
), 
atomsbox pre-styled card

创建一个 AppForm 预风格化组件

AppForm(
  title: AppText('This is a form'),
  description: AppText('This is a form description'),
  formButton: AppFilledButton(
    onPressed: () {},
    child: AppText('Submit'),
  ),
  formItemNames: const ['One', 'Two', 'Three'],
  formItems: [
    AppTextFormField(),
    AppTextFormField(),
    AppTextFormField(),
  ],
),
atomsbox pre-styled form

创建一个 AppTab 预风格化组件

AppTab(
  tabs: [
    Tab(
      icon: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [Icon(Icons.code), AppText('Atoms')],
      ),
    ),
    Tab(
      icon: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [Icon(Icons.code), AppText('Molecules')],
      ),
    ),
  ],
  children: [
    Column(
      children: [
        AppCard.elevated(
          height: 300,
          width: double.infinity,
          child: Center(child: AppText('Atoms')),
        ),
      ],
    ),
    Column(
      children: [
        AppCard.elevated(
          height: 300,
          width: double.infinity,
          child: Center(child: AppText('Molecules')),
        ),
      ],
    ),
  ],
),
atomsbox pre-styled tab

使用 atomsbox 构建的应用

  • 音乐应用 – 使用 atomsbox 组件构建音乐应用 UI 的示例。
atomsbox music-app atomsbox music-app
  • 新闻应用 – 使用 atomsbox 组件构建新闻应用 UI 的示例。
atomsbox news-app atomsbox news-app atomsbox news-app

组件和示例

欢迎贡献!但是,您也可以通过打开新问题并描述所需的组件来请求新组件:请求功能

以下是当前可用预风格化组件及其相应示例的详尽列表!

类别 组件
原子 App 文本
原子 App 图片
原子 App 图标按钮
原子 App 文本按钮
原子 App 凸起按钮
原子 App 实心按钮
原子 App 描边按钮
原子 App 卡片
原子 App 玻璃
原子 App 渐变背景
原子 App 滑块
原子 App 文本表单字段
原子 App 渐变文本
原子 App 标签
分子 App 扩展面板
分子 App 分段按钮
分子 App 列表项
分子 App 带图片和内容块的卡片
分子 App 图片叠加卡片
分子 App 文本块
分子 App 用户卡片
分子 App 带自动完成功能的搜索
有机体 App 表单
有机体 App 网格
有机体 App 列表
有机体 App 抽屉
有机体 App 底部导航栏
有机体 App 数据表格
有机体 App 轮播图
有机体 App 标签页
有机体 App 音频卡片

贡献

欢迎贡献!如果您发现错误、有功能请求或想改进该软件包,请继续创建一个新的 issue

欢迎随时与我们联系以进一步讨论,邮箱地址:[email protected]

GitHub

查看 Github