Flutter环境配置&基本语法&如何使用库

1、flutter基本了解

笔记开始,先贴出几个学习flutter的官方链接:
flutter官网：链接
flutter中文网：链接
github网址:链接
Dart Packages:链接

1.1 React Native框架的优势

跨端方案的初衷是要解决多平台重复开发的问题，也就是说，使用跨端方案的话，多个平台的开发者可以使用相同的开发语言来开发适合不同系统的App。
React Native 使用 JavaScript 语言来开发，Flutter 使用的是 Dart 语言。这两门编程语言，对 iOS 开发者来说都有一定的再学习成本，而使用何种编程语言，其实决定了团队未来的技术栈。
JavaScript 的历史和流行程度都远超 Dart ，生态也更加完善，开发者也远多于 Dart 程序员。所以，从编程语言的角度来看，虽然 Dart 语言入门简单，但从长远考虑，还是选择React Native 会更好一些。
同时，从页面框架和自动化工具的角度来看，React Native也要领先于 Flutter。这，主要得益于 Web 技术这么多年的积累，其工具链非常完善。前端开发者能够很轻松地掌握 React Native，并进行移动端 App 的开发。
当然，方案选择如同擂台赛，第一回合的输赢无法决定最后的结果。
###1.2 Flutter框架的优势
除了编程语言、页面框架和自动化工具以外，React Native 的表现就处处不如 Flutter 了。总体来说，相比于React Native框架，Flutter的优势最主要体现在性能、开发效率和体验这两大方面。
Flutter的优势，首先在于其性能。我们先从最核心的虚拟机说起吧。
React Native 所使用的 JavaScriptCore，原本用在浏览器中，用于解释执行网页中的JavaScript代码。为了兼容 Web 标准留下的历史包袱，无法专门针对移动端进行性能优化。
Flutter 却不一样。它一开始就抛弃了历史包袱，使用全新的 Dart 语言编写，同时支持 AOT 和 JIT两种编译方式，而没有采用HTML/CSS/JavaScript 组合方式开发，在执行效率上明显高于 JavaScriptCore 。
***
除了编程语言的虚拟机，Flutter的优势还体现在UI框架的实现上。它重写了UI 框架，从 UI 控件到渲染，全部重新实现了，依赖 Skia 图形库和系统图形绘制相关的接口，保证了不同平台上能有相同的体验。
想要了解 Flutter 的布局和渲染，你可以看看这两个视频“The Mahogany Staircase - Flutter’s Layered Design”和“Flutter’s Rendering Pipeline”。
除了性能上的优势外，Flutter在开发效率和体验上也有很大的建树。
凭借热重载(Hot Reload)这种极速调试技术，极大地提升了开发效率，因此Flutter 吸引了大量开发者的眼球。
同时，Flutter因为重新实现了UI框架，可以不依赖 iOS 和 Android 平台的原生控件，所以无需专门去处理平台差异，在开发体验上实现了真正的统一。
此外，Flutter 的学习资源也非常丰富。Flutter的官方文档，分门别类整理得仅仅有条。YouTube 上有一个专门的频道，提供了许多讲座、演讲、教程资源。
或许，你还会说Flutter 包大小是个问题。Flutter的渲染引擎是自研的，并没有用到系统的渲染，所以App包必然会大些。但是，我觉得从长远来看，App Store对包大小的限制只会越来越小，所以说这个问题一定不会成为卡点。

以上内容摘自戴铭iOS小专栏…

2 Flutter的环境配置

2.1 配置环境变量

首先flutter需要添加git依赖:

git clone -b stable https://github.com/flutter/flutter.git

在本地bash_profile文件中配置环境变量:

vim ~/.bash_profile

在bash_profile中加入以下环境变量:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=pwd/flutter/bin:$PATH

加入以后esc,:wq保存,记得关键一步,让bash_profile文件生效:

source ~/.bash_profile

然后输入:

flutter --help

回车以后会去下载Dart语言SDK:

Downloading Dart SDK from Flutter engine 2994f7e1e682039464cb25e31a78b86a3c59b695...% Total    % Received % Xferd  Average Speed   Time    Time     Time  CurrentDload  Upload   Total   Spent    Left  Speed
100  200M  100  200M    0     0  4581k      0  0:00:44  0:00:44 --:--:-- 3747k
Building flutter tool...
Manage your Flutter app development.
...

下载完成以后,会出现Welcome to Flutter弹窗:

2.2 出现的问题及解决

首先下载Android Studio以及JAVA SDK,进行安装,此处不再赘述.

以上步骤完成以后,输入:

flutter doctor

会下载一些配置,然后可能会出现一些问题,需要自己根据提示去解决这些问题:

问题1: 需要Android SDK 28 and the Android BuildTools 28.0.3

Flutter requires Android SDK 28 and the Android BuildTools 28.0.3To update using sdkmanager

点击设置,选择SDK Manager:

选择Android 9.0 28,点击Apply,没下载的会提示下载,自动安装:

同理SDK Tools:

问题2: 需要同意licenses,按照提示输入:

flutter doctor --android-licenses

然后按照提示输入y,回车,最终出现 All SDK package licenses accepted;表示已accept所有的licenses:

问题3: 需要下载Flutter plugin 和 Dart plugin:
点击设置,选择Plugins:
然后输入Flutter,点击install:

安装过程中会提示Flutter Plugin依赖Dart Plugin,跟着提示下载就行;或者下完以后在搜索框输入Dart Plugin,下载安装.
下载完成以后,在install中会显示已安装的Flutter和Dart:

再次输入flutter doctor,提示 No issues found!,表示环境已经配置成功:

2 创建一个Flutter工程

###2.1 使用Android Studio直接创建
配置好环境和安装好插件后,打开Android Studio,会出现创建flutter项目选项:

###2.1 使用终端直接创建
使用终端创建,先cd到指定目录下,然后输入:

flutter create flutter_testProject

ps:不知道为啥原因,我直接用Android studio直接创建的时候卡死了,所以直接终端创建的没问题;
终端创建的工程直接用Android studio打开main.dart文件就可以.

###2.3 模拟器运行
直接运行项目中的示例,点击右上角的运行按钮,选择不同的iOS和Android模拟器,直接可以展示出示例的样式:

运行之前,没有装Xcode的需要先安装Xcode,没有Android模拟器的需要下载Android模拟器并安装;

#####运行Android模拟器时碰到的问题,会卡在:

Launching lib/main.dart on Android SDK built for x86 in debug mode…
Running Gradle task ‘assembleDebug’…

解决方案:
找到项目列表中的build.grade文件, 网上说的是将换成阿里的镜像:链接

代码如下:

maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

示例项目运行如下:

3 flutter基本语法学习

3.1 基本数据类型与List数组,Map字典

//基本数据类型int a = 111;int aa = int.parse('111');//将字符串类型的转成intprint('int:'+a.toString());double b   = 222.222;double bb  = double.parse('3333.222');//将字符串转成double类型print('double:'+b.toString());bool isOK = 10 >11 ?false:true;print('isOK:'+isOK.toString());//变量的声明，可以使用 var、Object 或 dynamic 关键字。//StringString  string  = 'Hellow world!';var     string1 = 'YYFast Hellow world!';dynamic string2 = 111.toString();      //int转化为StringObject  string3 = 111.222.toString();  //double转String//List 数组类型List list = [1,2,3,4];List newList = new List();  //创建一个空数组newList.add(2333);          //往数组中添加元素newList.addAll([22,33,44]); //往数组中添加一个数组newList.addAll(list);newList.remove(3);          //移除newList.insert(2, 33);      //插入print(newList);print(newList.length);print(newList.first);print(newList[3]);//Map 对象类型Map map = {'x':111,'y':222,'z':333};Map newMap = new Map();     //创建一个空MapnewMap['name'] = 'jack';newMap['age']  = 12;newMap['height'] = '188';newMap.remove('height');    //移除print(map);print(newMap);

打印结果:

3.2 Dart中的function

func也就是我们常说的函数,方法,执行语句等,以及dart中可选参数和参数默认值的设置方式:

void main(){funcTest();
}void funcTest(){String name = getUserName(222);  //定义一个通过参数int返回一个String的functionprint('my name is '+name);
}//可选参数: []中括号将参数包起来
String getUserName(int userId,[int age]){Map map= {111 :'Jack',222 :'Lucy',333 :'Tom'};return map[userId];
}//设定默认值: {}将参数包裹起来
void choice({int age1,int age2,int age3 = 0}){//参数age3没有传的时候使用默认值 0;//需要使用{}将参数包裹起来
}

3.3 Dart中的class对象,类继承extends和混合Midin

类对象: 使用class表示;注意构造函数的使用方法
类继承: 使用关键字 extends
混合: 使用关键字 with

void main(){ObjectTest();
}void ObjectTest(){//对象Person person1 = new Person(18, 'jack');print(person1.name);print(person1.age);print(person1.SayHello());//Worker 继承自 Person , 且比Person多一个属性heightWorker worker1 = new Worker(17, 'lucy',160);print(worker1.name);print(worker1.age);print(worker1.height);print(worker1.SayHello());//Student 混合了类Eat 和 Run类的方法,可以直接掉用这两个类的方法var student = new Student();student.eat();student.run();student.SayHello();//如果类,A类,B类都有一个同名方法sayHello,会调用类的sayHello方法//如果类没有,A类,B类有sayHello方法,后面的方法会覆盖前面的方法,也就是B类的sayHello方法会覆盖掉A类的方法,调用的时候会调用B类的sayHello方法;}class Person{int    age;String name;//构造函数Constructor: 函数名与class名一致.用于在初始化对象时直接传进参数然后初始化,在创建对象的时候可以直接调用;//类似于C++中的析构函数Person (int age,String name){this.age = age;this.name = name;}SayHello(){print('my name is '+this.name);}
}//继承使用的是extends
//点击这里的灯泡会帮助我们自动实现构造器
class Worker extends Person{int height;    //属于Worker的属性 heightWorker(int age, String name,int height) : super(age, name){this.height = height;}//重写父类的方法要加上@override标识告诉编译器@overrideSayHello(){super.SayHello();//可以先调用父类的方法print('my name is '+this.name);}
}//混合: 使用关键字with
class Eat{void eat(){print('eat');}void SayHello(){print('say hello in eat');}
}class Run {void run(){print('Run');}void SayHello(){print('say hello in run');}
}
class Student with Eat, Run{Student(){print('YYFast');}void SayHello(){print('say hello in Student');}
}

3.4 Dart库的使用

3.4.1 自己创建的库

Dart中库用package命名,例如创建一个计算的库:

先创建一个package
在创建一个.Dart文件,Dart文件如下:

int add (int a , int b){return a + b;
}class Calc{int a;int b;Calc(int a, int b){this.a = a;this.b = b;}minus(){print(this.a - this.b);}
}

然后在main.Dart文件中import:

import ‘pkg/Calc.dart’;

调用结果如下:

3.4.1 调用Dart Package网址上的库

Dart Packages:链接

比如随便添加一个支持http的库,点击install

找到工程中的 pubspec.yaml 文件,将http: ^0.12.0+4复制到dependencies下:

然后进行安装:

出现的问题:
如果你和我一样使用的是iTerms,使用终端可能会出现问题:

解决方式: 使用iTerms cd到pubspec.yaml 文件所在的路径下,再输入flutter pub:

3.4.1.2 库的使用

对应网站上的Readme:

注意点:

在import 后面跟上 as http ,相当于简写;
示例代码提示报错的话,修改两处地方: ()后加上async;
将地址改成百度的链接;如图所示:

以上只是入门学习flutter记的笔记,任重而道远.
只应实干争朝夕, 谢谢!