在Flutter中界面的代码通常是和逻辑代码在一块的，没有android中的xml布局文件，所以布局模型的难度相对大于控件模型，所以这里我们先来学习一下比较简单的按钮。

在《Flutter攻略》之环境搭建中介绍了如何使用IntelliJ 插件的插件来新建Flutter工程并运行。

我们新建一个工程后，插件已经给我们写了一个简单的app运行如下：

点击右下方按钮后，中间的0会一直被+1，但这里我们先不管这是怎么实现的，我们今天要学习的是按钮。

在Flutter的官网的Widgets Overview中，我们可以看到有以下三个按钮：

• Floating action buttton
• Raised button
• Flat button

其中第一个Floating action button就是上图中右下角有个加号的按钮。它的形状默认是圆形。切他有固定的用法如下：

floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
 )

我们先看👆的构造方法，其中onPressed是按钮点击事件，类型为：

/// Signature of callbacks that have no arguments and return no data.
typedef void VoidCallback();

就是一个没有参数切没有返回值的方法。具体参考dart语法。

tooltip一个提示字符串，在长按按钮时弹出：

参数child的类型是Widget,是一个需要被显示在FloatingActionButton中间的一个控件，这里使用的是Icon，那既然类型是Widget，那我们试试除了Icon，是不是其他的也行，这里用Text来试试。

 floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Text('Hello'),
  ),

👌可行。

下面来说说第二个按钮Raised button,官方的解释是：

A typically rectangular material button that lifts and displays ink reactions on press. The RaisedButton widget implements this component.

其实就是一个有抬起效果和按压有墨水效果的按钮，我们看下具体是什么样子的：

代码如下：

 body: new Center(
        child: new RaisedButton(onPressed: (){},
           color: Colors.blue[400],
           child: new Text('RaisedButton',style: new TextStyle(color: Colors.white))),
  ),

而第三种Flat button没有RaisedButton的抬起效果，其他一致。

总结

这里只是介绍了三种按钮以及简单写法，没有深究其点击事件和布局等功能的用法。

整个文件内容如下：

import 'package:flutter/material.dart';
import 'dart:isolate';
import 'dart:async';
void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see
        // the application has a blue toolbar. Then, without quitting
        // the app, try changing the primarySwatch below to Colors.green
        // and press "r" in the console where you ran "flutter run".
        // We call this a "hot reload". Notice that the counter didn't
        // reset back to zero -- the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful,
  // meaning that it has a State object (defined below) that contains
  // fields that affect how it looks.

  // This class is the configuration for the state. It holds the
  // values (in this case the title) provided by the parent (in this
  // case the App widget) and used by the build method of the State.
  // Fields in a Widget subclass are always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ReceivePort receivePort = new ReceivePort();
  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that
      // something has changed in this State, which causes it to rerun
      // the build method below so that the display can reflect the
      // updated values. If we changed _counter without calling
      // setState(), then the build method would not be called again,
      // and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance
    // as done by the _incrementCounter method above.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: new Text(config.title),
      ),
      body: new Center(
        child: new RaisedButton(onPressed: (){},
           color: Colors.blue[400],
           child: new Text('RaisedButton',style: new TextStyle(color: Colors.white))),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Text('Hello'),
      ), // This trailing comma tells the Dart formatter to use
      // a style that looks nicer for build methods.
    );
  }

  @override
  void initState() {
    receivePort.listen((data){
      print("from main : $data");
    });
    Isolate.spawn(foo,receivePort.sendPort);
  }


}

foo(message){
 foo1(1,message);
}

foo1(var i,var sendPort){
  Future f = new Future.delayed(new Duration(seconds: 2),(){
    i++;
    print("${i}");
    Isolate.current.ping(sendPort,response: "i = ${i}");
    foo1(i,sendPort);
  });
}