一个精选的、可重用的、预风格化的 Flutter 小部件库,基于原子设计原则组织,以便大规模构建应用程序。
请访问 atomsbox.com 了解更多!
入门
要使用 atomsbox 中的任何预风格化组件,请遵循以下步骤
- 将最新版本的软件包添加到您的
pubspec.yaml文件中
dependencies:
atomsbox: <latest_version>
- 要保留 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')),
],
),
|
创建一个 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(),
],
),
|
创建一个 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 构建的应用
- 音乐应用 – 使用 atomsbox 组件构建音乐应用 UI 的示例。
|
|
- 新闻应用 – 使用 atomsbox 组件构建新闻应用 UI 的示例。
|
|
|
组件和示例
欢迎贡献!但是,您也可以通过打开新问题并描述所需的组件来请求新组件:请求功能
以下是当前可用预风格化组件及其相应示例的详尽列表!
| 类别 | 组件 |
|---|---|
| 原子 | 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]