![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
香港胖仔
LiaoNing Technical University Information and Compute Science
展开
-
122、Flutter 实现类似网易新闻的客户端APP(视屏列表页面的抽象及优化)
这一篇来讲解一下视频列表页面的优化,与上一篇的区别主要是进行的代码的抽象,对可复用部分使用tabCommon类进行了封装。将主页中的SmallVideoPage.dart页面替换成VideoTabPage2这个界面,因为视频页面也有一级菜单和二级菜单。这里的TabCommon就是为了多级菜单抽象出来的抽象工具类。VideoTabPage2 是bottomTabBar里面对应的...原创 2020-03-16 00:45:19 · 1008 阅读 · 0 评论 -
121、Flutter 实现类似网页新闻的客户端APP (视频列表页面)
继上一章讲到如何构建首页多顶部tab页,加底部导航栏的多层级页面切换的模式今天来继续讲一下底部导航栏切换到视频模块的时候,视频模块内部的构建形式如下图所示,视频模块首页是VideoTabPage2是视频模块的主页面,通过顶部的tabStrData中的标签和tabWidgets中的widget,将顶部的tab标签映射到具体的页面TabCommon是具体的负责映射,的页面,appB...原创 2020-03-02 01:24:45 · 1291 阅读 · 0 评论 -
120、Flutter 实现类似网页新闻的客户端APP
Hi dear 今天是0202 年02月25日。在2019-COV病毒的侵扰下,全国童鞋都闷在家中与病毒做斗争。题外话: 简称为国宅家。然鹅上个星期,在疫情稍微有些好转的时候,全国除湖北外,其他省份新增确诊人数开始下降,湖北新增还在增长之时。博主接到了复工的通知。作为一名码农,真的很佩服我们公司湖北分部的同志们,在疫情肆虐如此严重的情况下,依然可以使用我们的出单机器人继续出单...原创 2020-02-25 01:17:24 · 2040 阅读 · 0 评论 -
119、Flutter使用Flutter Dev tool 在网页中实时调试
最近在研究flutter 开发,发现flutter编辑出来的界面之后没有办法像,之前web开发那样,能够在浏览器中实时查看样式。所以就谷歌了一下如何才能实现实时查看样式。发现使用 flutter dev tools可以实现这个功能1、首先在cmd命令行中输入 flutter upgrade升级flutter 到1.12.16 以上的版本,这里目前需要选择flutter的dev分支...原创 2020-01-05 16:45:47 · 4547 阅读 · 0 评论 -
118、Flutter使用Provider组件,将StatefulWidget变为StatelessWidget
这一小节介绍,使用flutter 的provider组件,将stateful widget 变成stateless widgetimport 'package:flutter/material.dart';import 'package:todoey_flutter/screens/tasks_screen.dart';import 'package:provider/p...原创 2019-12-22 01:11:04 · 1864 阅读 · 0 评论 -
117、Flutter中的状态控制
1、今天来讲一下Flutter中的状态控制首先创建一个Stateful Widget这个节点是有状态的import 'package:flutter/material.dart';import 'package:todoey_flutter/widgets/tasks_list.dart';class TaskTile extends StatefulWidget { @ove...原创 2019-12-17 02:16:01 · 183 阅读 · 0 评论 -
116、Flutter 实现向上弹出上拉框
今天是2019年12月06号,好久没有写博客的,今天接着学习了Flutter最后一个app项目,向上弹出上拉框。书是人类进步的阶梯,学习才能进步。1、首先整个项目的目录如下图所示2、第一个文件tasks_screen.dart 主要构件主要样式框架import 'package:flutter/material.dart';import 'package:tod...原创 2019-12-16 02:17:21 · 1951 阅读 · 1 评论 -
115、Flutter实现社交聊天软件的登录,注册,发送和接收聊天信息,与谷歌firebase进行集成
Flutter实现社交聊天软件注册部分1、需要点击register按钮2、输入用户的邮箱和密码3、之后就跳转到聊天界面项目的结构如下图所示:main.dart进行跳转,跳转到welcome欢迎页import 'package:flutter/material.dart';import 'package:flash_chat/scree...原创 2019-08-16 02:00:07 · 2182 阅读 · 1 评论 -
114、Flutter动画实现动态字体输入
Flutter实现动态字体输入的动画效果使用组件animated_text_kit.dartimport 'package:animated_text_kit/animated_text_kit.dart';然后将之前的Text Widget替换为TypewriterAnimatedTextKit Widget这里可以设置动态输入动画效果的文字内容字体样式字体大小...原创 2019-08-07 11:45:11 · 1079 阅读 · 0 评论 -
113、Flutter mixin类解决多继承的问题
void main() { Duck().swim();}class Animal{ void move(){ print('changed position'); } }class Fish extends Animal{ @override void move(){ super.move(); print('by s...原创 2019-08-06 21:39:01 · 1011 阅读 · 0 评论 -
112、Flutter实现图片放大缩小的动画小
Flutter是通过Animation组件来实现动画效果的main.dart文件中的内容与上一篇显示的代码相同这一篇博客主要关注放大缩小的动画效果1、WelcomeScreen widget继承了StatefulWidget组件,在initState方法中设置动画效果2、动画效果主要通过Animation组件来实现AnimationController设置动画...原创 2019-08-06 20:23:26 · 4897 阅读 · 0 评论 -
111、Flutter 实现动画颜色渐变效果
1、main.dart设置导航到登录界面import 'package:flutter/material.dart';import 'package:flash_chat/screens/welcome_screen.dart';import 'package:flash_chat/screens/login_screen.dart';import 'package:flash_cha...原创 2019-08-06 18:02:31 · 5244 阅读 · 0 评论 -
110、Flutter实现调用API接口查询天气
1、项目的结构如下图所示:main.dart 为Flutter项目的入口2、main.dart 文件一部分指定整个项目的背景是黑色的一部分表示整个程序的入口home:LoadingScreen()import 'package:flutter/material.dart';import 'package:clima/screens/loading_screen.d...原创 2019-08-03 13:55:11 · 3117 阅读 · 4 评论 -
108、Flutter实现BMI体重指标的计算
首先app制作完后的界面如下图所示:第一页:第二页:项目的结构如下图所示:在lib文件夹下边有components和screens两个文件夹components文件夹下面有主要是定制化,可重用的组件 如下面的红色按钮,第一页中的块部分,身高体重的可重用的块,圆形的按钮。screens下面主要是第一页和第二页的结构:...原创 2019-06-12 00:55:48 · 646 阅读 · 0 评论 -
107、Flutter 编写手动批题的app
该模块分为三个文件main.dart ------------------------------------------》用来绘制前端界面story.dart ------------------------------------------》用来定制PO对象story_brain.dart ----------------------------------》用来编...原创 2019-06-08 20:14:03 · 405 阅读 · 0 评论 -
106、Flutter实现动态批题
如上图所示,用户通过点击True或者False按钮,对于上图中的题目进行批阅,并且在最下边的横条中出现√或者×1、首先在主文件中画出该界面的布局,和样式由下图所示,该布局在整体的StatelessWidget 中嵌套了一个StatefulWidget并且在安全区域中嵌套了两个Expanded widgetimport 'package:flutter/mater...原创 2019-05-29 22:31:26 · 527 阅读 · 0 评论 -
106、Flutter手机布局自适应宽度
1、本小节讲解Flutter自适应手机宽度,并且在button上面添加图片的组件自适应宽度的组件-------->Expanded在按钮上面添加图片的组件------------->FlatButtonimport 'package:flutter/material.dart';void main() { return runApp( ...原创 2019-05-15 17:14:56 · 7461 阅读 · 0 评论 -
105、Flutter 实现安装端mi_card登录界面的绘制
由于看的是谷歌官方的Widget Flutter教程,博主本人花10刀买的,所以里面很多术语都是英文的,这回主要是实现一个手机前端的登录界面开发,使用Flutter的预定义组件Scaffold --------->appColumn --------->表示上下进行布局Column下面的children-------->表示上下布局中的子元素...原创 2019-05-15 01:00:06 · 213 阅读 · 0 评论