开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

带有图标波纹颜色的Flutter OutlinedButton

Flutter OutlinedButton是Flutter框架中的一个按钮组件，它具有图标、波纹效果和自定义颜色的特点。

概念： Flutter OutlinedButton是一种扁平化的按钮，通常用于显示次要操作或者在密集布局中使用。它具有一个可选的图标，当按钮被点击时，会显示一个波纹效果。同时，可以通过自定义颜色来改变按钮的外观。

分类： Flutter OutlinedButton属于Flutter框架中的Material Design风格按钮组件之一。

优势：

灵活性：Flutter OutlinedButton可以根据需求自定义按钮的颜色、图标和波纹效果，使得按钮在不同场景下具有更好的适应性。
易用性：Flutter OutlinedButton的使用非常简单，只需传入相应的参数即可创建一个具有图标、波纹效果和自定义颜色的按钮。
一致性：Flutter OutlinedButton符合Material Design的设计规范，可以保持应用程序的整体风格一致性。

应用场景： Flutter OutlinedButton适用于以下场景：

次要操作按钮：可以用于显示次要的操作，例如取消、返回等。
密集布局：由于Flutter OutlinedButton是扁平化的，适合在密集布局中使用，不会占用过多的空间。
自定义按钮：通过自定义颜色、图标和波纹效果，可以创建符合特定需求的按钮。

推荐的腾讯云相关产品：腾讯云提供了一系列与移动应用开发相关的产品和服务，以下是一些推荐的产品：

腾讯云移动应用开发平台：提供了丰富的移动应用开发工具和服务，帮助开发者快速构建高质量的移动应用。
腾讯云移动推送：提供了消息推送服务，可以实现向移动设备发送推送通知。
腾讯云移动分析：提供了移动应用数据分析服务，可以帮助开发者了解用户行为和应用性能，优化应用体验。

产品介绍链接地址：

腾讯云移动应用开发平台：https://cloud.tencent.com/product/madp
腾讯云移动推送：https://cloud.tencent.com/product/tpns
腾讯云移动分析：https://cloud.tencent.com/product/ma

相关搜索:如何更改OutlinedButton的边框颜色如何更改ElevatedButton和OutlinedButton的禁用颜色 Flutter PopupMenu更改图标颜色 Flutter 2:带有图标和文本的按钮 Flutter: BottomNavigationBar不更改活动图标颜色带有分类颜色条的树状图标注带有图标的Flutter AnimatedSwitcher未发生如何在flutter中更改特定的图标颜色？如何在flutter中填充图标的颜色 Flutter TextField选中时更改图标颜色如何使用conditional来定义flutter中的图标颜色？如何在flutter中更改图标按钮的颜色？如何在Flutter中打开带有图标按钮的抽屉？如何在flutter filterChip中更改复选图标颜色 Bootstrap和JavaScript按钮更改带有背景颜色的图标基于True/Fase条件的波纹线条颜色如何在FLutter的ThemeData()中更改ListTile前导图标颜色 Flutter web，图标渲染错误的图标有条件地改变垫子的颜色，形成波纹 Flutter:带有填充父对象背景颜色的透明子对象

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter 组件集录 | 新一代 Button 按钮参上

按钮一族现状随着 Flutter 3.3 的发布，RaisedButton 组件从 Flutter 框架中移除，曾为界面开疆拓土的按钮三兄弟彻底成为历史。...：返回按钮 IconButton ：图标按钮 CloseButton ：关闭按钮 FloatingActionButton ：浮动按钮还有一些多按钮集成的组件，将在后续文章中详细介绍：...三个按钮组件的默认表现如下，是 ElevatedButton 的默认表现：有圆角和阴影，在点击时有水波纹。...的默认表现：有圆角和外边线，内部无填充，在点击时有水波纹。...'), ); 如下，是 TextButton 的默认表现：无边线，无填充，在点击时有水波纹。

2.5K1 0

『Flutter』常用组件按钮、图片

OutlineButton（现在称为OutlinedButton）：这个按钮有一个边框，但没有背景色。当按下时，边框和文字颜色会变化，适用于需要强调边框而非背景色的场景。...InkWell：虽然不是一个标准的按钮组件，但它可以用来给几乎任何widget添加水波纹效果，从而制作自定义按钮。...中的 Icon 组件用于显示 Material 设计风格的图标。...常见属性及其作用： icon (IconData): 必需的属性，用于指定要显示的图标。通常从 Icons 类中选择一个图标。 size (double): 图标的大小。默认大小是 24.0。...color (Color): 图标的颜色。 semanticLabel (String): 用于辅助技术的标签。如果图标不仅仅是装饰性的，这个标签可以提供关于图标的更多信息。

5033 1

Flutter 小技巧之 Flutter 3 下的 ThemeExtensions 和 Material3

ThemeExtensions相信大家都用过 Flutter 里的 Theme ，在 Flutter 里可以通过修改全局的 ThemeData 就来实现一些样式上的调整，比如：全局去除 InkWell...theme: ThemeData( primarySwatch: Colors.blue, // 去掉 InkWell 的点击水波纹效果 splashFactory: NoSplash.splashFactory...( // 去掉 TextButton 的水波纹效果 style: ButtonStyle(splashFactory: NoSplash.splashFactory), ),),复制代码当然...事实上现在 Flutter 3.0 里 colorScheme 才是主题颜色的核心，而 primaryColorBrightness 和 primarySwatch 等参数在未来将会被弃用，所以如果目前你还在使用...，并通过 ColorScheme 配置更丰富的 HCT 颜色好了，现在你可以去问你的设计师：你知道什么是 HCT 么？

1.3K3 0

Flutter 小技巧之 ButtonStyle 和 MaterialStateProperty

相信大家当初在从 Flutter 1 切换到 Flutter 2 的时候，应该都有过这样一个疑问：为什么 FlatButton 和 RaisedButton 会被弃用替换成 TextButton 和...变化颜色； _TextButtonDefaultMouseCursor ：用于处理鼠标 MouseCursor 的 disabled；剩下的参则是通过我们熟悉的 ButtonStyleButton.allOrNull...事实上 TextButton 、 ElevatedButton 和 OutlinedButton 都是 ButtonStyleButton 的子类，他们都会遵循以下的原则： final ButtonStyle...所以，例如当你需要全局去除按键的水波纹时，如下代码所示，你可以修改 ThemeData 的 TextButtonTheme 来实现，因为 TextButton 内的 themeStyleOf 使用的就是...ThemeData( primarySwatch: Colors.blue, textButtonTheme: TextButtonThemeData( // 去掉 TextButton 的水波纹效果

2.7K4 0

Android MaterialButton使用详解，告别shape、selector

cornerRadius="25dp" app:strokeColor="@color/black" app:strokeWidth="3dp" /> app:strokeColor 描边颜色...com.google.android.material.button.MaterialButton style="@style/Widget.MaterialComponents.Button.OutlinedButton...app:rippleColor 点击波纹颜色文字按钮 <com.google.android.material.button.MaterialButton style="@style/Widget.MaterialComponents.Button.TextButton...<em>图标</em>位置，只能前后 iconPadding <em>图标</em>距文字距离，默认8dp iconSize <em>图标</em>大小 iconTint <em>图标</em>着色 iconTintMode <em>图标</em>着色模式 rippleColor 点击<em>波纹</em><em>颜色</em>...strokeColor 描边<em>颜色</em> strokeWidth 描边宽度 app:backgroundTint 背景色（注意命名空间） Github https://github.com/yechaoa/

1.1K2 0

Flutter中GridTile中图像上方的InkVell波纹

Flutter中GridTile中图像上方的InkVell波纹我认为这是在图像上显示波纹效果的更好方法。...Colors.transparent, child: InkWell( onTap: () { ... }, ), ), ), ], ); 我们创建了这个简单的小部件...，以在任何给定孩子的上方绘制墨水反应。...splashColor, onTap: onTap, ), ), ), ], ); } } 优秀的方法

7953 0

Flutter 1.22版本新增的Button

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。...：外观上并没有很大的不同，但TextButton、OutlinedButton、ElevatedButton 将外观属性集合为一个 ButtonStyle，非常方便统一控制。...TextButton、OutlinedButton、ElevatedButton 这3个按钮的用法和属性完全相同，下面以 TextButton 为例。..., //背景色 this.foregroundColor, //前景色 this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色...style: ButtonStyle( textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)), ), ) 注意：字体颜色的设置不通过

1.7K1 0

Flutter color颜色的用法

系统自带color的使用和自定义color 系统的color 查看Color的源码： static const Color black = Color(0xFF000000); 可以看到，这里的black...当然系统也封装了很多的color使用（查看源码轻松找到），上面我们可以看到有很多不同程度的红色，默认就是原始的红色，我们加一个参数就可以调用其他的红色了 primaryColor: Colors.red...[800], 在中括号后面加一个数值就行了但是如果我想自定义怎么办呢，那源码就是学习的例子，我们可以向源码一样封装，然后调用自定义color import 'package:flutter/material.dart...，不是#ff0000格式的了，是ARGB格式的什么是ARGB 在flutter中，color使用的是ARGB，0x后面的就是ARGB，A就是FF表示透明度，RGB就是三原色了，比如，RGB的红色是#...ff0000 所以，ARGB红色我们就可以这样表示 0xffff0000 我们除了改主题的颜色之外，还有很多系统的控件颜色都可以修改的，查看源码ThemeData即可。

6862 0

Flutter 全栈式——基础控件

在Flutter中，UI小控件有两种设计风格，一种是Material设计，这是安卓的官方设计风格，另一种则是Cupertino风格，是iOS的官方设计风格。...因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。...color Color 按钮颜色 disabledColor Color 禁用按钮时颜色 focusColor Color 获取焦点时按钮颜色 splashColor Color 水波纹效果的初始化颜色...hoverColor Color 当指针悬停在按钮上时的填充颜色 highlightColor Color 水波纹的高亮颜色 elevation double 阴影高度 hoverElevation...tristate bool 默认false，如果为true，复选框的值可以为true、false或null activeColor Color 选中时的颜色 checkColor Color 选中时复选框图标的颜色

3.8K4 0

【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

文章目录一、加载 Flutter 内置的图标三、完整代码示例三、相关资源四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) 一、加载 Flutter 内置的图标 ---- Flutter...中的图标组件 Icon , 专门用于显示图标 ; Flutter 中内置了一些默认图标 , 可以在 https://material.io/resources/icons/ 界面进行查询 ; 使用 Icon...组件加载 Flutter 内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 , import 'package:flutter/material.dart'; 使用 Icon 示例.../download/han1202012/16073006 ( 本篇博客的源码快照 , 可以找到本博客的源码 ) 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) ---- Flutter...中内置的图标名称与下图中的大致类似 , 不完全一样 , 但基本名称差不多 ;

3K2 0

Android 修改Toolbar自带的图标颜色

toolbar自带的按钮颜色是黑色，现在想修改按钮图标颜色，方法如下：在布局文件中的Toolbar中增加如下2个属性： app:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar

1.1K3 0

如何为App图标挑选合适的颜色

谷歌地图的图标接下来我参照标准web颜色（加上额外的黄色）来匹配每个图标上主要的颜色至最接近的web色。...谷歌地图的颜色无视黑白灰，我把四个最常用的颜色放在了上面的色盘里。大尺寸的图标意味着该图标内用的最多的就是那个颜色。...最受欢迎的200个免费iOS App的图标颜色我发现一大堆的蓝色和红色app图标，还有零零散散的绿色。粉色和紫色寥寥无几，只有Snapchat是黄色。...100个最新的iOS App图标颜色结果和最受欢迎的付费app颜色分布非常相近。最受欢迎的200个iOS社交app 所有的社交网络app估摸着都是蓝色的吧不是吗？...最受欢迎的200个iOS游戏很多游戏都倾向于更复杂的图标设计，这也导致他们会使用更多的颜色。

2.4K9 0

Flutter lesson 7: Flutter组件之基础组件（三）

Icon Icon就是图标，字体图标，矢量图。在web前端中我们使用图标可以自己定义字体与SVG，使用阿里图标上面的图标。在Flutter中，google则为我们集成了一些常用的图标。...material 中自带的一些图标，如果我们需要自己定义图标怎么弄呢？..., // 点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色 Color splashColor, //水波纹的颜色 Brightness colorBrightness, //按钮主题高亮...: Text("textColor文本的颜色，color背景颜色，highlightColor按钮按下的颜色"), textColor: Color(0xffff0000), color...在下面的课程中，我们将会介绍一些Flutter的中高级的Widget。

1.5K5 0

Flutter 中的按钮组件

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。常见的按钮组件如下： 1. RaisedButton ：凸起的按钮； 2. FlatButton ：扁平化的按钮； 3....值的类型为Widget； 3. textColor 文本颜色。值的类型为Colors； 4. color 按钮的颜色。值的类型为Colors； 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors； 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors； 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors； 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors； 9. elevation 阴影的范围。...用浮动按钮实现类似闲鱼APP的底部导航条效果，以下是代码示例： import "package:flutter/material.dart"; // 标签切换页 class Tabs extends

3.1K3 0

Flutter 的按钮，看这篇文章就够了

我在之前的文章文本、图片和按钮在Flutter中怎么用中，简单介绍过按钮组件，本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。...textColor，文本颜色 color，按钮的背景颜色 disabledColor，按钮禁用时的背景颜色 disabledTextColor，按钮禁用时的文本颜色 splashColor，点击按钮时水波纹的颜色...height: 60, child: RaisedButton( child: Text("自适应按钮 & 设置水波纹颜色...Icon( Icons.add, color: Colors.black,//图标的颜色 size: 20,//图标大小 ),...关于上述代码，有以下几点需要注意： 1，我们需要在带有底部导航的Scaffold里面配置悬浮按钮。

9.5K3 1

你知道吗，Flutter内置了10多种Button控件

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用...高亮颜色，按下时的颜色 splashColor 水波纹颜色，按下松开会有水波纹效果以textColor为例，用法如下： RaisedButton( textColor: Colors.red,...BackButton() Android和IOS平台显示的图标是不一样的，ios效果如下： ? Android效果如下： ?...甚至可以设置点击水波纹颜色（splashColor）和按下时的高亮颜色（highlightColor）： ToggleButtons( splashColor: Colors.purple,...如果开发的是web程序，我们可以设置鼠标悬停颜色： ToggleButtons( hoverColor: Colors.cyan, ) 欢迎加入Flutter的微信交流群(mqd_zzy

2.5K3 0

Flutter中的按钮组件Button

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。常见的按钮组件如下： 1. RaisedButton 凸起的按钮； 2. FlatButton 扁平化的按钮； 3....IconButton 图标按钮； 5. ButtonBar 按钮组； 6.... child 子组件； 3. textColor 文本颜色； 4. color 按钮的颜色； 5. disabledColor 按钮禁用时的颜色； 6. disabledTextColor 按钮禁用时的文本颜色...； 7. splashColor 点击按钮时水波纹的颜色； 8. highlightColor 长按按钮后按钮的颜色； 9. elevation 阴影的范围； 10. padding 内边距； 11....iconSize: 30.0, // 选中图标的颜色 fixedColor: Colors.red, //

4.1K1 0

Flutter 组件集录 | 从图标按钮看组件封装

显示的内容组件为 BackButtonIcon ，说明其会根据平台来决定图标样式。另外，可以通过 color 入参设置返回按钮的颜色。...通过源码可以知道，本质上这个颜色属性是传入到 IconButton 组件构造方法中的。...效果如下：说实话，国内的应用软件基本上不喜欢用 material 风格。对我个人来说，水波纹能给用户一个交互的反馈，本身是比较好的，但一个小小的图标按钮有水波纹，感觉怪怪的。...这不得不让图标按钮的占位区域扩大，当多个 IconButton 排列时，如下所示，默认情况下，水波纹区域太大，又会显得拥挤：不过可以通过 splashRadius 来控制水波纹的扩散半径。...，感觉这种水波纹要比 Material2 的好看一些，对于 IconButton 而言，会根据图标颜色显示背景色，长按时也不再是扩散的水波纹，而是背景色的变化。

1.2K1 0

你知道吗，Flutter内置了10多种Button控件

版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度...禁用状态下背景颜色 highlightColor 高亮颜色，按下时的颜色 splashColor 水波纹颜色，按下松开会有水波纹效果...BackButton() Android和IOS平台显示的图标是不一样的，ios效果如下： [1240] Android效果如下： [1240] CloseButton CloseButton是一个material...borderWidth: 3, selectedBorderColor: Colors.deepOrange, ）效果如下： [20200302205045496.png] 甚至可以设置点击水波纹颜色...web程序，我们可以设置鼠标悬停颜色： ToggleButtons( hoverColor: Colors.cyan, ) 欢迎加入Flutter的微信交流群(<font color

2.5K0 0

使用 ImageMagick 轻松制作带有多种尺寸的 ico 图标文件

ico 图标格式是一种包含多种尺寸位图的容器格式，Windows 用这种格式来作为图标是为了能让文件图标在各种不同显示尺寸下都能看起来清晰可辨。...可是，相当多的平面设计软件都没有内嵌 ico 格式的支持（尤其是 macOS 版的），导致设计师很难直接输出 ico 格式的图标。...另外，有些自称能 png 转 ico 格式的图片转换器虽然能生成 ico 格式，但这种 ico 格式内只包含一种位图尺寸，导致在很小或很大时图标显示非常模糊。...那么，本文推荐 ImageMagick 这款强大的命令行工具，帮助我们一条命令完成多尺寸 png 图到 ico 格式的转换。虽是牛刀杀鸡，但奈何确实简单方便。...，同时有更好的阅读体验。

9632 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭