Flutter |如何将ThemeData中的fontFamily应用于AppBar和FAB_如何将TextStyle和textTheme同时应用于flutter中的文本小部件？ - 腾讯云开发者社区

创建应用主题为了在整个应用程序中共享包含颜色和字体样式的主题，我们可以将ThemeData提供给MaterialApp构造函数。如果没有提供Theme，Flutter将在后台创建一个后备主题。...这些值对应于FontStyle，可用于TextStyle对象的fontStyle属性。 3.将字体设置为默认值对于如何将字体应用于文本，我们有两种选择：作为默认字体或仅在特定的小部件中。...要使用字体作为默认字体，我们可以将fontFamily属性设置为应用theme的一部分。我们提供给fontFamily的值必须与pubspec.yaml中声明的family相匹配。...4.在特定的部件中使用字体如果我们想将字体应用于特定的部件，比如Text部件，我们可以向部件提供一个TextStyle。在这个例子中，我们将RobotoMono字体应用于单个Text部件。...fontFamily再一次必须与我们在pubspec.yaml中声明的family相匹配。

7K1 0

【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )

中一切都是组件构成的 ; 其中最重要的两个组件是 ① 无状态的 StatelessWidget 组件和 ② 有状态的 StatefulWidget 组件 ; StatelessWidget 是 Flutter...中不需要状态改变的 Widget 组件 , 其内部没有需要管理的状态 ; StatelessWidget 组件延伸出以下组件 : Container : 容器组件 ; Text : 文本组件 ; Icon...this.alignment 居中方式 , this.padding 边距 , Color color 颜色值等参数 ; 详细的设置可以参考 Container 源码中的构造函数中的参数 , 阅读每个参数的文档注释..., 如背景颜色 , 背景图片 , 背景边框 , 圆角等效果 ; BoxDecoration 装饰器源码示例 : 在下面的源码中的构造函数中 , 可以查看该装饰器可以设置的选项 ; class BoxDecoration...It is combined with the `fontFamily` argument to set the /// [fontFamily] property.

1.7K0 1

您找到你想要的搜索结果了吗？

是的

没有找到

【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )

RubikMonoOne-Regular.ttf 放在根目录下的 fonts 目录下 ; 3、获取字体在 pubspec.yaml 配置文件中配置完字体资源后 , 点击 " Pub get " 按钮...code 0 4、全局使用字体全局应用字体 : 在 MaterialApp 根节点的 theme 字段值的 ThemeData 组件中的 fontFamily 字段设置字体 , 这里设置在 pubspec.yaml...配置文件中配置的 family 标签下的值 “RubikMonoOne” ; 字体配置 : fonts: - family: RubikMonoOne fonts: -...( // 配置字体 fontFamily: "RubikMonoOne" ), // 设置界面主组件 home: , ) 5、局部使用字体局部应用字体 : 在 Text 的...Demo', // 设置主题 theme: ThemeData( // 配置字体 fontFamily: "RubikMonoOne",

3.1K0 0

【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )

文章目录一、Flutter 应用主题二、完整代码示例三、相关资源一、Flutter 应用主题 ---- Flutter 应用主题都封装在 ThemeData 类中 , 在 MaterialApp...的 theme 字段 , 可以设置 ThemeData 主题 , 可设置的选项如下 , 下面的 ThemeData 工厂构造函数中的可选参数就是可以设置的各种主题选项 ; class ThemeData...indicatorColor, Color hintColor, Color errorColor, Color toggleableActiveColor, String fontFamily...ThemeData , brightness 字段设置的是主题模式 , 这里设置的是 Brightness.light 日间模式 ; primarySwatch 字段设置的是主题的主要颜色 , 这里设置的是蓝色...: AppBar( title: Text("Theme 主题修改"), ), body: Column( children:

1.1K0 0

Flutter | 常用组件分类、概述、实战

Flutter组件的分类文字类型容器类型辅助提示类型列表类型系统主题风格类型交互类型文字类型用于描述文字，如Text组件，一个普通的文本，属性有字体的颜色、大小、下划线、删除线...系统主题有关的组件 MaterialApp和AppBar详解 Main.dart中有一个MaterialApp组件，通过这个组件就可以实现很多Material风格的东西： theme：主题属性...ThemeData.accentIconTheme.color foregroundColor: Colors.red, // 按钮的颜色默认：ThemeData.accentColor...---- 参考自CSDN的Flutter入门课程 main.dart import 'package:flutter/material.dart'; import 'ContentPage.dart';...默认：ThemeData.accentIconTheme.color // foregroundColor: Colors.red, // // 按钮的颜色默认：ThemeData.accentColor

3.9K2 1

flutter 之Text介绍

单个字体可以引用多个不同轮廓字重及风格的文件： weight 属性指定了文件中字体轮廓的字重为 100 的整数倍，并且范围在 100 和 900 之间。...如果你想要设为默认字体，请将 fontFamily 设为应用（全局）theme 的属性的一部分。提供的 fontFamily 的值必须与 pubspec.yaml 中声明的名称相匹配。...theme: ThemeData(fontFamily: 'Raleway'), home: MyHomePage(), ); 如果你希望在特定 Widget（例如 Text Widget）中使用该字体...在这个例子中，我们将在一个 Text Widget 上使用 RobotoMono 字体。同样的，这里的 fontFamily 的值必须与 pubspec.yaml 中声明的值相匹配。...theme: ThemeData(fontFamily: 'Raleway'), home: MyHomePage(), ); } } class MyHomePage extends

9111 0

flutter 起步

继承(extends)Flutter中的继承和Java中的继承是一样的：Flutter中的继承是单继承构造函数不能继承子类重写超类的方法，要用@override子类调用超类的方法，要用superFlutter...中的继承也有和Java不一样的地方：Flutter中的子类可以访问父类中的所有变量和方法，因为Flutter中没有公有、私有的区别上下文对象是整个APP Widget树结构中的Widget话柄，每个Wideget...backgroundColor → Color - Appbar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。...brightness → Brightness - Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。...iconTheme → IconThemeData - Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。

4.4K2 0

Flutter跨平台移动端开发丨WillPopScope、InheritedWidget、Theme

} ), ), ); } } ---- InheritedWidget（数据传递与共享）通过 InheritedWidget 数据可以在 Widget 树中从上向下共享与传递...---- Theme （主题控制）通过 ThemeData 可以控制 Theme 视图内的组件风格，如颜色、字体、样式等，实际上也是通过 InheritedWidget 来共享与传递主题数据 const...= null), super(key: key); data：就是 ThemeData 以及包含的具体设置项和参数 child：子元素 ThemeData({ Brightness...String fontFamily, // 文字的字体 IconThemeData iconTheme, // Icon 的默认样式 ......Icons.airport_shuttle), Text(" 切换") ] ), // 在 Theme 中也可设置局部保持自己的

1.3K3 0

Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

概述路由跳转的几种方式；路由常用API；路由的发送和接收数据的使用；路由使用中可能遇到的问题与解决方案；路由跳转的方式单一页面跳转（A页面 --- B页面）多个页面路由管理（A页面...【小结一下刚刚的跳转并传输数据的方式】上面的方式是 —— 在跳转目的页中，准备一个构造函数和一个全局变量，用于接收数据，跳转到目的页时，创建一个目的页实例，并把数据传给其构造函数，完成传递；...多页面路由发送和接收数据【通过命名路由实现】 main.dart中配置路由： ?...PageOne等自定义、自创建的页面中，也有一个AppBar，这里我们如果不对它进行单独设置的话，则会默认配置为首页的主题风格—— 也即main.dart -- MaterialApp 中的...上述的单独设置指的是，在某个页面中，为该页面的appBar单独设置背景颜色，这样就会覆盖主页的默认主题颜色，【但是如要尽量保持主题的一致性，建议不要对子页面的这些相关主题属性进行修改

2.9K1 0

Flutter Icon IconFont（图标控件）

1、优势 Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。...效果如下图：控制不同颜色和大小的icon ? 在Flutter开发中，iconfont和图片相比有如下优势： 1.体积小：可以减小安装包大小。...3、使用字体库图标 Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下（默认配置就有） flutter: uses-material-design...所以，Flutter封装了IconData和Icon来专门显示字体图标。...为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量： import 'package:flutter/widgets.dart'; class

3.4K1 0

Flutter之旅：认识Widget(源码级)

其次它继承自DiagnosticableTree 下图可见Widget类在Flutter的框架层中是比较顶尖的类。 ? ?...你之后就会知道，Widget是Flutter界面的中心,可显示在页面上的一切，都和Widget相关。...StatefulWidget和State，用于可以在其生命周期内多次构建的widget。 StatelessWidget，用于在给定配置和环境的状态的下始终以相同方式构建的widget。...: AppBar( title: Text(widget.title), ), //略... ); } } 复制代码这里需要注意的一点是State类中的...= IconData(0xe558, fontFamily: 'MaterialIcons'); 一个图标实际上就是一个字体，可以根据一个int值和字库名匹配到它。

1.3K2 0

flutter主题设置

，例如在TextField中。...focusColor - 焦点获取时的颜色，例如，一些按钮焦点、输入框焦点。 hoverColor - 点击之后徘徊中的颜色，例如，按钮长按，按住之后的颜色。...primaryColorBrightness - Brightness类型，primaryColor的亮度。 fontFamily - String类型，字体样式。...themeData = new ThemeData.dark(); // 主题为暗色 } 然后我们正常的执行代码： import 'package:flutter/material.dart'; import...data: Config.themeData, // 设置为配置的主题数据 child: new Scaffold( appBar: new AppBar(elevation

4.4K2 0

Flutter 全栈式——页面框架

Material Design是由Google推出的全新设计语言，这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛的外观和感觉。...一个完整的Flutter项目是由这个主组件开始的。 MaterialApp属性详解属性类型简述 home Widget 主页。...theme ThemeData 应用程序的主题，各种的定制颜色都可以设置，用于程序主题切换 darkTheme ThemeData 深色模式下的主题 themeMode ThemeMode 用于设定主题模式...中的 ActionBar body Widget 当前页面所显示的主要内容 floatingActionButton Widget Material中所定义的FAB，是一个悬浮的功能按钮 floatingActionButtonLocation...flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果 [cf22fa2aav.png] 文档地址示例 BottomAppBar BottomAppBar

2.8K3 0

Flutter底部不规则导航的实现过程

前言本文主要介绍的是关于Flutter实现底部不规则导航的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧实现方法： 1、main.dart文件 import 'package...:flutter/material.dart'; import 'bootom_appBar.dart'; void main () = runApp(MyApp()); class MyApp extends...override Widget build(BuildContext context) { return MaterialApp( title:'不规则底部导航', //自定义主题样本 theme:ThemeData...bottomNavigationBar: BottomAppBar( //工具栏比NavigationBar灵活 color: Colors.lightBlue, //与fab...: AppBar(title: Text(widget.

5811 0

带你快速掌握Flutter图片开发核心技能

在这篇文章中，将带着大家一起学习在Flutter中图片开发以及应用场景中的必备技能以及一些经验技巧。...本文学习过程中遇到无法解决的问题可以在课程问答区进行提问，课程老师会对你进行辅导和帮助；欢迎加入课程官方群：795410523 和讲师以及其他师兄弟们一起学习交流；目录什么是Image widget...Flutter中一个用来展示图片的widget。...要加载项目中的静态图片，需要一些两步：在 pubspec.yaml 文件中声明图片资源的路径；使用AssetImage访问图片；我们在《快速上手Flutter开发》的《项目结构、资源、依赖和本地化...使用自定义的Icon 使用自定义的我们需要构造一个： const IconData( this.codePoint,//必填参数，fonticon对应的16进制Unicode { this.fontFamily

1.5K1 0

仿写新闻客户端

StatelessWidget { @override Widget build(BuildContext context) { //填入设计稿中设备的屏幕尺寸,单位dp return...相关的效果图：静态路由，组件抽取，登陆注册页面为了实现静态路由，我们来定义下登陆和注册的页面：登录页 lib/pages/sign_in/sign_in.dart 注册页 lib/pages/sign_up...进入项目 ios 文件夹，删除文件 **"Podfile"** 和 **"Podfile. Lock"** 2....ios 目录下，在终端执行 `pod install` 组件 appBar 拆分过程的报错：The argument type 'Widget' can't be assigned to the parameter...'; // 透明背景的 AppBar PreferredSizeWidget transparentAppBar({ // 使用 PreferredSizeWidget 定义，而不是 Widget

1.4K2 0

【Flutter】362- 让前端开发者失业的技术，Flutter Web 初体验

Skia 是跨平台的，并提供了非常友好的 API。第二是 Dart 运行时环境以及第三文本渲染布局引擎。最底层的嵌入层，它所关心的是如何将图片组合到屏幕上，渲染变成像素。...记住，之后往环境变量的 path 中添加；C:srcflutterbin，以便于你能在命令行中使用 flutter。...使用镜像由于在国内安装 Flutter 相关的依赖可能会受到限制，Flutter 官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中： PUB_HOSTED_URL：https...), home: Home(), // 启动首页 ); } } 第二步，在 Home 类中，是我们要渲染的页面顶导，运用了 AppBar 组件，它包括了一个居中的页面标题和居右的搜索按钮...目前 FLutter web 和 flutter 还是两个项目，编译环境也是分开的，需要在代码里面修改 Flutter 相关库的引用为 Flutter_web，组件还不能达到完全通用，这个谷歌承诺正在解决中

2.1K2 0

Flutter —布局系统概述

老孟导读：此篇文章非常详细的讲解了 Flutter 布局系统的工作原理。...但是，我们将对最重要的内容进行很好的概述，力图将一切可视化。 “两个阶段” 布局系统和约束首先，小部件是Flutter SDK的构建块，但它们不负责将其自身绘制到屏幕中。...父级收集所有子级的大小，然后使用此几何信息将每个子级正确定位在自己的笛卡尔系统中。这个阶段负责确定大小和位置，在此阶段，父组件知道每个子组件的大小以及他们的位置。那么，这到底意味着什么？...而是，AppBar以首选/默认大小响应Scaffold：高度= 80，宽度= 392（受接收到的约束的约束）获得AppBar的大小后，Scaffold继续下一个子项：Center 好的，这里发生了很多事情...Scaffold收到Center所需的尺寸，并且流程继续向其最后一个孩子：FAB FAB收到约束，然后将其首选大小返回给Scaffold（56:56）最后，Scaffold还具有将每个孩子都放置在其笛卡尔系统内所需的所有几何信息

1.7K2 0

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标的 SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter...: _kFontFam, fontPackage: _kFontPkg); } IconData 构造函数参数说明 : codePoint : 字体中的图标对应的十六进制 Unicode ; fontFamily...: pubspec.yaml 中配置的 fontFamily ; fontPackage : 字体所在的包 , 默认不填 ; matchTextDirection : 图标绘制方向 , 是否按照 svg...文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标 child: Icon(IconData

2.1K2 0

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

未经过改装的MaterialApp 可以说MaterialApp基于WidgetsApp 如果对MaterialApp不熟悉，可先看我上一篇文章： Flutter之MaterialApp使用详解...1. textStyle 为应用中的文本使用的默认样式使用 //该段代码源自flutter/material/app.dart //因为MaterialApp都是使用Theme里面的主题色，并且一般部件使用的是...4. home 该字段在MaterialApp中调用的是WidgetsApp的onGenerateRoute 当参数setting.name为Navigator.defaultRouteName(即...onGenerateRoute里面查找 6. theme 该主题主要传入到AnimatedTheme这个部件中，最终传入Theme 用于作为MaterialAPP里面的Widget的主题一般使用...BottomNavigationBar、AppBar这些部件，会应用到这个主题 //如果为空使用默认光亮主题 final ThemeData theme = widget.theme ??

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )

【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )

【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )

Flutter | 常用组件分类、概述、实战

flutter 之Text介绍

flutter 起步

Flutter跨平台移动端开发丨WillPopScope、InheritedWidget、Theme

Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

Flutter Icon IconFont（图标控件）

Flutter之旅：认识Widget(源码级)

flutter主题设置

Flutter 全栈式——页面框架

Flutter底部不规则导航的实现过程

带你快速掌握Flutter图片开发核心技能

仿写新闻客户端

【Flutter】362- 让前端开发者失业的技术，Flutter Web 初体验

Flutter —布局系统概述

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐