Flutter 初尝试：入门教程

2019-06-02 本文已影响92人 ImWiki

通过 Flutter 安装教程成功在 Android Studio 安装了 Flutter。那我们就尝试使用 Android Studio 进行一些简单的尝试。

使用 Android Studio 创建Flutter项目

由于 Android Studio 一直都是Google在开发维护，所以理所当然对自家的Flutter支持是也是非常的好。
通过Android Studio安装Flutter插件，那么就可以非常方便创建Flutter应用

根据提示，即可完成创建Flutter项目，非常的简单。

目录结构分析

从初始项目的目录结构可以看到，项目有android和ios目录，这两个目录就是一个标准的Android项目和iOS项目，可以说是Flutter的宿主APP。lib目录可以看到有一个main.dart文件，这个就是flutter代码所在的目录，使用dart语言编写，dart语言也是Google开发的。再往下面有pubspes.yaml，这个文件是用来添加flutter的依赖，假设我们要引入一个库，就是需要修改这里。

简单尝试

我们把main.dart的代码删除，重现编写。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

运行项目

如果是有下载Xcode的，可以使用iOS虚拟机运行，通过命令行即可启动虚拟机

open -a Simulator

如果是Android就需要借助AVD Manager创建一个虚拟机，并运行起来即可，Android Studio/IntelliJ IDEA 的Flutter插件也可以非常方便使用，点击运行按钮，就可以运行在虚拟机上，中间输出“Hello World”。

从Android和iOS的运行可以看到，其实官方的控件在两者实现还是有一定的差别，比如iOS的标题是居中的，Android是靠左边的，而且状态栏是沉浸模式的。

布局方式

Row，是水平方向的线性布局（linear layout）
Column，是垂直方向的线性布局（linear layout）
Stack，可以理解成为相对布局。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Column(
            children: <Widget>[
              new Text('Text 1'),
              new Text('Text 2'),
              new Text('Text 3')
            ],),),),);}
}

事件

控件是有两种区分，StatelessWidget（无状态）、StatefulWidget（有状态），有状态才能进行交互，无状态就仅仅作为显示而已。

StatelessWidget：Icon、 IconButton,、Text等。
StatefulWidget：Checkbox、Radio、Slider、InkWell、Form、TextField等。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyHomePageState extends State<MyHomePage> {
  var clickCounter = 0;
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(onPressed: () {
          clickCounter++;
        //setState(() {
        //  clickCounter++;
        //});
      },
      child: new Text("Click Counter : $clickCounter"),
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyHomePageState();
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

分析上述的代码，做过Android 或者 iOS开发的开发者可能会想，为何不是点击事件的时候直接setText的呢，其实Flutter是基于Canvas实现，不同Android和iOS原始是绘制完毕就不再主动重新渲染，Flutter是每一帧都会重新渲染，所以只要更改了参数即可。

跳转页面（路由和导航）

更多信息参考 Navigator API，关键代码如下：

Navigator.push(context, MaterialPageRoute<void>(
            builder: (BuildContext context) {
              return Scaffold(
                appBar: AppBar(title: Text('第二个页面')),
                body: Center(
                  child: FlatButton(
                    child: Text('POP'),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              );
            },
          ));

完成代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute<void>(
            builder: (BuildContext context) {
              return Scaffold(
                appBar: AppBar(title: Text('第二个页面')),
                body: Center(
                  child: FlatButton(
                    child: Text('POP'),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              );
            },
          ));
        },
        child: new Text("跳转"),
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyHomePageState();
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

pubspes.yaml 添加依赖

flutter的依赖管理非常的方便，打开这个依赖管理的文件，找到dependencies这个结构，添加依赖非常简单，下面的shared_preferences: ^0.5.3就是添加依赖，后面的版本号可以不写，直接写shared_preferences:也是可以的。

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^0.5.3

https://pub.dev/ 这里可以搜索到很多有价值的库。

Material 组件

https://flutterchina.club/widgets/material/
Flutter提供了一整套非常强大的Material风格组件，可以帮助我们创建非常美观的UI。

Cupertino (iOS风格) 组件

Flutter框架包含了两套匹配特定设计语言的组件。称作Material Design的组件实现的是同名的谷歌设计语言，称作Cupertino的组件模仿了苹果iOS的设计。
https://flutterchina.club/widgets/cupertino/
https://api.flutter.dev/flutter/cupertino/cupertino-library.html