Flutter(一)初识

1870221-711574b081043c7e.png

Flutter 出生便先声夺人

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

  • 快速开发
    毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
  • 富有表现力和灵活的UI
    快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。
  • 原生性能
    Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。

碎碎念

开发过原生的,才知道Flutter的方便,速度提升了不止一个档次,灵活的布局思想让人眼前一亮,一切皆Widget的Flutter和一切皆对象的Dart,这两者巧妙的搭配,让它走入了时代的最前沿。

大前端是未来的一个趋势,每个人都不敢保证未来是什么?但是我们只有掌握好未来的趋势,才会更好的应对未来的变化。ReatNatie,小程序,等等都是我们需要了解的方面,纯单端的时代已经在末尾了,这是世界正在迎接多彩的融合。

没事走两步

STEP 1、

首先是环境的搭建,这里大家可以移步到Flutter中文网。很详细,我在这里就不赘述了,很简单,一步一步来,基本不会有坑。

STEP 2、

欢迎大家回来,相信你已经把环境配置好了吧,我这里用的是AndroidStudio,当然可以用别的IDE,看大家哪一个更擅长了。


1870221-7adb602479d9df50.png

重要的文件有两个lib和pubspec.yaml.
在lib文件夹里放代码,在pubspec.yaml配置库的引用,图片地址等等一系列的东西。当然我们也要自己新建一个images文件夹来放置我们的图片。

1870221-b52bb8ac0af5321c.png

1870221-f053d20440f64918.png
image.png

然后在pubspec.yaml这样配置,就可以调用图片资源了,有点麻烦,可能后续会实现自动化吧。这是和我们平时其他开发的不同之处。

我们如果想要引用外部包,也可以在pubspec.yaml中这样配置。

1870221-b1dd000ce4b9692b.png

当然大家现在是不需要配置这些东西的,只是提前说明一下。点击运行,看到默认的界面,Flutter的大门正在向你我们打开,不过现在还差得远。

我希望可以通过一个项目的实战,通过实际问题来学习Flutter,这样或许会有不一样的理解吧。这是一个项目的开端,一个探索,没有架构,只有功能的实现,然后再回头重构,再理解。现学现卖,新鲜美味。