ไผไธ็บง Flutter UI ็ปไปถๅบ
๐ 60+ ไธไธ็ปไปถ โข ๐จ ่ฎพ่ฎก็ณป็ป โข ๐ฑ ๅๅบๅผ โข โฟ ๆ ้็ข โข โก ้ซๆง่ฝ
- โจ ็นๆงๆฆ่ง
- ๐ ๅฟซ้ๅผๅง
- ๐ฆ ๅฎ่ฃ ๆๅ
- ๐จ ๆ ธๅฟ็นๆง
- ๐๏ธ ๆถๆ่ฎพ่ฎก
- ๐ ็ปไปถๅบ
- ๐ ๆๆกฃ่ตๆบ
- ๐ค ่ดก็ฎๆๅ
- ๐ ๆๆฏๆฏๆ
- ๐ ๅผๆบๅ่ฎฎ
- ็ปไธไธป้ข๏ผMaterial Design 3 ่ง่
- ้ซๅบฆๅฏๅฎๅถ๏ผ็ตๆดป็ไธป้ข้ ็ฝฎ
- ๆ่ฒๆจกๅผ๏ผๅฎๆด็ๆทฑ่ฒไธป้ขๆฏๆ
- ่ฎพ่ฎกไปค็๏ผไธ่ด็่ฎพ่ฎก่ฏญ่จ
- ๅค็ซฏ้้ ๏ผ็งปๅจ็ซฏใๅนณๆฟใๆก้ข็ซฏ
- ๆญ็น็ณป็ป๏ผๆบ่ฝๅธๅฑๅๆข
- ่ช้ๅบ็ปไปถ๏ผๆ นๆฎๅฑๅนๅฐบๅฏธไผๅ
- ๅผนๆงๅธๅฑ๏ผๅผบๅคง็็ฝๆ ผ็ณป็ป
- ๅฑๅน้ ่ฏปๅจ๏ผๅฎๆด็่ฏญไนๅๆ ่ฎฐ
- ้ฎ็ๅฏผ่ช๏ผๅ จ้ฎ็ๆไฝๆฏๆ
- ้ซๅฏนๆฏๅบฆ๏ผWCAG AA ๆ ๅๅ่ง
- ็ฆ็น็ฎก็๏ผๆบ่ฝ็ฆ็นๅค็
- ้ซๆๆธฒๆ๏ผไผๅ็็ปไปถๆๅปบ็ญ็ฅ
- ๆๅ ่ฝฝ๏ผๆ้ๅ ่ฝฝๅๅฐ่ตๆบๅ ็จ
- ๅ ๅญ็ฎก็๏ผๆบ่ฝ่ตๆบๅๆถๆบๅถ
- ๆ ๆไผๅ๏ผ็งป้คๆชไฝฟ็จไปฃ็
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
zephyr_ui: ^0.3.0
dev_dependencies:
flutter_test:
sdk: flutter
zephyr_ui_dev_tools: ^0.3.0import 'package:flutter/material.dart';
import 'package:zephyr_ui/zephyr_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ZephyrApp(
title: 'ZephyrUI ๅบ็จ',
theme: ZephyrTheme.light(),
darkTheme: ZephyrTheme.dark(),
themeMode: ThemeMode.system,
home: const HomeScreen(),
);
}
}class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ZephyrUI ๆผ็คบ'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ๆ ้ขๅบๅ
const Text(
'ๆฌข่ฟไฝฟ็จ ZephyrUI',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
const Text(
'ไผไธ็บง Flutter UI ็ปไปถๅบ๏ผไธบ็ฐไปฃๅบ็จ่็',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
const SizedBox(height: 32),
// ๆ้ฎ็ปไปถๆผ็คบ
Wrap(
spacing: 12,
runSpacing: 12,
children: [
ZephyrButton(
text: 'ไธป่ฆๆไฝ',
onPressed: () => print('Primary action'),
type: ZephyrButtonType.primary,
),
ZephyrButton(
text: 'ๆฌก่ฆๆไฝ',
onPressed: () => print('Secondary action'),
type: ZephyrButtonType.secondary,
),
ZephyrButton(
text: '่พนๆกๆไฝ',
onPressed: () => print('Outlined action'),
type: ZephyrButtonType.outlined,
),
],
),
const SizedBox(height: 32),
// ่กจๅ็ปไปถๆผ็คบ
ZephyrInput(
label: '้ฎ็ฎฑๅฐๅ',
placeholder: '่ฏท่พๅ
ฅๆจ็้ฎ็ฎฑ',
prefixIcon: const Icon(Icons.email_outlined),
validator: (value) {
if (value == null || value.isEmpty) {
return '่ฏท่พๅ
ฅ้ฎ็ฎฑๅฐๅ';
}
if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
return '่ฏท่พๅ
ฅๆๆ็้ฎ็ฎฑๅฐๅ';
}
return null;
},
),
const SizedBox(height: 24),
// ๅก็็ปไปถๆผ็คบ
ZephyrCard(
title: 'ไธไธ UI ็ปไปถ',
subtitle: 'ไธบไผไธ็บงๅบ็จ็ฒพๅฟ่ฎพ่ฎก',
content: const Text(
'ZephyrUI ๆไพไบ่ถ
่ฟ 60 ไธช้ซ่ดจ้ใๆ ้็ขไธๅฎๅ
จๅฏๅฎๅถ็ Flutter ็ปไปถ๏ผ'
'ๅธฎๅฉๅผๅ่
ๅฟซ้ๆๅปบ็ฐไปฃๅ็็จๆท็้ขใ',
),
actions: [
ZephyrButton(
text: 'ๆฅ็ๆๆกฃ',
onPressed: () => print('View documentation'),
type: ZephyrButtonType.text,
),
ZephyrButton(
text: '็ซๅณๅผๅง',
onPressed: () => print('Get started'),
type: ZephyrButtonType.primary,
),
],
),
],
),
),
);
}
}- Flutter: ^3.0.0
- Dart: ^3.0.0
- iOS: 12.0+
- Android: API 21+
# 1. ๅ
้ไปๅบ
git clone https://github.com/Agions/zephyr-ui.git
cd zephyr-ui
# 2. ๅฎ่ฃ
ไพ่ต
flutter pub get
# 3. ่ฟ่ก็คบไพๅบ็จ
flutter run -t lib/main.dart
# 4. ่ฟ่กๆต่ฏ
flutter test
# 5. ้ๆๅๆ
flutter analyze| ็ฑปๅซ | ็ปไปถๆฐ้ | ็ถๆ | ๆ่ฟฐ |
|---|---|---|---|
| ๐ ่กจๅ็ปไปถ | 13 | โ | ่พๅ ฅใ้ๆฉใ้ช่ฏ็ญ่กจๅๅ ็ด |
| ๐ฏ ๅบ็ก็ปไปถ | 8 | โ | ๆ้ฎใๅก็ใๅคดๅ็ญๅบ็กๅ ็ด |
| ๐งญ ๅฏผ่ช็ปไปถ | 8 | โ | ้้กนๅกใๆญฅ้ชคๅจใ้ขๅ ๅฑ็ญ |
| ๐ ๆฐๆฎๅฑ็คบ | 13 | โ | ่กจๆ ผใๅ่กจใๅพ่กจ็ญๆฐๆฎ็ปไปถ |
| ๐ฌ ๅ้ฆ็ปไปถ | 6 | โ | ๆ็คบใๅ ่ฝฝใๅฏน่ฏๆก็ญ |
| ๐๏ธ ๅธๅฑ็ปไปถ | 4 | โ | ็ฝๆ ผใๅฎนๅจใๆๅ ้ขๆฟ็ญ |
| ๐ ้ซ็บง็ปไปถ | 16 | โ | ๅพ่กจใไธไผ ใ็ผ่พๅจ็ญ |
- ็ญ้่ฝฝ๏ผๅฎๆถ้ข่งไปฃ็ ๆดๆน
- ๅผๅๅทฅๅ ท๏ผๅฎๆด็ๅผๅ่พ ๅฉๅทฅๅ ท้
- ็ฑปๅๅฎๅ จ๏ผๅฎๆด็ TypeScript ๆฏๆ
- ๆต่ฏๅทฅๅ ท๏ผๅ ็ฝฎๆต่ฏๆกๆถๅๅทฅๅ ท
class ZephyrPerformanceMetrics {
static const Duration targetFrameTime = Duration(milliseconds: 16);
static const Duration maxBuildTime = Duration(milliseconds: 2);
static const int maxMemoryUsage = 100; // MB
static const double jankThreshold = 0.1;
}โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ZephyrUI ๆถๆ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โ โ ่กจ็ฐๅฑ โ โ ็ปไปถๅฑ โ โ ๅทฅๅ
ทๅฑ โ โ
โ โ โ โ โ โ โ โ
โ โ โข ไธป้ข็ณป็ป โ โ โข ๅบ็ก็ปไปถ โ โ โข ๅทฅๅ
ทๅฝๆฐ โ โ
โ โ โข ๆ ทๅผ็ฎก็ โ โ โข ๅคๅ็ปไปถ โ โ โข ๅธธ้ๅฎไน โ โ
โ โ โข ๅๅบๅผๅธๅฑ โ โ โข ไธๅก็ปไปถ โ โ โข ่พ
ๅฉ็ฑป โ โ
โ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โ โ
โ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โ โ ๆๅกๅฑ โ โ ๆฐๆฎๅฑ โ โ ๅนณๅฐๅฑ โ โ
โ โ โ โ โ โ โ โ
โ โ โข ไธป้ขๆๅก โ โ โข ็ถๆ็ฎก็ โ โ โข iOS โ โ
โ โ โข ๅจ็ปๆๅก โ โ โข ๆฐๆฎๆจกๅ โ โ โข Android โ โ
โ โ โข ไบไปถๆๅก โ โ โข ไธๅก้ป่พ โ โ โข Web โ โ
โ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- ไธ่ดๆง๏ผ็ปไธ็่ฎพ่ฎก่ฏญ่จๅไบคไบๆจกๅผ
- ๅฏ่ฎฟ้ฎๆง๏ผ้ตๅพช WCAG 2.1 ๆ ๅ
- ๆง่ฝ๏ผไผๅ็ๆธฒๆๅๅ ๅญไฝฟ็จ
- ๅฏๅฎๅถๆง๏ผ็ตๆดป็ไธป้ข็ณป็ป
- ๆ็จๆง๏ผ็ด่ง็ API ่ฎพ่ฎก
| ็ปไปถ | ๅ่ฝ | ็ถๆ |
|---|---|---|
ZephyrInput |
ๆๆฌ่พๅ ฅๆก | โ |
ZephyrSelect |
ไธๆ้ๆฉๅจ | โ |
ZephyrDatePicker |
ๆฅๆ้ๆฉๅจ | โ |
ZephyrCheckbox |
ๅค้ๆก | โ |
ZephyrRadio |
ๅ้ๆ้ฎ | โ |
ZephyrSwitch |
ๅผๅ ณๅๆข | โ |
ZephyrSlider |
ๆปๅ็ปไปถ | โ |
ZephyrRating |
่ฏๅ็ปไปถ | โ |
ZephyrTimePicker |
ๆถ้ด้ๆฉๅจ | โ |
ZephyrTextArea |
ๅค่กๆๆฌ่พๅ ฅ | โ |
ZephyrCheckboxGroup |
ๅค้ๆก็ป | โ |
ZephyrRadioGroup |
ๅ้ๆก็ป | โ |
| ็ปไปถ | ๅ่ฝ | ็ถๆ |
|---|---|---|
ZephyrButton |
ๅคๆ ทๅผๆ้ฎ | โ |
ZephyrAvatar |
ๅคดๅ็ปไปถ | โ |
ZephyrBadge |
ๅพฝ็ซ ๆ็คบๅจ | โ |
ZephyrCard |
ๅก็็ปไปถ | โ |
ZephyrChip |
ๆ ็ญพ้ๆฉๅจ | โ |
ZephyrIcon |
ๅพๆ ็ปไปถ | โ |
ZephyrText |
ๆๆฌ็ปไปถ | โ |
ZephyrDivider |
ๅๅฒ็บฟ็ปไปถ | โ |
| ็ปไปถ | ๅ่ฝ | ็ถๆ |
|---|---|---|
ZephyrTabs |
้้กนๅกๅฏผ่ช | โ |
ZephyrStepper |
ๆญฅ้ชคๅจ | โ |
ZephyrBreadcrumb |
้ขๅ ๅฑๅฏผ่ช | โ |
ZephyrPagination |
ๅ้กต็ปไปถ | โ |
ZephyrBottomNavigationBar |
ๅบ้จๅฏผ่ชๆ | โ |
ZephyrSideMenu |
ไพง่พน่ๅ | โ |
ZephyrNavigationRail |
ๅฏผ่ชๆ | โ |
ZephyrTour |
ๅผๅฏผๆธธ่ง | โ |
# 1. Fork ไปๅบ
# 2. ๅ
้ๅฐๆฌๅฐ
git clone https://github.com/YOUR_USERNAME/zephyr-ui.git
cd zephyr-ui
# 3. ๆทปๅ ไธๆธธไปๅบ
git remote add upstream https://github.com/Agions/zephyr-ui.git
# 4. ๅๅปบๅ่ฝๅๆฏ
git checkout -b feature/your-feature-name
# 5. ๅฎ่ฃ
ไพ่ต
flutter pub get
# 6. ๅผๅๅๆต่ฏ
flutter test
flutter analyze- ๐ ไปฃ็ ้ฃๆ ผ๏ผ้ตๅพช Dart ๅฎๆน่ง่
- ๐งช ๆต่ฏ่ฆ็๏ผไฟๆ 90%+ ็ๆต่ฏ่ฆ็็
- ๐ ๆๆกฃ๏ผไธบๆๆๅ ฌๅ ฑ API ็ผๅๆๆกฃๆณจ้
- ๐จ ่ฎพ่ฎก๏ผ้ตๅพช Material Design 3 ๆๅ
- โฟ ๆ ้็ข๏ผ็กฎไฟ WCAG AA ๅ่ง
# ๆไบคๆ ผๅผ
git commit -m "feat: ๆทปๅ ๆฐ็ปไปถ X"
git commit -m "fix: ไฟฎๅค็ปไปถ Y ็ bug"
git commit -m "docs: ๆดๆฐ README ๆๆกฃ"
git commit -m "style: ไปฃ็ ๆ ผๅผๅ"
git commit -m "refactor: ้ๆ็ปไปถ็ปๆ"
git commit -m "test: ๆทปๅ ๅๅ
ๆต่ฏ"- ๆๆกฃ๏ผไป ๅฎๆดๆๆกฃ ๅผๅง
- ็คบไพ๏ผๆฅ็ ็คบไพๅบ็จ
- ้ฎ้ขๆฅๅ๏ผGitHub Issues
ไธบไผไธๅฎขๆทๆไพไธไธๆฏๆๆๅก๏ผ
- ๐ฏ ไผๅ ๆฏๆ๏ผ24/7 ๆๆฏๆฏๆ
- ๐ ๅฎๅถๅผๅ๏ผๅ่ฝๅฎๅถๅๅผๅ
- ๐ง ๆๆฏๅจ่ฏข๏ผๆถๆ่ฎพ่ฎกๅๆง่ฝไผๅ
ๆฌ้กน็ฎ้็จ MIT ๅ่ฎฎ ๅผๆบใ
โ ๅ ่ฎธ๏ผ
- ๅไธไฝฟ็จ
- ไฟฎๆนๅๅๅ
- ็งไบบไฝฟ็จ
- ๅญๅ่ฎฎไฝฟ็จ
โ ็ฆๆญข๏ผ
- ๅฃฐๆ่ดฃไปป
- ่ฏ่ฏธๆณๅพ
๐ ่ฆๆฑ๏ผ
- ๅ ๅซ่ฎธๅฏ่ฏๅ็ๆๅฃฐๆ
- ๅฃฐๆ้ๅคงๆดๆน
่ฏฆ่ง LICENSE ๆไปถใ
็ฑ Agions ๅข้็จ โค๏ธ ็ฒพๅฟๆ้
