Flutter开发移动端APP的入门教程及简单介绍

Dart&Flutter环境搭建

安装 dart SDK 如果只开发移动应用，那么您不需要Dart SDK; 只需安装Flutter。

这里就直接安装 Flutter （dart SDK已经集成在Flutter中） 由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下载地址 ： https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

配置环境变量：

export PATH=`pwd`/flutter/bin:$PATH（添加路径）

export PATH=/Users/mugong/Desktop/workspace/flutter/bin:$PATH（这 是我的）

安装 Xcode 或者 Android Studio (我安装的Android Studio)

运行 flutter doctor

vs code (我的编辑器)

调用 View>Command Palette… 输入 ‘install’, 然后选择 Extensions: Install Extension action

在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install 选择 ‘OK’

重新启动 VS Code

Android Studio Flutter插件 , Dart插件

创建一个新flutter应用

在终端 输入 flutter run 在 initState函数中打印出hello world！至此flutter框架已经搭建完成。

Dart 语言 数据类型

dart语言提供所有现代语言提供的所有基本数据类型。

Numbers int 和 double

Strings

Booleans

Lists

Maps Map 是一个键值对相关的对象

int x = 100; double y = 1.1;

String s = 'This is a string';

bool isDoorOpen = false;

list list= [1,2,3,4];

map map= { 'key1': 'value1', 'key2': 'value2', 'key3': 'value3' };

目前Dart中int和double是num的子接口,所以声明变量类型时可以使用num来替代int或double.

flutter 布局思路

参考文档： https://flutterchina.club/tutorials/layout/#approach

常见布局widgets

1.多个子元素的布局 Row 、Column、Stack 等

2. 单个 子元素的布局Container 、 Padding 、Center 等

Row :控件来水平排列子控件.

Column: 控件垂直排列子控件.

Container : 给一个组件添加 padding, margins, 边界（borders）, 背景颜色或其它装饰（decorations）。

Stack : 在一个widget上面盖上另一个widget。

ListView : ListView能以列的形式展示数据。当内容超过渲染范围时，自动提供滚动的功能。

Center :在一个widget 中居中显示。
Padding：给子节点设置padding属性，设置内边距属性， (Flutter中并没有单独的Margin控件)。

Text: 显示“ 文本”单个样式的文本字符串小组件。

有状态组件（Stateful widget）与 无状态组件（StatelessWidget）

无状态组件（stateless widget），无状态组件不提供可变状态维护，无状态组件仅根据其属性来渲染， 无状态组建的写法：

class MyToolBar extends StatefulWidget{

MyToolBar({ this.title }); final Widget title）

Widget build(BuildContext context){

return new Container( child: new Row([ new IconButton(icon: 'navigation/menu'), ]) );

}

}

有状态组件（stateful Widget）,组件自己维护状态，组件渲染由SetState方法调用，更具state的变化差异来更新渲染。所有的stateful widget都是建立在stateless widget上的。

class Counter extends StatefulWidget {

_CounterState createState() => new _CounterState();

}

class _CounterState extends State<Counter> {

int _count = 0;

void _increment() {

setState(() { ++_count; });

}

Widget build(BuildContext context) {

return new Container(

child: new Center(

child: new RaisedButton(

onPressed: _increment,

child: new Text('click count : ${_count}'))));

}

}

Flutter的父子通信

父组件向子组件传值

父组件

String modelKey='';

new Container( child:Input({modelKey： modelKey}) }

子组件

Input({modelKey:this.modelKey})

Input extends StatelessWidget {

final modelKey;

Input ({modelKey:modelKey});

Widget build(BuildContext context) { }

}

子组建向父组建传值

父组件

void onDataChange(val) { setState(() { data = val; });

new ChildTwo(data4Two: data4Two, callback: (val) => onDataChange(val)),

子组件

class ChildTwo extends StatefulWidget {

ChildTwo({data4Two: this.data4Two,callback: this.callback})

final callback; String data4Two;

child: new Center( onPressed: callback('111111111'), child: new Text('to父组件') )

}

第三方库的下载

在 pubspec.yaml

dependencies:

flutter: sdk:

flutter

cupertino_icons: ^0.1.0

english_words: ^3.1.0

拉取声明的第三方库到本地工程 flutter packages get 注意 ：yaml配置文件对于缩进要求十分严格！！！！！！！

import 'package:flutter/material.dart';

import 'package:english_words/english_words.dart';

flutter 中从接口中取到的数据要进行反json序列化