Dart & Flutter environment to build
If you only install dart SDK to develop mobile applications, you do not need Dart SDK; just install Flutter.
Here it is installed directly Flutter (dart SDK has been integrated into the Flutter in) due to domestic access may be limited at times Flutter, Flutter official build a temporary image for the Chinese developers, we can be as an environment variable added to the user environment variables:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Download: https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
Configuration environment variable:
export PATH = `pwd` / flutter / bin: $ PATH (add path)
export PATH = / Users / mugong / Desktop / workspace / flutter / bin: $ PATH (This is my)
Install Xcode or Android Studio (I installed the Android Studio)
Run flutter doctor
vs code (my editor)
Call View> Command Palette ... enter 'install', then choose Extensions: Install Extension action
In the search box, enter flutter, select 'Flutter' in the search results list, and then click Install select 'OK'
Restart VS Code
Android Studio Flutter plug, Dart plug
Create a new application flutter
In the input terminal prints out hello world flutter run in initState function! So far flutter frame has been completed structures.
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序列化