flutter属于前端开发吗

一、flutter属于前端开发吗

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端开发从网页制作演变而来，名称上有很明显的时代特征。

在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。以前会Photoshop和Dreamweaver就可以制作网页，随着网站开发难度加大、开发方式多样。

网页制作更接近传统的网站后台开发，网页制作更多被称为Web前端开发。前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计，艺术性较强的视觉设计等。

掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。

二、web前端好学吗

第一前端开发难学吗？？总在难易上徘徊，容易内心纠结。

如果学什么课程之前，首先考虑的难不难学，这会形成一个不好的心理暗示，因为我们很多人的内心都是喜欢去学习简单的容易的东西，而不喜欢学习复杂难的东西，我们的立足点不在是把这个专业学透彻学专业，总是在简单的道路上徘徊，也就意味着我们只能掌握一个皮毛的知识，任何学科专业，学起来都不容易，都需要你们付出心血认真研究，总想不付出努力，随便一学就一步登天的思想，是电视剧看多了吧，就像武侠电视剧里拿到一本武功秘籍，看一两天，咔咔的就学会了，从此天下无敌，然后开始拯救世界了，不好意思，武侠的世界可以这样，现实的世界不是这样的，只能踏踏实实的去努力，逢山开路，遇水架桥。什么难不难的，为了掌握这门技术，去努力就对了，这才是正确的学习态度。

如果学什么课程之前，首先考虑的难不难学，这会形成一个不好的心理暗示，因为我们很多人的内心都是喜欢去学习简单的容易的东西，而不喜欢学习复杂难的东西，我们的立足点不在是把这个专业学透彻学专业，总是在简单的道路上徘徊，也就意味着我们只能掌握一个皮毛的知识，任何学科专业，学起来都不容易，都需要你们付出心血认真研究，总想不付出努力，随便一学就一步登天的思想，是电视剧看多了吧，就像武侠电视剧里拿到一本武功秘籍，看一两天，咔咔的就学会了，从此天下无敌，然后开始拯救世界了，不好意思，武侠的世界可以这样，现实的世界不是这样的，只能踏踏实实的去努力，逢山开路，遇水架桥。什么难不难的，为了掌握这门技术，去努力就对了，这才是正确的学习态度。

关于前端学习，我一直不主张完全自学，当然自学的精神可嘉，但是自学的时间成本，精力成本太高了，明明可以跟高手学10分钟就能解决的问题，很多人自己得折腾两三天，即便这个时候问题解决了，自己也被折腾的精疲力尽了，更何况后边还有很多的问题需要去解决，学习的过程就是一个跋山涉水，穿山越岭的过程，自学好比自己一个人走着去学习，，而且这条路你从来没走过，很容易迷路，而高手对这条路已经走了很多遍了，知道哪里有陷阱，哪里有小路可以直达，怎么灭掉路上的那些妖魔鬼怪各种拦路虎。

有些伙伴说，你说的道理确实对，但是我们去哪里找前端高手，人家为什么要带我们呢？我们也是两眼一抹黑，被迫无奈才自学的嘛，有高手带着，谁愿意一个人苦兮兮的自学呢，为了解决大家这个问题，大家可以跟我师傅学习一下，他每天晚上都在网上有免费直播课，讲的通俗易懂很有条理，也很透彻明白，听了不会让人迷迷糊糊的，而是感觉明明白白的。想听他的网上课程的同学，可以进入他的前端教程资料裙：首先位于开头的一组是：655，其次处于中间地带的一组数字是：567，最后位于尾部的一组数字是：613，把以上三组数字按照先后顺序组合起来即可。学习比拼的不仅仅是努力，还有智慧，还有谋略，学习就像是一场战斗，讲究一个输赢的，你学成了，你就赢了，你最后学的一瓶子不满，半瓶子晃悠，那你就输了。

说起前端，第一个接触到的就是我们现在每天都可以接触到的网页，而网页的构成又分为三种知识的结合

H5给予前端的感觉就像是一个框架一样，如同建房子，而H5的作用就是将框架给架构出来。而H5其实是通过H4发展过来的，但是由于两者相差太大了，所以并没有用过H4来进行过渡学习。在学习H5的时候，刚开始就遇到了困难，因为各种各样的标签，各种各样的元素，学的我是有点儿晕头转向，不过好在，慢慢的自己也就有了那么一点点了解，基本上，H5中的元素分为行级元素以及块级元素，行级元素都在同一行，除非用到<br>标签，或者通过样式将其变为块级元素，而块级元素则独占一行，然后就是各种标签的使用了，基本上也可以分为几类，1.文本类，2.多媒体类，3.表格类，4.最为重要的表单类标签，标签的使用需要看情况选择，只有经过不断的练习才能逐步了解。而我自己对于标签的使用也仅限于入门阶段，所以也就不班门弄斧了，我这里所谈只是我自己的学习过程。

css的中文解释为层叠样式表单，所以它的主要作用就是装饰，由于开始的时候已经接触到了HTML5，所以CSS的作用就是在框架上面进行装修，而这里面就涉及到了，如何去使用CSS，刚开始学习的时候其实我们可能都接触到了，在HTML的代码中，我们也可以对各种各样的标签进行样式的控制，为什么我们还要通过css来进行控制呢？首先，在HTML中对样式进行控制会影响代码的整洁度。其次，在不断的开发过程中，你会发现，其实有很多样式你以前经常使用和编写，那么通过我们学习过Java所以，首先想到的一定是封装，那么既然有了封装的想法，那就有了CSS的出现，CSS的使用有三种形式，一，外部引用，即所有的CSS样式都存在CSS文件夹中，通过link使用二，在HTML头部通过Style标签进行编写使用，三，也就是我们最不提倡的内嵌，即在标签中进行样式编写，但是这样的使用在canvor(画布标签)极为常见，讲到样式就不得不提到最为重要的选择器，选择器的使用可以通过1..+类名来使用，2.#+id进行选择，3.直接通过标签名进行选择，4.可以通过其父容器再对其进行选择，当然在我的学习中最为常见的是通过类名和id进行选择，其次是直接对标签名进行选择，不过这些选择器中，还有一个使用很多的，那就是组合选择器，因为有时两个标签具有相同的样式，所以这时就会产生两个组合选择器。说完了选择器，就要讲到css中的属性了，比如宽width，高height，颜色color都是属性，每个标签都可以设置属性。

属性学习完就是定位和浮动了以及动画，这些都是让样式更加美化的内容，所以如果需要页面更加美化，那么就要将这部分内容学好，但是很惭愧的是我自己这部分属于没有学好的。

JS的作用基本上就是完成前后端的交互，JS的学习过程相对于H5以及CSS3就好了一点点，因为它是可编程性语言，所以对于有过编程语言学习的同学，理解起来还是相对来说容易一点，由于它是弱类型语言，所以对于类型的定义只有Number，String，Boolean，Object，等，而不像java中光是数字类型就有四类八种，而且它不需要编译即可运行，所以它很方便，也很轻量，而且对于变量的定义没有java中的必需声明引用，在JS中一切变量只需要一个Var就可以解决，但是在JS中也有Java中不存在的，比如匿名函数，相当于Java中的方法，即此方法没有方法名，而且可以用变量进行表示，即 var i= function(){};所以对于JS的学习还没有结束。而且还有最为重要DOM和BOM没有学习到。学习还在不断进行，而我也将一往无前。

三、Flutter入门这一篇效率文章就够了

1、本文面向 Flutter初学者，旨在用易懂的方式带大家入门。除了 Flutter代码，还会介绍到语法、原理、特性等基础知识。相信本文能帮助你学习和理解 Flutter。

2、我们先看一下目前的一些跨平台方案，从前端渲染的角度来分类的话，大致可以分为以下几种方案。

3、这种方案就很好理解，现在很多项目都会嵌入 H5的页面。就是用 JavaScript等前端技术进行开发，在客户端上用 WebView来进行渲染。微信小程序目前使用的就是这种方案。

4、它的优点很明显，使用成熟的前端技术进行开发，学习成本低，开发效率高，并且支持动态发布代码。

5、但缺点也很明显，在性能体验上，和原生还是存在较大差距的。

6、既然 WebView的性能不够好，于是就有了使用原生控件进行渲染的方案。这种方案，同样也是使用 JavaScript开发，区别是它最终是调用原生控件进行渲染的。这种方案的代表是 Facebook的 React Native。

7、由于使用原生控件进行渲染，性能体验也会更接近原生。但也只是更接近，和原生还是有差距的，因为它需要频繁的进行 JavaScript和原生之间的通信，这个通信效率是比较低的。

8、另外，由于需要适配各个平台的控件，那就有可能出现，系统控件更新了，而框架本身还没有更新，由此产生了一些问题。换句话说，这种方案是受到原生控件限制的。

9、在前端，如果完全不使用原生控件，我们可以通过系统的绘图 API绘制出一个用户界面。从这个角度出发，可以在各个平台使用一个统一接口的绘图引擎来进行界面绘制，这个引擎最终调用的是系统的 API绘制的。这样的话，它的性能可以做到接近原生，并且又不受原生控件的限制，在不同平台上能够做到 UI统一。

10、 Flutter就是这样的一个开发框架。

11、 Flutter是由 Google开发的，一个跨平台 UI解决方案。换句话说，它原则上只管 UI的问题，如果涉及到平台本身的一些功能，比如调用蓝牙、摄像头，一般还是需要原生代码去操作。但现在也会有一些第三方库帮我们解决这些问题。

12、 Flutter使用 Skia作为它的绘图引擎。Skia已经被 Google收购，目前很多 Google旗下的产品都是用 Skia绘制的，包括 Android。

13、 Android内置了 Skia，但 iOS没有，所以在打 iOS安装包的时候，会把 Skia一起打进去。这就导致了，用同一份 Flutter代码打包之后，iOS的包要比 Android的包大一些。

14、 Flutter使用的开发语言，叫 Dart。Dart也是 Google自家的，它是一门面向对象的语言，从它身上会看到一些其他开发语言的影子。学习起来难度不大的。

15、前面讲跨平台方案的时候，可以发现别的方案基本都是用 JavaScript作为开发语言的，但为什么 Flutter不用？就因为 Dart是谷歌自家的吗？这个问题先留着，我们后面会提到。

16、这里部分就简单点带过了，具体的搭建流程可以在官网查看:

17、

18、

19、由于在国内访问可能受限，官方为中国开发者搭建了镜像：

20、

21、解压后，将 flutter\bin的全路径添加到环境变量 PATH中。

22、理论上，任何文本编辑器都可以用来开发 Flutter应用，但推荐的开发工具是 Android Studio、IntelliJ以及 VS Code。因为在这些开发工具上，可以安装官方的 Flutter和 Dart插件，得到更好的开发体验。文章里使用 Android Studio来演示。

23、如果你打算开发 iOS应用，则还需要安装 Xcode。

24、在开发工具的插件设置中，安装上面说到的 Flutter和 Dart插件。Flutter插件用于支持 Flutter的运行、调试、热重载等功能，而 Dart插件则提供了代码的输入校验、代码补全等功能。

25、万物始于 Hello World，我们先来创建一个显示 Hello World的 Flutter项目。

26、在 Android Studio的欢迎页面选择 Start a new Flutter project，或者通过菜单栏的 File> New> New Flutter Project，创建一个新的 Flutter项目。

27、创建好的项目里面包含了 android和 ios两个文件夹，它们是标准的 Android和 iOS项目。我们的 Flutter代码，存放在 lib文件夹里。项目创建好后，会默认带一个计数器的示例，我们不管它，把 main.dart的代码改成 Hello World:

28、启动一个模拟器，或者连上真机，点击 Run运行一下，就能看这样一个界面了：

29、具体代码先混个眼熟就好，具体的后面会再讲到。

30、在写 Flutter之前，还要先跟大家简单介绍一下 Dart的语法。如果你有 Java或 JavaScript的开发经验，以及面向对象的编程思想，学起来是很快的。

31、我们可以在 test文件夹下新建一个 dart文件，用来写测试代码。

32、但和 JavaScript不同的是，以下代码在 JavaScript是不会报错的，但在 Dart里会报错：

33、如果非要上面这样写，那也可以。把 var换成 Object就不报错了：

34、和 Java类似，Object是所有对象的根基类。但是这样的话，如果想打印一下 num的字符串长度，是会报错的：

35、因为 length是属于 String的，但系统只知道 num是一个对象，并不知道它是一个 String。

36、如果还是非要这样写，那也可以。Dart有一个特有的关键字 dynamic，把 Object改成 dynamic就不报错了：

37、我们运行一下这个文件，可以在控制台看到正确打印出了字符串长度。

38、在 Dart里，函数也是可以不写返回类型的，不写的话会被当做 dynamic来处理。这样的话，函数的类型就是 return的类型，如果没有 return则是 void类型。比如可以这样:

39、运行之后是能正确打印出字符串长度的。

40、 Dart里的函数也是一个对象，所以可以把函数作为参数来传递，比如：

41、在 Dart的函数传参里，有一个叫可选参数的概念，我们以文字控件 Text为例，在源码里可以看到 Text的构造函数是这样的:

42、首先，在参数里有一个 data，它是要显示的文字内容，是一个必填项。而 data后面的一堆参数，是用一个大括号括起来的，这些参数就叫做可选参数，意思是这些参数可传可不传。

43、假如我们要显示一个比较长的文字，又想限制它最多显示两行，就可以这样来创建一个 Text:

44、可选参数，在 Flutter里面用的非常多。

45、在 Dart里使用 Future来处理异步任务，比如我们现在延时一秒打印 666，代码如下：

46、 Future的语法和 Promise非常像。任务执行成功会调用 then，执行失败会调用 catchError，而无论成功还是失败，都会调用 whenComplete。

47、如果你不喜欢上面那种写法，或者是想把异步转成同步，就可以用 async和 await这两个关键字来转换。

48、我们把上面的代码转换一下，写一个 getString方法，返回的类型是 Future，它会延时返回一个字符串。在 main函数后面加上 async关键字，在 getString()前面加上 await，代码如下:

49、运行之后可以看到，能正常延时一秒后，把字符串打印出来。这里 getString()返回的类型是 Future，而 await getString()则是返回了延时之后返回的字符串。await要在 async的函数里面才能使用。

50、 async和 await其实是一个语法糖，它最终也是转换成 Future调用链的形式执行的。

51、接下来回到 Flutter，Flutter里最重要的一个概念是 Widget（下面翻译作控件）。

52、在原生开发里面，我们可能会在界面上区分，这是一个 View，这是一个 Layout，这是一个 View Controller。但在 Flutter里面，它们全都属于一个统一的模型 Widget。可以说，在 Flutter界面里，所有东西都是 Widget。

53、以前学面向对象的时候，我们都听过一句话，叫万物皆对象。我这里套用一下，在 Flutter里，万物皆控件。

54、具体有哪些控件，我做了一下简单的分类。

55、所有的控件都属于 StatefulWidget或 StatelessWidget。它们的区别是，StatefulWidget拥有状态 State，而 StatelessWidget没有。

56、当一个控件是可变的时候，就要使用 StatefulWidget来构建。StatefulWidget本身不可变，但它持有的状态 State是可变的。

57、当一个控件状态是固定不可变的时候，就可以使用 StatelessWidget。前面我们写的 Hello World就是使用 StatelessWidget。

58、容器类控件一般是将某些属性或配置，作用在它的子控件上，比如控件所在的宽高、背景、位置等。

59、常用的容器控件有 Container、Center、Padding等。

60、布局控件可以类比作原生开发中的 Layout，通常它会拥有一个 children的属性，用于接收一个控件数组，对这些控件进行特定的排版。

61、常用的布局控件有 Row、Column、Stack、Flex等。

62、基础控件就是常用的文字、按钮、图片等控件。

63、常用的基础控件有 Text、TextField、Button、Image等。

64、在 Flutter里还有一类控件，它们不影响 UI布局，但带有一些特定的功能，比如页面跳转、事件监听、定义主题等。我们把这一类控件称作功能控件。

65、常用的功能控件有 Navigator、NotificationListener、Theme等。

66、开始写 Flutter代码了。还记不记得，在 Flutter项目创建之后，是自带一个计数器 demo的，现在我们用自己的代码实现一遍。代码修改成如下：

67、运行之后，就可以看到这样的界面了：

68、按钮每点击一次，数字就会加一。下面我们来分析一下这段代码，看下里面用到的一些 Widget。

69、由于页面中的数字是跟随状态变化的，所以该页面改用 StatefulWidget。StatefulWidget并不会直接返回一个 Widget，而是返回状态 State，在 State里再返回 Widget。

70、 Scaffold是一个标准的 Material Design页面，它包含了标题栏、浮动按钮、侧滑菜单、底部导航栏等配置。我们这里用到了标题栏 appBar、页面内容 body、浮动按钮 floatingActionButton。

71、 AppBar就是标题栏，通过查看控件的构造方法，我们可以知道它可配置的属性。

72、 AppBar的可选参数除了标题 title，还可以配置标题前的内容 leading，右侧的操作按钮 anctions，控件垂直高度 elevation等。我们只传了 title，其他属性都用默认值。

73、 Center是一个容器类控件，它的作用就是让它的子控件居中显示。

74、熟悉安卓开发的应该对这个控件比较熟悉，它就是页面右下角一个特定样式的 Button，参数里面的 onPressed是一个必填项，要传一个点击之后的回调函数。

75、根据这个例子，下面给大家介绍一下 Flutter两个比较重要的特性。

76、点击 Button之后，我们把 num变量加一，并使用 setState通知状态发生了改变，Flutter会根据新的状态更新 UI。如果有接触过小程序开发，setState就和小程序的 setData类似。

77、在 Flutter里面我们不需要用 set方法来更新 UI，可变控件是和状态绑定的，这就是 Flutter的响应式 UI编程。

78、在 Android Q和 iOS 13里都加入了暗黑模式，我们也换一个暗黑主题来玩一下。MaterialApp里有一个 theme的属性，我们把它配置一下:

79、这次改完之后不点 Run了，我们点一下闪电图标 Flutter Hot Reload，就能看到界面发生了变化:

80、这就是 Flutter的热重载，在修改完代码之后，通过热重载就能马上在设备上看到修改结果，可以很大程度上增加开发效率。

81、下面再给大家介绍几个 Flutter里的常见操作。

82、在 Flutter里，使用 Navigator来管理页面跳转，比如要跳转到一个 NewPage可以这样写:

83、使用 MaterialPageRoute会模拟出 Android上页面跳转的过场效果。

84、我们来看看怎么显示一张本地图片。

85、先在根目录新建一个存放图片的文件夹，比如叫 images，把图片 picture.png放进去。

86、找到根目录下的 pubspec.yaml文件，这个便是 Flutter依赖配置文件，我们需要在这里配置一下刚才的图片：

87、这样，我们就能使用 Image控件把这张图片显示出来了：

88、和 node的 npm以及 Android的 jcenter类似，Flutter也拥有一个公共仓库 pub.dev。pub.dev是 Google官方的 Dart仓库，在上面可以找到我们需要的包和插件。

89、 Flutter本身没有 Toast，我们来接入一个。在 pub.dev上搜索后，我决定使用 fluttertoast：

90、按照说明，在 pubspec.yaml文件里的 dependencies下配置：

91、点一下 Android Studio右上角的 Packages get同步之后就可以使用了：

92、我们上面使用的都是 Material Design的控件，它们都是在 flutter/material.dart包里面的。如果要使用 iOS风格的控件，则要用到 flutter/cupertino.dart包：

93、 iOS风格的控件，基本都以 Cupertino开头。我们把计时器页面里的控件替换一下：

94、代码的部分就到这里了，接下来跟大家聊一下编译方式，编程语言的编译方式有两种。

95、关于它们孰优孰劣，就要看从哪个角度去对比了。JIT的话，它的一大特点就是支持动态发布代码，也就是支持热更新。但要是从性能的角度考虑，AOT会更好，因为在运行的时候不用再进行编译的操作的，运行的效率会更高一些。

96、回到我们一开始的时候留下的问题，为什么别的跨平台方案都是用 JavaScript，而 Flutter要用 Dart来开发。JavaScript的编译方式是 JIT的，它不支持 AOT。而 Dart同时支持 JIT和 AOT。

97、 Flutter在开发阶段使用 JIT，让我们用上了热重载，增加了开发效率。在打包时改用 AOT，保证了正式版应用的性能。

98、最后讲一下大家比较关心的一个东西，Flutter是否支持热更新？前面说到 Dart支持 JIT，所以从技术层面它是支持的。但是目前是不支持的，在官方的计划文档中，可以看到:

99、至于原因，官方在这里进行了说明。总的来说，是由于政策的限制，以及出于对性能和安全性的考虑，暂时不支持了。

100、到这就结束啦。由于想把 Flutter基础在一篇内讲完，没有涉及太多细节，如果要写 Flutter代码还需要深入学习。但相信理解之后再学，会轻松很多。