Flutter基础教程
文章平均质量分 79
基础教程,跟着一步步学,最最最好玩的教程,入门Flutter简直不要太简单~
后续会推出进阶教程.
可以加入Flutter技术交流群一起学习哦,在博客文章的最底部有我们的二维码哦~
编程的平行世界
这个作者很懒,什么都没留下…
展开
-
flutter扫雷
当我们回忆起小时候的经典电脑游戏,扫雷一定是其中之一。这个简单而富有挑战的游戏不仅考验我们的智力和耐性,而且在完成后还会让我们感到一种无与伦比的成就感。现在,您可以使用Flutter来重新体验这个经典游戏,无论您是Flutter新手还是老手,都能通过本文,让您在Flutter的世界中开发出一个令人满意的扫雷游戏。原创 2023-03-14 12:48:53 · 366 阅读 · 0 评论 -
拿来吧你! Flutter贪吃蛇 — 陀螺仪至尊VIP版
中秋快乐!!!前言:放假期间,小T打算回顾一下经典,想用Flutter做一下小游戏,做什么好呢,从打飞机到坦克大战,最后还是想做一款贪吃蛇,依稀还记得,小时候第一次玩游戏是在父母的小灵通上玩贪吃蛇哈哈,但是光光一个贪吃蛇太单调了,我们就加一个陀螺仪吧~话不多说,先上效果图,有图有真相!!(陀螺仪好难操控)开发步骤:非常简单,就是玩起来有点费手~源码在最后哦,直接运行即可1.定义蛇和豆子2.让蛇动起来3.使用陀螺仪来控制蛇4.让蛇吃掉豆子5.吃掉豆子随机生成一个豆子1.定义蛇和豆子/原创 2021-09-20 21:12:07 · 1821 阅读 · 0 评论 -
Flutter制作中秋引导页
原文地址:https://juejin.cn/post/7007756651197366303前言:看了很久,大家是真的????????,月球绕地球都整出来了,那我也来给大家整上花活~然后送上中秋祝福:月儿圆又亮,月饼圆又甜,家家团圆相聚,人人欢心甜蜜,祝你家圆人圆事事圆,中秋愉快!(各位看到文章的可否点击一下原文地址,给小T一个赞呀 ~ )app中秋的引导界面:功能解析:1.状态变化:背景和展示出来的诗篇与日期有关,日期不同,背景和诗篇不同2.文字特效:中秋祝福的诗篇会一字一字慢慢浮现3.倒原创 2021-09-16 06:53:55 · 253 阅读 · 1 评论 -
Flutter自适应瀑布流
Flutter自适应瀑布流前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验(具体代码请联系我,当天会回复)话不多说先上效果图:根据效果图可以分为四步:1.图片自适应2.自适应标签3.上拉刷新和下拉加载4.底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button库注:本文使用的库:为啥这么多呢,因为我把图片缓存这样东西都加上了,单纯的瀑布流就用waterfall_flowwaterfall原创 2021-09-12 10:59:11 · 1901 阅读 · 7 评论 -
Flutter ListView优化(滑动不加载,停止滑动加载)
Flutter ListView加载图片优化(滑动不加载,停止滑动加载)前言:为了更好的减小网络的带宽,使得列表更加流畅,我们需要了解懒加载,也称延迟加载。 面试真题:flutter如何实现懒加载?本章,我们会实现wechat朋友圈的优化功能,即当页面在滑动时不加载图片,在界面停止滑动时加载图片。效果图:滑动时:停止滑动开始加载:1.了解widget通知监听:NotificationListenerNotificationListener属性:child:widgetonNot原创 2021-09-02 16:00:43 · 7115 阅读 · 6 评论 -
Flutter拍照与选择照片并且保存到本地
本文使用:image_picker插件该插件已支持Android与IOS需要适配web的同学可以使用:image_picker_web(可以完成开发中的大部分需求,但有部分机型会出现调用相机时闪退问题)话不多说先上效果图:拍照:相册:核心代码:final picker = ImagePicker(); //初始化///存放的图片File _imgPath;Future getImage(bool isTakePhoto) async { try { var picke原创 2021-08-19 17:07:33 · 2313 阅读 · 10 评论 -
获取SHA1的值,以及处理报错
前言:高德地图开发之获取SHA1码我们在使用高德的SDK时,需要填写安全码SHA1,那么我们如何去获取呢有两种方式:1.使用 Android Studio 的 Terminal 工具2.使用cmd我们使用cmd来获取:第一步:进入控制台,并定位到自己的.android第二步:获取调试版本调试版本使用 debug.keystore,命令为:keytool -list -v -keystore debug.keystoredebug默认的输入密钥库口令:android第三步:获取发布版原创 2021-08-13 13:24:20 · 968 阅读 · 7 评论 -
打入高德内部获取到的 — Flutter 高德定位的使用方案
前言:兄弟们,咱们这个基础部分是已经结束了,学会之前的那些骚操作就基本上可以自己写点小东西玩玩了,现在来讲讲一些开发中常用的功能。定位是我们开发中常用的功能,为了帮助大家理解,我冒着生命危险从高德总部偷出来了这一份方案!!(求大家给个三联,我好跑路啊)话不多说,先上效果图:准备阶段:1.插件准备:amap_flutter_location: ^2.0.0 #高德地图插件地址permission_handler: ^8.1.4 #权限管理,获取定位权限用插件地址2.在高德的开发者平原创 2021-08-07 14:36:21 · 2110 阅读 · 12 评论 -
Flutter-阿里P7告诉我的屏幕适配终极方案!!!
前言:我相信每个移动端开发者都避不开这个问题,就是屏幕适配目前移动端的设备已经非常多,并且不同的设备手机屏幕也不相同。目前做移动端开发都要针对不同的设备进行一定的适配,无论是移动原生开发、小程序、H5页面。所以这篇文章咱们来讲讲屏幕适配,阿里P7告诉我的适配方案!最最最重要的一点:宽度一般根据屏幕宽度算 高度看情况 文字按UI的来 高度不限制!!!多使用Expanded这样自适应的组件!!我们可以根据设备信息来进行适配:获取屏幕上的一些信息,可以通过MediaQuery:// 1.媒体查询信原创 2021-08-02 16:17:27 · 1466 阅读 · 12 评论 -
[DioErrorType.DEFAULT]: SocketException: OS Error: Connection refused, errno = 111, address = local
Bug处理 — dio网络请求问题报错[DioErrorType.DEFAULT]: SocketException: OS Error: Connection refused, errno = 111, address = localhost, port = 53766这个问题在学习Flutter 网络请求时非常常见总结来说造成这个问题的出现有4种可能:1.请求本地连接,ip地址错误2.未添加网络请求权限3.请求的地址是http,不是https4.与服务端的请求参数不同,导致无法请求到原创 2021-07-28 09:04:31 · 9073 阅读 · 5 评论 -
多种网络请求方式 ,这么骚气的操作确定不来看看嘛?
前言:兄弟们,网络真是个好东西,里面去个个都是人才,说话又好听,超喜欢在里面。确实,网络已经是我们日常生活中密不可分的一部分了那咱们今天就来讲讲Flutter里的网络。本节内容:1.Dart 原生的网络请求 HttpClient2.第三方网络请求 http3.Flutter 发布的 dio (这个可是不得了)1.Dart 原生的网络请求 HttpClient对于初学者来说,使用dart 中的HttpClient发起的请求,能快速接入HTTP网络请求。但HttpClient本身功能较弱原创 2021-07-24 20:34:22 · 477 阅读 · 15 评论 -
12.Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
前言:在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。但是仅仅这样时不够的在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作…详解图:本节内容:1.Navigator.pushReplacement2.Navigator.PushAndRemove3.Navigator.maybePop与Navigator.canPop4.FlutterBoost (简单讲讲)详细解读敬请期待~1.Navigator.pu原创 2021-07-17 22:00:27 · 1160 阅读 · 5 评论 -
11.Flutter路由管理与Navigator基础使用
前言咱们程序员最有B格的时候,无非是在小白面前敲着一行又一行的代码(记得换成黑色的背景,不要问为什么,一因为帅就完了),然后使屏幕浮现出炫酷的动画,这才是最有B格的时候,那普通人又看不懂咱的逻辑,对吧~无论是App还是Web又或者是桌面程序,每一处都有页面间的跳转 ,毕竟一个应用程序都包含多个页面,咱不能一直往下滑吧哈哈在 Flutter 中,这些元素被称为路由(Route),它们由导航器(Navigator) 控件管理。导航器管理着路由对象的堆栈并提供管理堆栈的方法,如 Navigator.push原创 2021-07-11 10:19:22 · 1856 阅读 · 7 评论 -
10.开发中最让人感到惬意的还得是它—常用组件详解(填充系列)
前言普通的基础组件自然不能满足我们的日常开发需求,所以小T带大家了解Flutter开发中的常用组件本篇将介绍常用的组件。分为上中下三篇在这里插入图片描述结构图:本小结内容:1.SizedBoxSizedBox.expandSizedBox.shrinkSizedBox.fromSize2.Expanded这两个组件都是在屏幕适配时常用或者必用的,因为啥呢,它省事啊!1.SizedBox这是一个特定大小的盒子。这个widget给予子控件宽度和高度。如果宽度或高度为null,则原创 2021-07-05 09:23:23 · 332 阅读 · 5 评论 -
9.最最最常用的就是按钮了吧~ — 常用组件详解(按钮系列)
前言普通的基础组件自然不能满足我们的日常开发需求,所以小T带大家了解Flutter开发中的常用组件**本篇将介绍常用的组件。分为上中下三篇结构图:本小结内容:1.IconButton2.MaterialButton 1)RaisedButton 2)FlatButton 3)OutlineButton3.InkWell(用处超多哦~)好好看好好学 1.IconButtonIconButton一个Material图标按钮,点击时会有水波动画让我们来看看它的原创 2021-07-01 16:00:17 · 942 阅读 · 8 评论 -
8.老板要我做个新闻界面,我反手一套列表组件~(列表系列)
前言普通的基础组件自然不能满足我们的日常开发需求,所以小T带大家了解Flutter开发中的常用组件本篇将介绍常用的组件。分为上中下三篇结构图:本小结内容:1.ListView (详解)2.GridView3.PageView (用处超多哦~)好好看好好学 ListView:1.ListView普通ListView (适用于列表中含有少量元素的场景)ListView.builder (适用于子 Widget 较多,且视觉效果呈现某种规律性的场景)ListView.原创 2021-06-19 07:55:38 · 256 阅读 · 15 评论 -
7.Flutter教程 — 基础组件综合实例
前言:终于到了大家最期待的综合实例阅读完这节内容可以帮你巩固提升!正文:老规矩先上效果图,毕竟有图有真相!源码找我领取哦,在文章最下面~先分析一下效果图第一步:实现底部跳转栏小T这里是五个Tab,所以要先定义五个Dart文件,进行一些初始配置.然后在main引入这五个界面,并且配置跳转的图标和文字,记得定义跳转指针哦然后在脚手架使用://核心代码return Scaffold( body: page[_currentIndex], bottomNavigationBar:原创 2021-06-13 09:23:18 · 318 阅读 · 13 评论 -
6.第四节 — Flutter教程 — 基础组件(下)
前言**为了能更快的创建一个好看的应用,Flutter提供了一系列的组件。有基础组件(Basics Widgets),质感组件(Material Components)等,本篇将介绍常用的基础组件。分为上下两篇基础组件(上)在这里哦~结构图:本小结内容:1.Widget树(浅谈)2.Scaffold (脚手架)1.Widget树(浅谈)想以后深入了解的直接跳过 => 参考小T的详解Widget树 在Flutter中,几乎任何事物都是Widget可以把Widget想象成一种原创 2021-06-10 10:12:37 · 250 阅读 · 8 评论 -
5.第三节 — Flutter教程 - 基础组件(上)
前言为了能更快的创建一个好看的应用,Flutter提供了一系列的组件。有基础组件(Basics Widgets),质感组件(Material Components)等,本篇将介绍常v用的基础组件。分为上下两篇 基础组件(下)在这里哦(综合实例!!!)结构图:本小结内容:1.Text(文本组件)2.Image和Icon3.Container(容器组件)4.Row(横向)和Column(纵向)— 咱们从子组件一步步往上学习1.Text(文本组件)Text用于显示简单样式文本,它包含一些原创 2021-06-05 09:44:57 · 466 阅读 · 8 评论 -
4.解析 — Flutter工程解析(如何运行写初始化一个Dart文件)
解析 — Flutter工程解析(如何运行写初始化一个Dart文件)这是一节小白必看的解析哦~,如果你了解过一点Flutter的写法可以跳过这节.主要是不写这节,后面讲的内容小白不知道如何下手(不影响正常更新~)让我们来看看工程结构:文件或目录说明.dart_tool记录了一些dart工具库所在的位置和信息.ideaandroid studio 是基于idea开发的,.idea 记录了项目的一些文件的变更记录androidAndroid项目文件夹ios原创 2021-06-02 09:46:46 · 2645 阅读 · 14 评论 -
3.第二节 - Flutter教程 — 第一次运行Flutter工程时的Bug总结
小T的吐血总结!!! 问题总结:问题1:运行卡在Running Gradle task ‘assembleDebug‘ ,然后报错;问题2:AndroidStudio SDK无法下载;问题3:android编译jdk版本与运行jdk版本冲突;问题4:Gradle版本太高或太低(注:每个Flutter版本都有一个默认的Gradle版本);问题5:莫名其妙的问题(小T遇到过的!!!);注:本章的重启AndroidStudio建议清除缓存重启!1.问题一:运行卡在Running Gradle原创 2021-05-29 10:55:39 · 979 阅读 · 19 评论 -
2.解析 — Flutter 不同版本之间的区别
解析 — Flutter 不同版本之间的区别小T带你了解不同Flutter之间的区别~ 在此分为两类: 低于2.0.0版本的 2.0.0版本及以上两者比较 &原创 2021-05-26 20:27:19 · 3670 阅读 · 18 评论 -
1.第一节 - Flutter教程之AndroidStudio配置Flutter工程(并运行第一个项目)
小T带你通俗易懂的配置1.下载Flutter SDK(不知道不同版本有什么区别时,可以参考这篇文章FlutterSDK下载地址:https://flutter.dev/docs/development/tools/sdk/releases (需要翻墙)(可以找热心的小T获取哦)...原创 2021-05-22 20:49:59 · 783 阅读 · 14 评论