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

flutter打包ios 蒲公英 flutter dapp_控件

 

vs code (我的编辑器)

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

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

重新启动 VS Code

Android Studio Flutter插件 , Dart插件

 

创建一个新flutter应用

flutter打包ios 蒲公英 flutter dapp_flutter_02

在终端 输入 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序列化