PageView 是一个滑动视图列表，它也是继承至 CustomScrollView 的。
Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;
完整版脑图，后台回复 “Flutter” 关键字,关注 码个蛋(codeegg)会持续更新本系列文章.
Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ;
这次的 Flutter 小技巧是 ListView 和 PageView 的花式嵌套，不同 Scrollable 的嵌套冲突问题相信大家不会陌生，今天就通过 ListView 和 PageView 的三种嵌套模式带大家收获一些不一样的小技巧。
PageView控件可以实现一个“图片轮播”的效果，PageView不仅可以水平滑动也可以垂直滑动，简单用法如下：
在 Flutter 中，NavigationRail 是一个垂直的导航栏组件，用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备，如平板电脑和桌面应用程序。NavigationRail 提供了一种直观的方式来浏览应用程序的不同部分，并允许用户轻松地切换页面或执行导航操作。
FractionallySizedBox 组件 : 可控制组件在水平/垂直方向上填充满父容器 ;
以下代码基本参考于 flutter_gallery中的animation_demo示例。（可以结合本文看源码）
Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是可以换行 ;
在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。
年前有给大家分享一款flutter3.x+dart3手机端聊天App实例。春节期间就又捣鼓了flutter3桌面端开发实践项目。
PageView可用于Widget的整屏滑动切换，如当代常用的短视频APP中的上下滑动切换的功能，也可用于横向页面的切换，如APP第一次安装时的引导页面，也可用于开发轮播图功能
在flutter中，如果想实现上面的页面切换效果，必然会想到pageView。pageView的controller可以监听到pageView的滚动事件，也可以获取pageView滚动的位置，所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了。
以下代码基本参考于 flutter_gallery中的animation_demo示例。（可以结合本文看源码） 整体动画效果预览
Flutter对于客户端工程师来说，相信大家已经不陌生了，我最近在学习中汇总了一些总结经验，其中大部分内容为我个人见解，希望能给予你们帮助。在此，我想通过抛砖引玉，来吸引更多的人贡献学习心得。
flutter3.x_douyin基于flutter3+dart3+getx+meidaKit等技术开发抖音版app视频直播项目。
我们都知道 BottomNavigationBar 是一个移动端非常常用的底部导航栏组件，可以用于点击处理激活菜单，并通过回调来处理界面的切换。
1. decoration 装饰。可用于设置背景颜色和图片，值的类型为BoxDecoration；
Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等
今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。
在 Scaffold 的 bottomNavigationBar 属性设置底部导航栏 ;
1.可以自定义高度和一些属性2.展示图片3.自动翻页播放4.点击事件5.指示器6.人为拖动的时候关闭自动播放
昨天谷歌为在 Flutter Interact 上为我们带来了 Flutter 1.12 ，这是 1.9.x 的版本在经历 6 次 hotfix 之后，才带来的 stable 大版本更新。该版本解决了 4,571 个报错，合并了 1,905 份 pr，同时本次发布也是 Flutter 一年内的第五个稳定版本。
这个demo有两处问题： 1. 点击切换左侧菜单时，由于右侧内容滚动也触发了scroll事件，导致互相影响；
PageView 组件构造函数 : 构造函数中的可选参数就是 PageView 组件的所有可设置选项 ;
在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。 在正文之前，先看一些常见的App导航，以喜马拉雅FM为例:
应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。
在pub上面找了下，没有发现一个效果跟微信一样的支持缩放拖拽效果的image，所以就自己撸了一个，之前写过Flutter 什么功能都有的Image，于是就在这个上面新增了这个功能。
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，如果你想升级到最新版本，建议慎重，有些人升级后项目无法运行。
作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的 Flutter 应用。
SliverGridDelegateWithFixedCrossAxisCount有属性介绍如下：
在本文中，我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。对于本教程，您将不需要 google maps API，因此您无需支付任何费用，因为我们将使用另一个免费 API，所以不用多说，让我们深入研究它。
创建空的 dart 文件 StatelessWidgetPage.dart , 导入最基础的材料设计包 ,
作为系列文章的第七篇，本篇主要在前文的基础上，再深入了解 Widget 和布局中的一些常识性问题。
我在之前的文章文本、图片和按钮在Flutter中怎么用中，简单介绍过按钮组件，本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。
UIScrollView的pagingEnabled属性用于控制是否按分页进行滚动。在一些应用中会应用到这一个特性，最典型的就是手机桌面的应用图标列表。这些界面中往往每一页功能都比较独立，系统也提供了UIPageViewController来实现这种分页滚动的功能。 实现分页滚动的UI实现一般是最外层一个UIScrollView。然后UIScrollView里面是一个总体的容器视图containerView。容器视图添加N个页视图，对于水平分页滚动来说容器视图的高度和滚动视图一样，而宽度则是滚动视图的宽度乘以页视图的数量，页视图的尺寸则和滚动视图保持一致，对于垂直分页滚动来说容器视图的宽度和滚动视图一样，而高度则是滚动视图的高度乘以页视图的数量，页视图的尺寸则和滚动视图保持一致。每个页视图中在添加各自的条目视图。整体效果图如下：
有时候我们为 Text 设置 ellipsis ，却发现并没有生效，而是出现如下图左边提示 overflowed 的警告。
通过视频我们可以看到，当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候，每一次进入页面的时候该页面的数据都会重新加载。那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。
Flutter 1.12 是 1.9.x 的版本在经历 6 次 hotfix 之后，才带来的 stable 大版本更新。该版本解决了 4571 个报错，合并了 1905 份 pr，同时本次发布也是 Flutter 一年内的第五个稳定版本。
我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在PageView上,开发过Android同学知道可以用Framelayout布局来实现，Flutter上也有类似的控件Stack，我们先完成骨架代码
从 2021 年 11 月份，到现在大概三个月的时间，没有发布过什么新文章。期间一波三折，经历了拆迁、装潢、搬家，很多琐事缠身，业余时间的主要精力也都放在了这本小册身上。小册在年前完成的，也算为我这平静的一年画上一个完美的句号。
左侧三张图片是我的实际开发中业务界面，用作展示而已，具体源码效果是右边侧的三张图片。
在移动应用开发中，底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式，使用户可以轻松访问应用程序的各个部分。在Flutter中，底部导航栏也是一项强大的功能，开发者可以利用Flutter框架提供的丰富组件和灵活性，轻松实现各种样式和交互效果的底部导航栏。
很多朋友可能在布局过程中、或者组件使用过程中，会遇到诸如颜色、尺寸、约束、定位等问题，可能会让你抓耳挠腮。俗话说，磨刀不误砍柴工，会使用工具是非常重要的，其实 Flutter 提供了强大的调试工具，可以辅助我们去查看界面布局中的一切细节。
接到了一个仿电影院的需求，上周几乎是找遍了百度，谷歌，stackoverflow。均没有找到用flutter实现的效果，那只能自己写一个了。本文只讲思路，具体实现还需各位看官自己动手。只要看懂了下面的思路，实现起来非常简单。
和尚今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar，使用方式很简单，和尚感觉效果比原生的 Android 要好一些。
在iOS原生开发中，实现抽屉视图还是比较麻烦的，有时还需要借助第三方组件来实现。但是在Flutter中，我们利用Drawer组件就可以很轻松实现抽屉视图。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
