benjaken / flutter_vant_kit Goto Github PK

A Vant style flutter UI library.

Home Page: https://benjaken.gitbook.io/flutter-vant-kit

License: MIT License

Java 0.03% Shell 0.17% Swift 0.03% Ruby 0.46% C 0.02% Objective-C 0.16% Dart 99.12%

flutter_vant_kit's Introduction

此项目仅供本人学习用，更新频率慢，若在项目中使用请移步到其它成熟的组件库
This project is only for my own study, the update frequency is slow and untested, if you use it in the project, please move to other mature component libraries

Flutter Vant Kit

Flutter Vant Kit is a Vant style flutter UI library.

Introduction

How to use

dependencies:
  flutter_vant_kit: ^0.3.0

How to run demo

cd example/
flutter run

API

View Documentation 或【中文版|English】

Demo Screenshot

flutter_vant_kit's People

Contributors

Stargazers

Watchers

flutter_vant_kit's Issues

Field 的 label placeholder 希望能直接使用 Text 对象

我现在遇到的问题是这样的，我的设计稿字体比较大，但是不知道为啥，貌似没有严格按照某种设计标准执行，

我需要单独设置 label placeholder 字体大小和颜色。

style 属性貌似只能照顾输入后的颜色。

我觉得使用 Text 对象设置 label placeholder 会更好。不知道是否有其他方式实现。

ImageWall 的文档需要完善

ImageWall 的文档需要提醒在 iOS android 端申请权限。处理权限相关的逻辑

下面是我除了权限的逻辑，感觉应该有更好的方法。

    <key>NSPhotoLibraryUsageDescription</key>
    <string>photos</string>
    <key>NSCameraUsageDescription</key>
    <string></string>

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.CAMERA"/>

import 'package:permission_handler/permission_handler.dart';
import 'package:flutter_vant_kit/theme/style.dart' as VantStyle;

  _inspectPermission() async {
    if (Platform.isIOS) {
      var status = await Permission.photos.status;
      if (!status.isGranted) {
        return;
      }
      status = await Permission.camera.status;
      if (!status.isGranted) {
        return;
      }
      setState(() {
        _permissionVerify = true;
      });
    } else if (Platform.isAndroid) {
      var status = await Permission.storage.status;
      if (!status.isGranted) {
        return;
      }
      status = await Permission.camera.status;
      if (!status.isGranted) {
        return;
      }
      setState(() {
        _permissionVerify = true;
      });
    }
  }


_requestPermission(context) async {
    if (Platform.isIOS) {
      Map<Permission, PermissionStatus> statuses = await [
        Permission.photos,
        Permission.camera,
      ].request();
      if (!(statuses[Permission.photos].isGranted &&
          statuses[Permission.camera].isGranted)) {
        showDialog(
          context: context,
          builder: (_) {
            return NDialog(
              title: "申请权限",
              message: "设置LOGO和分享封面，需要您授权使用相册和相机权限。",
              showCancelButton: true,
              onConfirm: () {
                openAppSettings();
              },
            );
          },
        );
      }
    } else if (Platform.isAndroid) {
      Map<Permission, PermissionStatus> statuses = await [
        Permission.storage,
        Permission.camera,
      ].request();
      if (!(statuses[Permission.storage].isGranted &&
          statuses[Permission.camera].isGranted)) {
        showDialog(
          context: context,
          builder: (_) {
            return NDialog(
              title: "申请权限",
              message: "设置LOGO和分享封面，需要您授权使用存储和相机权限。",
              showCancelButton: true,
              onConfirm: () {
                openAppSettings();
              },
            );
          },
        );
      }
    }
    _inspectPermission();
  }

大概的过程：
因为 ImageWall 没有找到合适的方法处理权限，所以写了一个一样的按钮。

   _widget = Container(
        padding: VantStyle.Style.imageWallPadding,
        child: Wrap(
          direction: Axis.horizontal,
          spacing: VantStyle.Style.imageWallItemGutter,
          runSpacing: VantStyle.Style.imageWallItemGutter,
          children: [
            InkWell(
              child: Container(
                width: VantStyle.Style.imageWallItemSize,
                height: VantStyle.Style.imageWallItemSize,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: VantStyle.Style.imageWallUploadBorderColor,
                  ),
                  borderRadius: BorderRadius.circular(
                    VantStyle.Style.imageWallItemBorderRadius,
                  ),
                ),
                child: Icon(
                  Icons.add,
                  color: VantStyle.Style.imageWallUploadColor,
                  size: VantStyle.Style.imageWallUploadSize,
                ),
              ),
              onTap: () {
                _requestPermission(context);
              },
            ),
          ],
        ),
      );

进入页面 initState 方法调用 _inspectPermission() 检查权限。
当 bool _permissionVerify = false; 时，在本应该放置 ImageWall 的位置，放置一个和它长的一样的按钮，点击调用 _requestPermission() 询问授权。
授权成功了将假的 ImageWall 替换成真的。
如果授权有问题，就询问是否进入设置页面。

大概是这个逻辑。希望有人能提供一个更加舒服的方法。

使用插件后，删除插件工程跑步起来了

我的工程新建之后只添加过一次插件，是这个插件，因为使用的时候编译没通过，我就删除了插件，返现工程跑不起来了。

Launching lib/main.dart on 郭大鹏的iPhone in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: BBAXGSNKQ3
Running Xcode build...
Xcode build done.                                            3.8s
Failed to build iOS app
Error output from Xcode build:
↳
    2020-05-11 17:52:06.964 xcodebuild[41093:612173] [MT] iPhoneConnect: 📱<DVTiOSDevice (0x7fdc7a92d950), 郭大鹏的iPhone, iPhone, 13.4.1 (17E8258), 00008030-001670641A29802E> == Underlying device preparation errors ==
    2020-05-11 17:52:06.964 xcodebuild[41093:612173] [MT] iPhoneConnect: Failed _shouldMakeReadyForDevelopment check even though device is not locked by passcode.
    Domain: com.apple.platform.iphoneos
    Code: 5
    Failure Reason: allowsSecureServices: 1. isConnected: 0. Platform: <DVTPlatform:0x7fdc75c41b90:'com.apple.platform.iphoneos':<DVTFilePath:0x7fdc75c41910:'/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform'>>. DTDKDeviceIdentifierIsIDID: 0
    User Info: {
        DVTDeviceDescription = "\Ud83d\Udcf1<DVTiOSDevice (0x7fdc7a92d950), \U90ed\U5927\U9e4f\U7684iPhone, iPhone, 13.4.1 (17E8258), 00008030-001670641A29802E>";
    }
    --
    2020-05-11 17:52:06.964 xcodebuild[41093:612173] [MT] iPhoneConnect: 📱<DVTiOSDevice (0x7fdc7a92d950), 郭大鹏的iPhone, iPhone, 13.4.1 (17E8258), 00008030-001670641A29802E> == END: Underlying device preparation errors ==
    ** BUILD FAILED **


Xcode's output:
↳
    diff: /Users/felix/Desktop/applive_flutter/applive/ios/./Podfile.lock: No such file or directory
    error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.
    note: Using new build system
    note: Building targets in parallel
    note: Planning build
    note: Constructing build description

Could not build the precompiled application for the device.

Error launching application on 郭大鹏的iPhone.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.0, on Mac OS X 10.15.4 19E287, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Android Studio (version 3.6)
[✓] Android Studio
[!] IntelliJ IDEA Ultimate Edition (version 2020.1.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

Better form needed!!!

Better form is needed just like this, flutter_form_builder. But flutter_form_builder UI is ugly.

开发规划

现有组件部分增加动画效果
重构list组件
增加Popup、Switch、DropdownMenu、Notify、Overlay组件
增加Sku业务组件
优化Calendar加载速度
增加英文文档
增加组件中英文切换
增加主题切换
完善部分组件（actionsheet、treeselect）

关于 flutter packages pub publish 出现 Failed to upload the package的解决方案

1.设置终端代理
这里用的proxifier+shadowsock；
具体配置参考终端使用 Shadowsocks 的代理方案：Proxifier
设置后测试
curl www.google.com
有回文则成功
2.关闭国内镜像

vi ~/.bash_profile

// 将以下两行注释掉
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

// 之后让配置生效
source ~/.bash_profile

3.cd到仓库根目录，执行一次

flutter packages get

这时候就会把你的插件里的lock文件中的国内镜像转到官方源上了
4.正常使用

sudo flutter packages pub publish -v

或

flutter packages pub publish --server=https://pub.dartlang.org

即可

flutter v1.17.0 安装后 iOS 端不能直接工作【带解决办法】

这个问题很有可能是 flutter 自己的bug，反正不是很友好。

当你把插件添加到 pubspec.yaml 文件，flutter pub get 后，直接运行 iOS 端应该是遇到一些问题。android端能正常运行，只有一段下面这种看着不舒服的提示。

注: /Users/felix/.pub-cache/hosted/pub.flutter-io.cn/multi_image_picker-4.6.7/android/src/main/java/com/vitanov/multiimagepicker/FileDirectory.java使用或覆盖了已过时的 API。
注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。

iOS 你应该会看到的日志：
大概这个样子。

Launching lib/main.dart on 郭大鹏的iPhone in debug mode...
Signing iOS app for device deployment using developer identity: "Apple Development: [email protected] (M4243PURVY)"
Running pod install...                                              1.2s
CocoaPods' output:
↳
      Preparing

    Analyzing dependencies

    Inspecting targets to integrate
      Using `ARCHS` setting to build architectures of target `Pods-Runner`: (``)

    Fetching external sources
    -> Fetching podspec for `Flutter` from `Flutter`
    -> Fetching podspec for `multi_image_picker` from `.symlinks/plugins/multi_image_picker/ios`

    Resolving dependencies of `Podfile`
      CDN: trunk Relative path: CocoaPods-version.yml exists! Returning local because checking is only perfomed in repo update
    [!] CocoaPods could not find compatible versions for pod "multi_image_picker":
      In Podfile:
        multi_image_picker (from `.symlinks/plugins/multi_image_picker/ios`)

    Specs satisfying the `multi_image_picker (from `.symlinks/plugins/multi_image_picker/ios`)` dependency were found, but they required a higher minimum deployment target.

    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:328:in `raise_error_unless_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:310:in `block in unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:308:in `tap'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:308:in `unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:684:in `attempt_to_activate'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:254:in `process_topmost_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:182:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolver.rb:43:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/resolver.rb:94:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:1065:in `block in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/user_interface.rb:64:in `section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:1063:in `resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:124:in `analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:410:in `analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:235:in `block in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/user_interface.rb:64:in `section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:234:in `resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:156:in `install!'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/command/install.rb:52:in `run'
    /Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/command.rb:52:in `run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/bin/pod:55:in `<top (required)>'
    /usr/local/bin/pod:23:in `load'
    /usr/local/bin/pod:23:in `<main>'

Error output from CocoaPods:
↳

    [!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Exception: Error running pod install

打开 Xcode ，你应该看到一堆红字。

Showing Recent Issues
/Users/felix/EasyWork/Project/lightEnter/other/qingLive/project/applive_flutter/applive/ios/Flutter/Debug.xcconfig:1: could not find included file 'Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths

然后使用终端进入 iOS 项目目录运行 pod install，会有下面的提示。这时候不要慌张。

$ pod install
Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "multi_image_picker":
  In Podfile:
    multi_image_picker (from `.symlinks/plugins/multi_image_picker/ios`)

Specs satisfying the `multi_image_picker (from `.symlinks/plugins/multi_image_picker/ios`)` dependency were found, but they required a higher minimum deployment target.

[!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

修改 iOS 项目目录下面的 Podfile 文件，在 flutter v1.17.0 版本中，貌似这个文件只有在 flutter 插件时才会出现，我记得以前不是这样的。可能是幻觉。我将 platform :ios, '13.0' 这个设置为 iOS13 了，因为我计划使用 switchUI 写部分功能。之后在终端 iOS项目目录执行 pod install。经过漫长的等待（我这里网络的问题），看到下面提示。

$ pod install
Analyzing dependencies
Downloading dependencies
Installing BSGridCollectionViewLayout (1.2.5)
Installing BSImagePicker (2.10.3)
Installing BSImageView (1.0.3)
Installing Flutter (1.0.0)
Installing multi_image_picker (4.6.7)
Generating Pods project
Integrating client project
Pod installation complete! There are 2 dependencies from the Podfile and 5 total pods installed.

[!] CocoaPods did not set the base configuration of your project because your project already has a custom config set. In order for CocoaPods integration to work at all, please either set the base configurations of the target `Runner` to `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` or include the `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` in your build configuration (`Flutter/Release.xcconfig`).

这时候 Xcode 会弹出一个提示，意思是 Xcode 项目有一些变化，你需要决定一下，是使用现在打开的覆盖硬盘上的，还是读取硬盘上的丢弃现在打开的，我选择了后者，Xcode Version 11.4.1 (11E503a) 这个版本，是左边的按钮。我忘记截图了。

然后和想的还是不一样，Pods 这个项目看不见，不过没关系，关闭Xcode在打开一次就好了，我是在 Android studio 中右键打开的。

之后就能运行了。

bug Unhandled Exception: setState() called after dispose(): _DemoButton

thanks your perfect ui framework.
when i run demo,i get such error:

E/flutter (20403): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: setState() called after dispose(): _DemoButton#3b59a(lifecycle state: defunct, not mounted)
E/flutter (20403): This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
E/flutter (20403): The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
E/flutter (20403): This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
E/flutter (20403): #0 State.setState. (package:flutter/src/widgets/framewo

Cleanup non issue

When my account was compromised a spam issue was created in this repo. I sincerely apologize. Cleaning up such issues via script.

怎么触发Field的onSubmit方法?

Android dependency androidx.coordinatorlayout:coordinatorlayout has different version for the compile (1.0.0-rc01) and runtime (1.0.0) classpath. You should manually set the same version via DependencyResolution'

And even if I try to fix it, there is always another androidX dependency that fails... :(