flutter广告页,flutter启动屏广告

Flutter应用启动页设置,解决 白/黑 屏情况

出现此情况的原因有两种

解决:

找到 \app\src\main\res\drawable\launch_background.xml 文件，这个里面初始化了布局标签,只需要把图片替换为我们自己的就可以。

或者根据不同手机的分辨率 在mipmap下放置图片例如：

之后前往 styles.xml 文件设置启动页

重新打包就可以看到 刚刚设置的启动页了

效果例如：

[图片上传失败...(image-7e5c2-1586668143446)]

至此可以流畅的打开启动页了

Flutter基础篇——常用Widget

对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。

flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

Text ： 该 widget 可让创建一个带格式的文本。

Row 、 Column ： 这些具有弹性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。

Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。

Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。

具体的演示见我另外的博客

有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

还有一部分Widget允许存在多个子Widget，用 children 作为属性。

例如：Row、Column、Stack等Widget。

在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState

当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

OVER~

Flutter:快速创建简单闪屏页

近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 - flutter_native_splash . 接下来我们就来看一下具体应该怎么使用这个插件.

首先把 flutter_native_splash 导入到工程的 pubspec.yaml 中.这里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具体如下所示.

接下来我们就来配置 flutter_native_splash ,在配置之前我们看一下 flutter_native_splash 的可配置项.

例如,我现在只有一个logo图片,那么我想生成iOS和android两端的闪屏页,这时候我只需在 pubspec.yaml 如下设置即可.

当然了,如果你有其他配置可以自行进行添加.

配置完成了,我们该如何生成呢?这时候需要我们打开终端 cd 到我们的工程目录下.如果是Android Studio 或者 VSCode 默认就是在当前工程目录下.

然后我们需要执行下面的三个命令来生成闪屏页

每一次都敲三个命令实属麻烦,我们把上诉的三个命令整合成一个命令,如下所示.

那么,我们不想使用该插件生成的闪屏页该怎么办呢?我们只需要执行下面命令即可.

注:每一次更换图片都是需要重新执行命令重新生成.

OK,上面就是关于 flutter_native_splash 的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.

Flutter PageView使用案例

现在的小目标是要实现一个 「图片轮播」的效果，我们在 Android 中可以使用 ViewPager 结合 handler 或者 Timer 去实现。

而我们在 Flutter 中，其实也是类似的。

那么，在 Flutter 中，代替 Android 中的 ViewPager 组件是 PageView ，而且，这个 PageView 相比 ViewPager 扩展性更高。

我们来看一下

Flutter PageView 官网

根据官网的介绍， PageView 在需要展示的页面很多时，有「控件复用」功能，而且，我们还可以通过

来设置滚动的方向，也就是说，我们还可以完成「纵向滚动」，真的很棒有么有？

偷的小米官网的轮播图

看一下效果图

GestureDetector ，或者直接返回一个 button 类型的 Widget 即可

ok,了解了这个PageView，接下来，我们想法子搞一个「轮播效果」，请见下一篇文章。

(1)Flutter记录之启动页

一年半前玩过flutter，忘光光...现在是时候重新拾取了。~

启动页一般只放图片或者加几行文字。

1、创建好flutter项目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目录下新建images文件夹，如已有直接放入图片

3、flutter_yijiake.iml中加入注入该图片，并注意空格

4、在根目录下的test/widget_test.dart中更改默认的启动页为当前的启动页路径

5、最后重新设置启动时的页面

6、非常简单的启动页面放logo图片

值得一说的是，flutter框架的UI组件需要已new 组件的形式展开。

Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏点爱星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 视频播放列表] ( )

项目地址: 持续效果更新

1.基本的布局是简单的,外层通过Stack作为根

2.左边点赞的控件组通过Align进行统一布局

3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局

4.底部同样使用Positioned,设置底部距离

5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作

1.pageController监听

刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多

2.歌曲名走马灯效果

这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现

首页listview里面套入的是最简单的container+text

listview添加一个ScrollController做为滑动的控制

使用一个定时器,把listview滑到最大的位置之后,在滑回去

先通过scroController.position.maxScrollExtent获取最大位置,

然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画