首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter 2:带有图标和文本的按钮

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它允许开发者使用单一代码库构建高性能、美观且流畅的移动应用程序,同时支持iOS和Android平台。

带有图标和文本的按钮是Flutter中常用的用户界面元素之一。它是一个可点击的控件,通常用于触发特定的操作或导航到其他页面。该按钮通常包含一个图标和文本,以提供更直观的用户体验。

Flutter提供了多种方式创建带有图标和文本的按钮。开发者可以使用Flutter内置的Material Design风格按钮,也可以自定义按钮的外观和交互效果。

以下是一些常见的带有图标和文本的按钮的Flutter组件和相关链接:

  1. RaisedButton:这是一个凸起的按钮,通常用于表示主要操作。它可以包含一个图标和文本。RaisedButton组件介绍
  2. FlatButton:这是一个扁平的按钮,通常用于表示次要操作。它也可以包含一个图标和文本。FlatButton组件介绍
  3. IconButton:这是一个只包含图标的按钮,通常用于触发简单的操作。IconButton组件介绍
  4. FloatingActionButton:这是一个悬浮按钮,通常用于触发主要操作。它通常位于屏幕底部或右下角,并具有圆形的外观。FloatingActionButton组件介绍
  5. OutlineButton:这是一个带有边框的按钮,通常用于表示次要操作。它可以包含一个图标和文本。OutlineButton组件介绍

这些按钮组件可以根据应用的需求进行定制和样式调整。Flutter还提供了丰富的图标库和文本样式选项,以便开发者创建出符合设计要求的按钮。

需要注意的是,以上提到的链接是Flutter官方文档中对应组件的介绍,开发者可以在其中找到更详细的信息和示例代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

文本、图片按钮Flutter中怎么用

与iOS、AndroidReact类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片按钮,则是这些不同UI框架中构建视图都要用到三个最基本控件。...Flutter文本Text图片Image,我在前面的文章中都有过介绍,今天我们再来详细地聊一聊。...按钮 通过按钮,我们可以响应用户交互事件。Flutter提供了三个基本按钮控件:FloatingActionButton、FlatButtonRaisedButton。...RaisedButton:凸起按钮,默认带有灰色背景,被点击后灰色背景会加深。 FlatButton:扁平化按钮,默认透明背景,被点击后会呈现灰色背景。...总结 UI控件是构建一个视图基本元素,而文本、图片按钮则是其中最经典控件。 接下来,我们简单回顾一下今天内容,以便加深理解与记忆。

7.6K20

Flutter】评级对话框组件

评级对话框一些属性: **message:**此属性用于对话框消息/描述文本。 **ratingColor:**此属性用于评级栏(星形图标辉光)颜色。...**onSubmitted:**此属性用于返回带有用户等级注释值RatingDialogResponse。 **onCancelled:**此属性用于在用户取消/关闭对话框时调用。...「在此按钮中,我们将添加文本,颜色,按钮形状onPressed方法。在此方法中,我们将添加」_showRatingAppDialog」小部件。我们将在下面对其进行深入描述。...在此对话框中,我们将添加」ratingColor」表示评级栏(星形图标发光效果)颜色,「标题」,「消息」表示对话框消息/描述文本,「图像」,「submitButton」表示提交按钮标签/文本,「...onSubmitted」表示返回带有用户评分评论值,「onCancelled」表示用户取消/关闭对话框时调用。

4K50

6详解AppBar小部件

AppBar 通常显示概括本页功能模块,例如图标标题,并且通常包含按钮或其他用户交互点。...Flutter AppBar 布局 leading leading 接受一个小部件,可以分配任何东西——文本图标,甚至一行中多个小部件。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最暗最亮50。...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标按钮其他任何公司前景,除了小部件,如ContainerImage。...布局添加小部件 如何为 AppBar 图标文本、背景、高度、阴影颜色工具栏设置主题 所以我们有了!

16.3K10

Flutter 上默认文本字体知识点

我们都知道在 Flutter 中可以通过 fontFamily 来引入第三方字体,例如通常会将 svg 图标转换为 iconfont.ttf 来实现矢量图标的入,而一般情况下我们是不会设置 fontFamily...来使用第三方字体, 那默认情况下 Flutter 使用是什么字体呢?...正如下图所示,它们 G 字母在显示效果上会有所差异,比如 平方 G 有明显转折线。 ? image 这时候我不禁产生好奇,在 Flutter 中引擎默认究竟是如何选择字体?... defaultAccentTextTheme 中,所以应该是使用 .SF 相关字体才会,为什么会显示是 PingFang SC 效果?...最后再补充下,在官方 architecture 中有提到,在 Flutter文本呈现逻辑是有分层,其中: 衍生自 Minikin libtxt 库用于字体选择,分隔行等; HartBuzz

3.3K10

Flutter》-- 4.Flutter组件基础

AppBar基本属性如下: 1)leading:标题左边图标按钮,默认是一个返回箭头样式按钮2)title:导航栏标题。...4.3.2 按钮组件 Materail组件库中常见按钮组件: RaisedButton:默认是带有阴影灰色背景按钮,按下后阴影会变大; FlatButton:默认是背景透明并不带阴影按钮,按下后会有背景色...; OutlineButton:默认是一个带有边框、不带阴影且背景透明按钮,按下后边框颜色会变亮,同时会出现背景阴影效果; IconButton:一个可点击图标按钮,不支持文字,默认没有背景,点击后会出现背景...RaisedButton、FlatButtonOutlineButton等Material按钮组件都有一个图标构造函数,可以使用它来创建带图标按钮。...textInputAction:回车键为动作按钮图标。 style:输入框样式。 autofocus:是否自动获取焦点,默认为false。 obscureText:是否隐藏正在编辑文本内容。

12.4K30

Flutter】自定义滚动开关

switch是两个状态UI组件,用于在ON(选中)或OFF(未选中)状态之间切换。通常,它是带有拇指滑块按钮,用户可以在其中来回拖拉以选择其他选项,例如“开”或“关”。...**我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序,该程序具有吸引人动画一些属性。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关时将更改图标文本。...在内部,我们将添加带有样式文本。我们将添加填充,并在其子项上添加**LiteRollingSwitch()**小部件以进行自定义。...*我们将添加textOn是字符串' Yes '表示当开关打开时,文本将显示在按钮上;当textOff是字符串' No '意味着当开关关闭时,文本将显示在按钮上。

33.3K60

flutter 输入框组件TextField实现代码

TextField 顾名思义文本输入框,类似于iOS中UITextFieldAndroid中EditTextWeb中TextInput。主要是为用户提供输入文本提供方便。...在逻辑上,每当我们点击下面的按钮都会判断用户名密码是否符合要求,并且使用控制器清空已经输入用户名密码。...onEditingComplete默认实现根据情况执行2种不同行为: 当完成操作被按下时,例如“done”、“go”、“send”或“search”,用户内容被提交给[controller],然后焦点被放弃...“@”普通键盘) TextInputType.datetime(带有“/”“:”数字键盘) TextInputType.multiline(带有选项以启用有符号十进制模式数字键盘) TextInputAction...控制TextField中大小最大长度 TextFields可以控制在其中写入最大字符数,最大行数并在键入文本时展开。 TextField( maxLength: 4, ), ?

4.7K11

Flutter 全栈式——基础控件

Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓官方设计风格,另一种则是Cupertino风格,是iOS官方设计风格。...因此,当遇到带有这两个单词开头控件时,我们应该明确他们表达意思。...prefixIcon Widget 位于输入框内部起始位置图标 prefix Widget 预先填充Widget,跟prefixText只能同时出现一个 prefixText String 预填充文本...Clip 剪裁 focusNode FocusNode 用于焦点管理监听 autofocus bool 是否自动获取焦点 animationDuration Duration 设置按钮形状阴影变化持续时间...必须与onDeleted 配合使用 onDeleted VoidCallback 图标按钮监听 deleteIconColor Color deleteIcon颜色 deleteButtonTooltipMessage

3.8K40

Flutter中构建布局 顶

建立布局 第0步:设置 第1步:绘制布局图 第2步:实施标题行 第3步:实现按钮行 第4步:实现文本部分 第5步:实现图像部分 第6步:把它放在一起 Flutter布局方法 布置一个小部件 垂直水平放置多个小部件...它第一个孩子,列,包含2行文字。 第一列占用大量空间,所以它必须包装在扩展小部件中。 ? ? 第二行称为按钮部分,也有3个子项:每个子项都是一个包含图标文本列。 ?...第3步:实现按钮按钮部分包含3列,它们使用相同布局 - 一行文本图标。...Material Components Card: 将相关信息组织成带有圆角投影盒子。 ListTile: 将最多3行文本,以及可选前导训练图标组合成一行。...3行文本可选前导尾随图标的行。

43K10

开始使用-初尝胜果 顶

尝试一个热重新加载 Flutter提供快速开发周期热重载,可重新加载实时运行应用代码而无需重新启动或丢失应用状态。...3.要查看您更改,请调用Save All(cmd-s / ctrl-s),或单击Hot Reload按钮带有闪电图标按钮)。 您应该几乎立即在运行应用程序中看到更新字符串。...命令行+自选编辑器 命令行+编辑器:您选择编辑与Flutter命令行工具结合运行建设。...尝试一个热重新加载 Flutter提供快速开发周期热重载,可重新加载实时运行应用代码而无需重新启动或丢失应用状态。...3.要查看您更改,请调用Save All(cmd-s / ctrl-s),或单击Hot Reload按钮带有闪电图标按钮)。 您应该几乎立即在运行应用程序中看到更新字符串。

1.2K30

Flutter实现底部菜单导航

梳理下实现步骤 我们需要实现这个底部菜单导航,就需要有底部菜单那一排图标按钮图标按钮是固定在一个工具栏 “bar” 上面。...然后呢,需要分别需要有按钮对应界面,就是说按钮有多少个,那么界面需要对应有多少个。我们来一个清单列表: 按钮图标区域。由于展示方式都是一样,我们需要有一个单独控件,循环出来就好。...用于展示按钮图标,并且能固定在底部。 首页。用于将工具栏放入界面中,并且将按钮对应界面作为它子元素存放于其中。 不同按钮对应界面。在我们点击图标按钮时候,展示不同界面。...正如前面说,我们底部按钮区域展示图标加上文字是固定格式,所以将这一部分抽取出来,作为一个公共 class,方便界面程序维护。...vsync: vsync // 默认属性参数 ); } 第四步:创建 Index 这一步就比较重要了,因为我们需要在这个界面上面去布局,以及实现点击按钮图标之后,有事件触发。

4.2K10

Flutter设置App应用名字应用logo图标的方法(android ios web)

在前面的几期给大家介绍了flutter安装以及一些简单配置,还运行了helloword 那么接下来就带领大家了解如何设置应用名称以及图标 Flutter设置App应用名字应用logo图标的方法,...我本人有个习惯就是每次会先把应用程序图标logo换了,不然看这着急, 其实,Flutter设置App应用名称图标是要分开来操作,AndroidiOS以及web等是分开设置对应App名称图标的...Flutter在新建过程中,生成project name是默认应用名称,应用图标也是默认,具体效果如下所示: 一、Flutter中设置Android应用名称图标 1、首先要定位到修改应用名称文件...; (2)AndroidManifest.xml文件中application下面的icon对应值就是应用图标文件; 二、Flutter中设置iOS应用名称图标 ios设置路径在 ios—...文件里面对应含有App名字键值对就是设置应用名称地方; (2)Assets.xcassets文件里面的AppIcon里面对应就是设置应用图标的地方; 设置完应用名称图标的最终效果,如下所示

1.6K00

Flutter 2.5正式版发布,带来重大更新

同时,在此版本中,我们添加了文本编辑键盘快捷键可覆盖功能( #85381),这是在 Flutter 2.0 及其新文本编辑功能基础上进一步优化。...过时API提示 在此版本 Flutter 中,Flutter 团队提供每个相应插件都带有类似 【Battery】提示,用于表示插件是否过时。...优化改变内容具体表现如下几个方面: 优化调试切换按钮:我们对这些按钮进行了更新,以让它更好表达它们作用,并且每个工具提示都会链接到该功能详细文档。...此外,Flutter 最新 IJ/AS 插件允许查看单元测试集成测试运行覆盖率信息,可以从“调试”右边按钮来查看测试覆盖率信息。...要启用图标预览,您需要告诉插件您正在使用哪些软件包,settings/preferences 中有一个新文本字段。

4.3K50
领券