# flutter-vant4
**Repository Path**: lesterchn/flutter-vant4
## Basic Information
- **Project Name**: flutter-vant4
- **Description**: 轻量、可定制的移动端 Flutter 组件库(高仿Vant 4)
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-16
- **Last Updated**: 2024-07-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Flutter Vant
> 轻量、可定制的移动端 `Flutter` 组件库
> 仿照 `Vant4` 实现 `Flutter Vant UI` 库,尽可能贴合Vant原生的API
## 1. 实现功能与特性
+ 提供UI明亮与暗黑模式
+ 提供Vant4官方Demo,并实现监听系统主题模式变化变更主题模式
+ 提供Flutter风格兼容Vant4的主题与样式分离
## 2. 组件
> 第一个百分比组件完成度;
> 第二个百分比DEMO完成度;
### 2.1 Basic 基础组件
+ [x] Button 按钮 - 100% - 90%
+ [x] Cell 单元格 - 70% - 70%
+ [ ] ConfigProvider 全局配置
+ [x] Icon 图标 - 10% - 0%
+ [x] Image 图片 - 100% - 100%
+ [x] Layout 布局 - 40% - 40%
+ [ ] Popup 弹出层 - 0% - 0%
+ [ ] Space 样式 - 0% - 0%
+ [ ] Toast 轻提示 - 0% - 0%
### 2.2 Form 表单组件
+ [ ] Calendar 日历
+ [ ] Cascader 级联选择
## 3. DEMO 代码预览
```dart
/// demo:button
const VanDocDemoBlockTitle(title: "按钮类型", paddingTop: 20),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(text: "主要按钮", type: VanButtonType.primary),
VanButton(text: "成功按钮", type: VanButtonType.success),
VanButton(text: "默认按钮", type: VanButtonType.defaults),
VanButton(text: "危险按钮", type: VanButtonType.danger),
VanButton(text: "警告按钮", type: VanButtonType.warning),
]),
const VanDocDemoBlockTitle(title: "朴素类型"),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(text: "朴素类型", type: VanButtonType.primary, plain: true),
VanButton(text: "朴素类型", type: VanButtonType.success, plain: true),
]),
const VanDocDemoBlockTitle(title: "细边框"),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(text: "细边框按钮", type: VanButtonType.primary, plain: true, hairline: true),
VanButton(text: "细边框按钮", type: VanButtonType.success, plain: true, hairline: true),
]),
const VanDocDemoBlockTitle(title: "禁用状态"),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(text: "禁用状态", type: VanButtonType.primary, disabled: true),
VanButton(text: "禁用状态", type: VanButtonType.success, disabled: true),
]),
const VanDocDemoBlockTitle(title: "加载状态"),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(type: VanButtonType.primary, loading: true),
VanButton(type: VanButtonType.primary, loading: true, loadingType: VanButtonLoadingType.spinner),
VanButton(type: VanButtonType.primary, loading: true, loadingText: "加载中..."),
]),
const VanDocDemoBlockTitle(title: "按钮形状"),
const Wrap(spacing: 20, runSpacing: 8, children: [
VanButton(text: "方形按钮", type: VanButtonType.primary, square: true),
VanButton(text: "圆形按钮", type: VanButtonType.success, round: true),
]),
...
```
```dart
/// demo:image
const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
VanImage.network(src: src, width: 100, height: 100),
const VanDocDemoBlockTitle(title: "填充模式", paddingLeft: 0),
VanImage.network(src: src, width: 100, height: 100, fit: BoxFit.contain),
...
```
## 4. 下载并预览
