如下是Material 2和Material 3风格下默认的AppBar展示效果: Material 2Material 3 登录后复制AppBar(title:constText('AppBar 组件')), AppBar 组件的高度 对于AppBar来说,最重要的莫过于它的高度,那它的高度是如何确定的呢?这就不得不说PreferredSizeWidget一族的组件了。如下可见,它实现了PreferredSizeWidget类:...
如下是Material2和Material3风格下默认的AppBar展示效果: Material2 Material3 代码语言:javascript 复制 AppBar(title:constText('AppBar 组件')), 1. AppBar 组件的高度 对于AppBar来说,最重要的莫过于它的高度,那它的高度是如何确定的呢?这就不得不说PreferredSizeWidget一族的组件了。如下可见,它实现了Preferr...
Material3 又叫 MaterialYou , 是谷歌在Android12 时提出的全新UI设计规范,现在 Flutter 3.0 里你可以通过useMaterial3: true打开配置支持。 代码语言:javascript 复制 theme:ThemeData(primarySwatch:Colors.blue,///打开 useMaterial3 样式useMaterial3:true,),复制代码 当然,在你开启 Material3 之前,你需要对它有...
在Material3 下颜色其实不是完全按照 RGB 去计算,而是会经过material-color-utilities的转化,通过内部的CorePalette对象,RGB 会转化为 HCT 相关的值去计算显示。 对于HCT 其实是 Hue、Chroma、Tone 三个单词的缩写,可以解释为色相、色度和色调,通过谷歌开源的material-color-utilities插件就可以方便实现 HCT 颜色空间的...
theme:ThemeData(primarySwatch:Colors.blue,///打开 useMaterial3 样式useMaterial3:true,), 1. 2. 3. 4. 5. 当然,在你开启 Material3 之前,你需要对它有一定了解,因为它对 UI 风格的影响还是很大的,知己知彼才能不被背后捅刀。 如下图所示,是在primarySwatch: Colors.blue的情况下,AppBar、Card、TextButto...
Text('Row 3'), ], ), ), ), ), ); } } 如图所示,appbar和中间的文字我们都是可以复制选定的,代码也很简单,使用也很方便。 如果我想要在被 SelectionArea 包裹的某些内容不允许被选中,我们可以使用SelectionContainer.disabled: import 'package:flutter/material.dart'; ...
///打开 useMaterial3 样式 useMaterial3: true, ), 当然,在你开启 Material3 之前,你需要对它有一定了解,因为它对 UI 风格的影响还是很大的,知己知彼才能不被背后捅刀。 如下图所示,是在primarySwatch: Colors.blue的情况下,AppBar、Card、TextButton、ElevatedButton的样式区别: ...
appBar: AppBar( centerTitle: true, // 标题内容居中 automaticallyImplyLeading: false, // 不使用默认 leading: Icon(Icons.menu, color: Colors.red, size: 30.0), // 左侧按钮 flexibleSpace: Image.asset('images/app_bar_hor.jpg', fit: BoxFit.cover), // 背景 ...
UI组件库:Material-Design3 弹窗组件:showDialog/showModalBottomSheet/AlertDialog 图片预览:photo_view^0.14.0 缓存技术:shared_preferences^2.2.2 下拉刷新:easy_refresh^3.3.4 toast提示:toast^0.3.0 网址拉起:url_launcher^6.2.4 目前使用flutter开发的项目支持编译到全平台android/ios/macos/linux/windows/web,可以...
3.AppBar 4.TabBar 4.BottomNavigationBar 5.Drawer 6.FloatingActionButton 7.FlatButton 8.PopupMenuButton 9.SimpleDialog 10.AlertDialog 11.SnackBar 12.TextField 13.Card 一、 MaterialApp(应用组件) MaterialApp代表使用质感设置风格的应用,一个完整的Flutter项目就是从MaterialApp开始的。