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

如何在flutter中设置填充材料设计风格forTextFormField?

在Flutter中设置填充材料设计风格(Material Design style)的TextFormField,可以通过使用InputDecoration来实现。InputDecoration是一个用于装饰输入字段的类,可以设置填充、边框、图标等属性。

以下是在Flutter中设置填充材料设计风格的TextFormField的步骤:

  1. 导入Flutter的material包:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 在Widget的build方法中创建一个TextFormField,并设置InputDecoration:
代码语言:txt
复制
TextFormField(
  decoration: InputDecoration(
    filled: true,  // 设置为true,表示使用填充材料设计风格
    fillColor: Colors.grey[200],  // 设置填充颜色
    hintText: '请输入内容',  // 设置提示文本
    border: OutlineInputBorder(  // 设置边框样式
      borderRadius: BorderRadius.circular(10.0),  // 设置边框圆角
      borderSide: BorderSide.none,  // 设置边框样式为无
    ),
  ),
),

在上述代码中,我们通过设置filled为true来启用填充材料设计风格,fillColor用于设置填充颜色,hintText用于设置提示文本。border属性用于设置边框样式,通过设置borderRadius来设置边框圆角,通过设置borderSide为BorderSide.none来去除边框。

  1. 完整示例代码如下:
代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextFormField'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: TextFormField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.grey[200],
                hintText: '请输入内容',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

通过以上步骤,我们可以在Flutter中设置填充材料设计风格的TextFormField。这种风格常用于创建漂亮的输入字段,适用于各种表单输入场景。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云移动开发服务:https://cloud.tencent.com/solution/mobile-development
  • 腾讯云人工智能服务:https://cloud.tencent.com/solution/ai
  • 腾讯云存储服务:https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙服务:https://cloud.tencent.com/solution/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

FlutterUnit 更新 | 拓展样式风格切换 - 标准风格

风格展示 FlutterUnit 最初主页面的设计风格被不少人所诟病,颜色花里胡哨,觉得有些非主流,和杀马特风格。为此推出可切换的 标准风格 ,来满足不同使用者的口味。...本文就来介绍一下拓展过程的一些处理方式,如何在一个应用,给出两种样式迥异风格的处理方案: Flutter Unit 已更新至 2.5.2 , 可更新体验。...如下在 _UnitPhoneNavigationState 获取 AppStyle ,根据样式类型构建不同的主页组件。 ---- 3. 应用设置界面 另外,新版本设置界面也进行展示的优化。...因为输入组件名时,不区分大小写: 之前在 Autocomplete 自动填充 一文,通过关键字进行 split 分割文字处理样式,显然无法完美地完需求。...这时,就不得不请出 正则表达式 了:在 Dart 正则匹配,可以通过 caseSensitive 设置是否关注大小写,为 false 即可忽略。

1.1K10

Flutter构建布局 顶

将crossAxisAlignment属性设置为CrossAxisAlignment.start可将列置于行的开始位置。 将第一行文本放入Container可以添加填充。...将文本放入容器,以便沿每条边添加32像素的填充。 softwrap属性指示文本是否应在软换行符(句点或逗号)上断开。...如果您愿意,可以构建仅使用小部件库的标准小部件的应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单的小部件并将其显示在屏幕上。...例如,将标高设置为24.0,将卡片从视觉上抬离表面并使阴影变得更加分散。 有关支持的高程值的列表,请参见材料准则的高程和阴影。 指定不支持的值将完全禁用投影。...Card摘要: 实现材料设计卡片 用于呈现相关信息的块 接受单个孩子,但该孩子可以是Row,Column或其他包含子级列表的小部件 显示圆角和阴影 卡片的内容不能滚动 来自材料组件库 卡片示例: ?

43K10

不懂设计的产品不是好开发

Material设计指南中给我们提供了这样一个工具,来方便开发者设置这些颜色。 https://material.io/resources/color 2....Flutter默认的材料文本样式是BodyText2。BodyText1可用于强调通常为BodyText2的文本。 Caption和Overline是最小的样式,用于注释,如图像标题,图表图例。...谷歌字体是开源的,可以免费使用,并且直接支持Flutter。其次,我利用字体比例生成工具来确定Material指南中定义的13种文字风格类别。...截至目前,材料图标有五种不同的主题:填充、锐利、圆形、轮廓和双色。Flutter支持填充、圆形、勾勒和锐利的风格。...考虑到品牌形状,ATA将使用圆形图标,Biohack将使用尖锐图标,Codeland将使用填充图标。 Conclusion 在这篇文章,我解释了主题属性和相应的Material设计指南。

2.5K20

FlutterFlutter Gallery 官方示例简介 ( 项目简介 | 工程构建 )

Flutter Gallery 用于帮助开发者学习和使用 Flutter ; Flutter Gallery 包含的内容 : 材料设计 ( Material Design ) 组件 : Android...风格组件 ; Cupertino 组件 : iOS 风格组件 ; ( [ˌkupərˈtinoʊ] ) 行为控制相关功能 使用 Flutter 实现的小功能 Flutter 支持的平台 : 目前 Flutter...---- 源码下载后 , 发现 Flutter Gallery 本身的配置不匹配 , 需要在 pubspec.yaml 中将 args 插件的版本号设置成 1.6.0 ; args: ^1.6.0 参考...Flutter SDK 版本 , 最新的稳定版本的 Flutter SDK 2.0.2 没有找到相关函数 , 说明需要使用更新的 Flutter 版本 , 这里直接使用最新的 Beta 测试版本的...版本设置成最新版本 , Dart SDK 也设置成最新版本 , 界面没有 Logcat 面板 , 参考 【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat

1.3K40

flutter 跨平台适配指南

侧栏的作用: 侧栏通常位于屏幕的侧边(通常是左侧),用于显示应用的导航菜单、设置选项或其他重要功能。它提供了一种便捷的方式,让用户可以轻松地浏览和访问应用的不同内容。...在 Android 应用,侧栏通常用于显示导航菜单、设置选项和其他功能链接。 用户习惯通过侧栏来访问应用的不同部分或执行特定的操作。...在设计时,需要综合考虑应用的功能复杂度、平台特性以及用户体验,以选择最合适的导航方式。 Flutter 的导航栏与侧栏实现 如何在 Flutter 实现导航栏?...Flutter 实现侧栏?...你可以根据应用的需求和设计风格进行进一步的定制和美化。 跨平台适配指南 在开发 Flutter 应用时,跨平台适配是一个重要的考虑因素。

15810

探索 Flutter 的 NavigationRail:使用详解

介绍 在 Flutter ,NavigationRail 是一个垂直的导航栏组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备,平板电脑和桌面应用程序。...自定义外观: NavigationRail 允许开发人员根据应用程序的设计和品牌风格自定义导航栏的外观。您可以自定义背景颜色、选中项的颜色、图标和标签等。...安装和设置Flutter 项目中使用 NavigationRail 非常简单,您只需按照以下步骤进行安装和设置即可: 添加依赖项: 在您的 Flutter 项目的 pubspec.yaml 文件添加...自定义导航栏 NavigationRail 提供了许多自定义选项,使您能够根据应用程序的设计和品牌风格定制导航栏的外观。...您还可以根据需要将其他页面添加到 PageView ,以扩展应用程序的功能。 6. 响应式设计设计 Flutter 应用程序时,响应式设计是至关重要的,特别是在考虑到不同设备尺寸和方向的情况下。

28710

JDFlutter | 京东技术台新一代跨平台开发框架

开发者借助 Flutter 开发平台可轻松实现自己的应用,其开发框架默认支持了 Material(类似 Google 设计风格)和 Cupertion(类似 iOS 设计风格)两种风格,且无论从UI样式...京东目前已经有非常成熟的跨平台解决方案 JDReact,如何在 JDReact 与 Flutter 中选择合适的开发方案?...Flutter 业务代码采用 git submodule 的方式进行代码管理,Android、ios 工程仅需设置好对Flutter的依赖即可。 ?...Flutter 框架内集成了两种风格的 UI 组件库:一种是 Google Material 设计风格,另一种为 Apple Cupertion 设计风格。...这两种设计风格可以很好满足开发者对样式的需求,与原生页面无异。然而当集成到京东客户端时,这些样式并不能满足需求,因此我们提供了适合手机京东(京东 APP)的 UI 组件库(不断完善)。

9.8K51

带你快速掌握Flutter的视图(Widgets)

何在布局添加或删除组件? 如何对 Widget 做动画? 如何绘图(Canvas draw/paint)? 如何构建自定义Widgets? 如何设置Widget的透明度?...Flutter 包含了 Material 组件库。这些 Widgets 遵循了 Material 设计规范。材料设计是一个灵活的设计系统,并且为包括 iOS 在内的所有系统进行了优化。...在Android,我们通过XML编写布局; 在iOS ,我们会用 Storyboard 文件来组织 views,并对它们设置约束,或在 view controller 中使用代码来设置约束; 在 Flutter...另外推荐大家在widget catalog查看 Flutter提供的布局。 如何在布局添加或删除组件?...要了解如何在Flutter实现签名Painter,可参阅Collin在StackOverflow上的答案。 ?

10.9K10

Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ; Scaffold 提供了显示左侧侧拉导航栏 , 底部导航 , 浮动按钮等 API ; Scaffold...: 该组件是被导航的组件 , 设置多个布局结构 , 同时只能显示一个 ; DefaultTabController : 该组件用于关联控制 TabBar 和 TabBarView 组件 ; 界面组件...Tab 组件 ( 至少一个 ) ; Tab 构造函数 : /// 创建一个材料设计风格的选项卡. /// /// 至少设置一个 text 文本和 icon 图标 child 必须为非空 ....TabBarWidget extends StatelessWidget { @override Widget build(BuildContext context) { /// 材料设计应用组件...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn

2.6K40

Flutter 全栈式——基础控件

Flutter,UI小控件有两种设计风格,一种是Material设计,这是安卓的官方设计风格,另一种则是Cupertino风格,是iOS的官方设计风格。...需使用Text.rich构造方法创建 Image 构造方法 Image : 从ImageProvider获取图片 Image.asset :加载资源目录的图片 Image.network:加载网络图片...Alignment 设置图片的对齐位置 repeat ImageRepeat 设置图片的重复填充方式 centerSlice Rect 类似与Android的点9处理,在图片上定义某个矩形区域用于拉伸...prefixIcon Widget 位于输入框内部起始位置的图标 prefix Widget 预先填充的Widget,跟prefixText只能同时出现一个 prefixText String 预填充的文本...全栈式开发之Dart 编程指南 [二维码] Flutter 全栈式开发指南 快速上手篇直接观看 [k582fk9kg4.jpeg]

3.8K40

Flutter 卡片选择器

原文地址:https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66 material设计风格的卡片。...在本文中,我们将探讨Flutter 的**Card Selector。**我们将看到如何在flutter应用程序中使用card_selector包来实现带有动画和堆叠卡的卡选择器的演示程序。...该演示视频展示了如何在颤动创建卡选择器。它显示了flutter应用程序中使用card_selector软件包的卡选择器的工作方式。它显示了堆叠的卡片,动画,从左到右或从右到左刷卡。...**mainCardPadding:**此属性用于左填充列表的第一个元素。 实现 将依赖项添加到pubspec-yaml文件。...在itemBuilder,如果索引等于零,则返回列小部件。在此小部件,从json文件添加余额。另外,我们将从json文件添加金额,模式,时间。

7.3K20

掌握Flutter底部导航栏:畅游导航之旅

通过本文的学习,读者将能够熟练运用Flutter框架,设计出符合应用主题和用户体验要求的精美底部导航栏,为移动应用的开发与优化提供强有力的支持。 2....在接下来的章节,我们将深入探讨如何在Flutter创建和定制底部导航栏,包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧与方法。 3....您可以根据自己的需求自定义图标和标签,以创建符合应用程序主题和设计风格的底部导航栏。 4. 自定义底部导航栏外观 底部导航栏的外观对于应用程序的整体风格和用户体验至关重要。...总结 底部导航栏是移动应用界面设计中常见且重要的组件之一,在Flutter实现底部导航栏不仅简单易行,而且具有丰富的功能和灵活的定制性。...在实际开发,建议根据应用的需求和设计风格,灵活选择和组合不同的技术手段,打造出更加优秀的底部导航栏。

16810

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。...材料的Scaffold部件为我们创建了这个视觉结构,并确保重要的部件不会重叠!...使用选项卡 使用选项卡是遵循Material Design指南的应用程序的常见模式。 Flutter包含创建选项卡布局作为材料库的一部分的便捷方式。...3.将字体设置为默认值 对于如何将字体应用于文本,我们有两种选择:作为默认字体或仅在特定的小部件。 要使用字体作为默认字体,我们可以将fontFamily属性设置为应用theme的一部分。...在Flutter,我们可以将Drawer小工具与Scaffold结合使用,以创建带有材质设计Drawer的布局!

7.1K10

Flutter「发布预览版 2」让 iOS 应用至臻完美

虽然我们设计 Flutter 的目的是帮助开发者实现品牌驱动的定制移动端体验 ,但是一些开发者反馈说自己平时需要严格按照《苹果官方界面开发指南》来进行应用开发。...为此,我们在新版本特别扩展了对 “Cupertino” 风格控件的支持。预览版 2 所提供的库包含大量 widget 和类,能够帮助开发者轻松创建 iOS 风格界面。 ?...△ 使用 Flutter 开发的 iOS 设置页 以下为 Flutter「发布预览版 2」中新添加的 iOS 主题组建 (widget): CupertinoApp: 用于创建 iOS 风格应用的顶层组件...CupertinoNavigationBar 和 CupertinoSliverNavigationBar 在切换页面时,实现视差滚动效果 基于 CupertinoPageRoute.title 自动填充页面标题和返回按钮的标签...在被询问到有关开发效率和 UI 设计的问题时,79% 的开发者认为 Flutter 对提高开发速度和部署理想 UI 非常有帮助。

1.1K60

如何编写高质量的flutter代码

代码是否遵循开发规范?这个问题可以设置的很简单,也可以把linters设置的很严格。我喜欢在代码格式、布局和 linting 规则方面采用严格标准的规范。...这些标准可以使得代码风格一致,使其更易于维护。...在 Dart 和 Flutter 强制执行统一的代码格式,您可以将以下命令添加到 jerkins等CI,如果代码格式不正确,则构建失败: $ dart format --output none --set-exit-if-changed...对于 Dart,我强烈建议使用lints包,对于 Flutter 我推荐flutter_lints包。要确保 lint 在 CI 通过,要以下命令: $ dart analyze 最后就是测试了。...projects 如何在GitHub上设置 如果代码库托管在 GitHub 上, Dart 项目,我建议使用Dart Setup进行设置,如果是Flutter项目,我建议使用Flutter Action

1.2K20

Flutte部件目录-Material Components 顶

应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录的更多小部件。...FlatButton 平面按钮是在材料组件部件上打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件上的图片,通过填充颜色(墨水)对触摸作出反应。 ?...Icon 材质设计图标。 ? Chip 一个Material Design芯片。 芯片代表小块的复杂实体,联系人。 ?...Card 材料设计卡片。 卡片有稍微圆角和阴影。 ? LinearProgressIndicator 进度和活动指标是应用程序加载内容的可视化指示。...Stepper 材质设计步骤部件,通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线,两边都有填充。 ?

9.4K40

Flutter 流体滑块

原文链接:https://medium.com/flutterdevs/explore-fluid-slider-in-flutter-ba6bf2dfa21 在本文中,我们将**探讨Flutter的...地址:https://pub.dev/packages/flutter_fluid_slider 简介 流体滑块是一种流体设计滑块,其工作原理与“滑块”材料小部件非常相似。它用于从一系列值中进行选择。...下面的演示视频显示了如何在颤动创建流畅的滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。 img 现在,我们将创建另一个FluidSlider()。...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。 img 现在,我们将创建第三个“流体”滑块。

11.6K20
领券