搜索到
5
篇与
Flutter
的结果
-
【Flutter】如何自定义Flutter MaterialApp主题色(primarySwatch)？ 【Flutter】如何自定义Flutter MaterialApp主题色(primarySwatch)？问题在实际使用Flutter进行MaterialApp开发时，大都遇到一个问题，Flutter提供的可供选择的主题色(MaterialColor)很少，仅有如下几种：MaterialColor red MaterialColor pink MaterialColor purple MaterialColor deepPurple MaterialColor indigo MaterialColor blue MaterialColor lightBlue MaterialColor cyan MaterialColor teal MaterialColor green MaterialColor lightGreen MaterialColor lime MaterialColor yellow MaterialColor amber MaterialColor orange MaterialColor deepOrange MaterialColor brown MaterialColor grey MaterialColor blueGrey那么我们品牌有自己专属的品牌色或我有自己钟爱的颜色怎么自由设置主题色呢？研究通过material\colors.dart文件我们可以发现，其中关于MaterialColor的描述是这样的/// Defines a single color as well a color swatch with ten shades of the color. /// /// The color's shades are referred to by index. The greater the index, the /// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900. /// The value of this color should the same the value of index 500 and [shade500]. /// /// See also: /// /// * [Colors], which defines all of the standard material colors. class MaterialColor extends ColorSwatch<int> { /// Creates a color swatch with a variety of shades. /// /// The `primary` argument should be the 32 bit ARGB value of one of the /// values in the swatch, as would be passed to the [Color.new] constructor /// for that same color, and as is exposed by [value]. (This is distinct from /// the specific index of the color in the swatch.) const MaterialColor(super.primary, super.swatch); /// The lightest shade. Color get shade50 => this[50]!; /// The second lightest shade. Color get shade100 => this[100]!; /// The third lightest shade. Color get shade200 => this[200]!; /// The fourth lightest shade. Color get shade300 => this[300]!; /// The fifth lightest shade. Color get shade400 => this[400]!; /// The default shade. Color get shade500 => this[500]!; /// The fourth darkest shade. Color get shade600 => this[600]!; /// The third darkest shade. Color get shade700 => this[700]!; /// The second darkest shade. Color get shade800 => this[800]!; /// The darkest shade. Color get shade900 => this[900]!; }通过官方给MaterialColor类的注释我们不难发现，要自定义MaterialColor我们需要传入一个颜色初始值primary及从亮到暗共十个级别的Map<int, Color> 这里有一张来自Flutter官方给出的Colors.blue的颜色卡 可以看出primary应该就是就是我们想要的主要颜色，同时也是shade500的值 下面我们只需要解决如何定义给出包含这10个级别的颜色即可解决办法目前公认的解决办法有如下几种1、函数生成自定义色板 MaterialColor createMaterialColor(Color color) { List strengths = <double>[.05]; Map<int, Color> swatch = {}; final int r = color.red, g = color.green, b = color.blue; for (int i = 1; i < 10; i++) { strengths.add(0.1 * i); } strengths.forEach((strength) { final double ds = 0.5 - strength; swatch[(strength * 1000).round()] = Color.fromRGBO( r + ((ds < 0 ? r : (255 - r)) * ds).round(), g + ((ds < 0 ? g : (255 - g)) * ds).round(), b + ((ds < 0 ? b : (255 - b)) * ds).round(), 1, ); }); return MaterialColor(color.value, swatch); }使用时仅需要在设置primarySwatch时调用该函数即可 示例primarySwatch: createMaterialColor(Colors.blueAccent) // 第一种 primarySwatch: createMaterialColor(Color(0xFF448AFF)) // 第二种，注意为8为16进制，首两位FF代表不透明2、改变透明值以生成不同亮度级别(不推荐)注意：并不推荐该种方法，该方法会导致组件变透明而不是颜色深浅示例MaterialColor myColor = MaterialColor(0xFF880E4F, color); Map<int, Color> color = { 50:Color.fromRGBO(4,131,184, .1), 100:Color.fromRGBO(4,131,184, .2), 200:Color.fromRGBO(4,131,184, .3), 300:Color.fromRGBO(4,131,184, .4), 400:Color.fromRGBO(4,131,184, .5), 500:Color.fromRGBO(4,131,184, .6), 600:Color.fromRGBO(4,131,184, .7), 700:Color.fromRGBO(4,131,184, .8), 800:Color.fromRGBO(4,131,184, .9), 900:Color.fromRGBO(4,131,184, 1), };使用时赋myColor给primarySwatch即可3、手动选择不同亮度级别颜色如果您对颜色有严格要求，可以手动自定义不同亮度颜色，这里不给出示例结语实战项目：https://www.wpbkj.com/archives/flutter_wpbkj_express.html该项目中自定义了主题色为Colors.blueAccent可供参考本文由WPBKJ原创，转载请声明 -
【Flutter】【开源】WPBKJ 快递查询助手 WPBKJ 快递查询助手开源仓库GITHUB GITEE介绍WPBKJ 快递查询助手初衷是做一款Flutter入门软件，源代码注释详细，适合Flutter新手学习参考。WPBKJ 快递查询助手基于Flutter，实现全平台应用，通过调用快递查询API实现快递查询目标：功能丰富 ：支持快递查询，添加标签，清空数据等；易于读懂 ：源代码注释丰富，尽量在小的细节都添加注释，使得Flutter初学者可轻松理解；跨平台性 ：支持Android，Windows，iOS，MacOS，Linux等平台。使用releases发布Android、Windows和Linux版本，其他平台可自行编译使用(后期测试设备允许后全平台release将发布) Android、Windows和Linux可直接下载releases最新发行版使用 GITEE releases GITHUB releases Android通常根据系统架构选择下载文件 Android通常架构为arm64，下载arm64版即可使用 如您不清楚或不确定系统架构，请下载通用版本(体积稍大) 所有架构通用:app-release.apk arm64:app-arm64-v8a-release.apk armeabi:app-armeabi-v7a-release.apk x86_64:app-x86_64-release.apk Windows请下载Linux-bundle.tar.gz解压后运行bundle/wpbkj_express直接使用 Linux请下载Windows-Release.zip解压后运行Release/wpbkj_express.exe直接使用项目衍生文章 【Flutter】如何自定义Flutter MaterialApp主题色(primarySwatch)？ 微信公众号 掘金 CSDN 知乎 百家号 博客 点我 点我 点我 点我 点我 点我 编译流程如您需要自行编译学习，请遵循以下流程请先确保您的Flutter版本为3.71、申请API token(可选)若您仅学习UI界面可忽略此步骤。本应用依赖由ALAPI提供的API接口实现主要功能，在您自行编译本应用前请先前往ALAPI用户管理中心申请token(免费版每天可有200次调用，学习完全够用)申请token后请将token填写到：lib/api/config.dart文件中，修改变量token的值即可2、开始编译flutter pub get flutter run最新版本更新日志1.0.4版本更新 移动端添加首页刷新震动反馈 修改主题色，完美适配深色模式屏幕截图移动端桌面端支持本项目开源贡献您可以提交issues和pr，这是对本项目的最大支持捐助Licensewpbkj/flutter_wpbkj_express is licensed under the Apache License 2.0 A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
-
【Flutter】Android Studio (version 2022.1) flutter doctor报错Unable to find bundled Java version. 换新电脑之后在Android Studio官网安装最新版本的Android Studio之后运行flutter doctor报错Unable to find bundled Java version.产生原因Android Studio的文件夹构成发生改变，Flutter中配置未发生改变解决方法方案一(推荐)：将Andriod Studio安装路径下的jbr文件夹内的所有内容复制到jre文件夹中。 方案二(不推荐)：使用GitHub最新版本Flutter-masterFlutter官方表示将在GitHub-master通道中修复参考：https://github.com/flutter/flutter/issues/118790
-
【Flutter】在Android Studio安装Android SDK Command-line Tools后Flutter Doctor仍报错 今天运行Flutter Doctor时发现如下报错[✗] Android toolchain - develop for Android devices ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details.可以看到提示SDK的cmdline-tools未安装，按理说去Android Studio的设置中安装即可，但安装后仍报错，原因是我改过一次SDK的路径，将默认路径改到了F盘中。解决办法：改变Flutter Config设置 flutter config --android-sdk "F:\android\sdk"将Flutter Config中的Android SDK路径改为自己的即可
-
【原创软件】WPBKJ 每日EMO WPBKJ 每日EMO手机当前最新版本：v1.1.1+2v1.1.1+2: 手机版第一版本，除与电脑版相同功能外，加入每日简报功能PC当前最新版本：v1.1.2v1.1.2: 加入升级更新提示详细消息，采用upx并移除不必要库打包压缩软件50%大小，移除urllib库采用requests库PC更新记录v1.1.1: 添加自动联网检查更新，快速下载更新，优化代码，删除不必要重复代码 v1.0.3: 修复WIN10及以下系统验证本地SSL证书而无法启动的问题，优化代码 v1.0.2: 添加6个接口（共15个）介绍收集了一些有趣的API接口，主要供娱乐使用 灵感就是想练习PyQt5[/汪汪]手机版基于Flutter PC版基于PyQt5制作，主题使用Qt-MaterialPC打包环境/依赖Python 3.9.9 64-bit PyQt5 5.15.4 qt-material 2.12使用说明本程序已发布手机版和WINDOWS发行版，可直接下载使用下载手机版v1.1.1+2：https://www.123pan.com/s/Klx9-15Df 提取码:bvpYPC版最新版本v1.1.2：https://www.123pan.com/s/Klx9-9zDf 提取码:SI6R 历史版本 v1.1.1：https://www.123pan.com/s/Klx9-5tDf 提取码:pEz4 v1.0.3：https://www.123pan.com/s/Klx9-GtDf 提取码:ZefE v1.0.2：https://www.123pan.com/s/Klx9-ueDf 提取码:dcIj软件截图
