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序列化
原文地址：https://www.cnblogs.com/wanDPS/p/10929863.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。