Flutter入门基础笔记

一、Flutter环境搭建

因我个人原来是iOSer，所以在开发过程中个人是喜欢 AndroidStudio + XCode 创建及开发flutter项目，不太用flutter命令；详细环境搭建可参见：Flutter中文网环境搭建，另Mac同学搭建遇到坑可参见:Mac环境搭建可能遇到的坑。

二、Dart基础知识

2.1、程序入口
void main() { runApp (Text("Hello World", textDirection: TextDirection.ltr)); }
如上端代码，与iOS开发相同都是 mian 函数为入口函数.
2.2、控制台输出
日志输出函数:
print("hello world")
dart快速即时编写工具 DartPad ，类似swift里的playground
2.3、变量
Dart 是类型安全 - 使用静态类型检查和运行时的组合，检查时确保变量的值始终与变量的静态值匹配类型。另某些类型注释时可选的，dart执行是会做类型推断；Dart类型
注：数字在Dart中也被当成对象，所以只要是带有数字类型未被初始化的变量值都是null ，未初始换的变量初始值为null
null-aware 运算符帮助做null检查
bool isExist(a,b){ bool outConn = outArr[a] ?. contains(b) ?? false} ;return outConn;
?.运算符左边为null时会阻断右边算式的调用，??运算符是当左边表达式为null时为其设置默认值
如：outArr[a] ?. contains(b) 两侧表达式任意一个为null 导致结果都为null
bool outConn = null ?? false 返回结果为false
bool outConn = false ?? true 返回结果为false
2.4、函数
返回类型函数名 (类型参数) { return 返回值;}
其中当返回类型为void则无需return
2.5、异步编程
在Dart中使用Future来表示异步操作，在函数中 async 结合 await 运算符用于等待Future

_getIP async{
final url="https://www.baidu.com";
var request=await HttpsRequest.request(url);
print(json.decode(request.responseText)['origin']);
}

2.6、声明式语法
在Flutter中，采用的声明式编程，而我们之前的Android或iOS 都属于命令式编程。
命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它会按照你的命令实现。

UIView *view = [[UIView alloc] init];
view.frame = self.view.bounds;
view.backgroundColor = [UIColor orangeColor];
我们要告诉“机器”: view的布局是 self.view.bounds view的背景色是 orangeColor
如果需要改变视图,你通常需要使用选择器找到对应实例或拥有者去改变视图属性

声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

return View(
color: red,
child: View2(...),
)
在声明式风格中，视图配置（如 Flutter 的 Widget ）是不可变的，它只是轻量的“蓝图”。要改变 UI，widget 会在自身上触发重建（在 Flutter 中最常见的方法是在 StatefulWidgets 组件上调用 setState()）并构造一个新的 Widget 子树。

三、Flutter入门基础知识

3.1、创建并运行Flutter项目
个人推荐使用AndroidStudio 创建Flutter，方便快捷且有图形化界面易操作；还能熟悉一个开发工具何乐而不为呢！
打开AndroidStudio

1.png

2.png

3.png

Android Studio 教程可参考：AS教程

3.2、认识widget并使用widget嵌套成树
Widget到底什么东⻄呢？
我们学习Flutter，从⼀开始就可以有⼀个基本的认识：Flutter中万物皆Widget；
在我们iOS或者Android开发中，我们的界⾯有很多种类的划分：应⽤（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
但是在Flutter中，这些东⻄都是不同的Widget；
也就是我们整个应⽤程序中所看到的内容⼏乎都是Widget，甚⾄是内边距的设置，我们也需要使⽤⼀个叫Paddingt 的Widget来做；
runApp函数让我们传⼊的就是⼀个Widget：
我们可以导⼊Flutter默认已经给我们提供的Material库，来使⽤其中的很多内置Widget；
import 'package:flutter/material.dart';
material是Google公司推⾏的⼀套设计⻛格，或者叫设计语⾔、设计规范等；cupertino是iOS样式的widget;
widget嵌套，如下代码中：myApp继承statelessWidget，在myApp内又新建一个widget

void main => return(myApp());
class myApp extends statelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar{
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
), ],),);}}

3.3、创建重用widget
首先要学会创建自己的widget
在Flutter开发中，我们可以继承⾃StatelessWidget或者StatefulWidget创建⾃⼰的Widget类；
StatelessWidget：没有状态改变的Widget，通常这种Widget仅仅是做⼀些展示⼯作⽽已；
StatefulWidget：需要保存状态，并且可能出现状态改变的Widget；
我们先学习创建statelesswidget

class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return <返回我们的Widget要渲染的Widget，⽐如⼀个Text Widget>;
}}

build⽅法的解析：
Flutter在拿到我们⾃⼰创建的StatelessWidget时，就会执⾏它的build⽅法；
我们需要在build⽅法中告诉Flutter，我们的Widget希望渲染什么元素，⽐如⼀个Text Widget；
StatelessWidget没办法主动去执⾏build⽅法，当我们使⽤的数据发⽣改变时，build⽅法会被重
新执⾏；
build⽅法什么情况下被执⾏呢？：
1、当我们的StatelessWidget第⼀次被插⼊到Widget树中时（也就是第⼀次被创建时）；
2、当我们的⽗Widget（parent widget）发⽣改变时，⼦Widget会被重新构建；
具体的例子这里就不写了。
创建好自己的widget后，就可以在父widget中调用自定义的widget小部件了

四、参考

4.1、dart官方语言文档见：DartLanguage
4.2、Flutter超全开源框架项目和学习资料汇总