flutter学习笔记（一）：搭建开发环境

发表于 更新于 分类于

Flutter

Flutter是Google推出的仅需一次开发，即可多平台发布原生App的UI套件集。（移动端、web端、桌面端）
Flutter具有以下特性：

  • 快速开发
  • 丰富灵活的UI
  • 原生

安装Flutter

  • 下载
    可以选择：

1.从官网下载安装包；
2.使用git命令下载
这里选择使用git命令下载，在E盘根目录，右键点击空白处在弹出的菜单中选择git bash here，输入命令：

1
$ git clone https://github.com/flutter/flutter.git

然后执行命令。

  • 添加环境变量
    将E:\flutter\bin;添加到Path变量中。
  • 执行环境检查
    打开cmd，输入flutter doctor并执行，flutter将会检查环境配置的情况，例如：
    1
    2
    3
    4
    5
    [-] Android toolchain - develop for Android devices
        • Android SDK at D:\Android\sdk
        ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
        • Try re-installing or updating your Android SDK,
          visit https://flutter.dev/setup/#android-setup for detailed instructions.
  • 下载Android SDK
  • 下载Android Studio，打开并添加插件Flutter
  • 准备测试设备，如添加一个虚拟机

运行Demo

选择新建Flutter项目，等自动生成了demo项目，启动虚拟机，再点击右上角的运行按钮。启动完可以看到如下画面：

修改代码后，无论是按Ctrl+S保存，还是按热重启（hot reload），flutter都会无缝快速重启app

写第一个APP

Flutter的开发语言是Dart，Dart这门语言吸收了现代语言的一些优质特性，所以熟悉面向对象开发的人能很快上手。这里不过多的对Dart语法进行说明，只是跟随官方文档书写第一个App。

本例将要实现一个随机生成名称的列表，并且列表将无限生成，效果图如下：

  • 新建Flutter项目
    项目名称建议为小写字母加下划线分割单词，例如flutter_demo

  • 删除多余的自动生成的代码
    项目新建完成IDE会自动生成一些代码，除了MyApp是主题框架，它下方的代码都是我们不需要的，所以手动删除，并修改代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
    	@Override
    	Widget  build(BuildContext context) {
    		return MaterialApp(
    			title: 'Welcome to Flutter',
    			home: Scaffold(
    				appBar: AppBar(
    					title: Text('Welcome to Flutter'),
    				),
    				body: Center(
    					child: Text('Hello World'),
    				),
    			),
    		);
    	}
    }

    运行（保存）可以看到如图效果：

  • 使用名称生成库
    随机名称的生成需要用到一个库english_words，打开pubsec.yaml文件，找到dependencies并在其下方添加english_words，如下：

    1
    2
    3
    4
    5
    dependencies:
    	flutter:
    		sdk: flutter
    	cupertino_icons: ^0.1.2
    	english_words: ^3.1.0

    保存并点击右上角的Packaget Get，然后将自动下载库，可以看到控制台输出：

    1
    2
    3
    $ flutter pub get
    Running "flutter pub get" in startup_namer...
    Process finished with exit code 0

    在main.dart中引入库：

    1
    2
    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';

修改上述代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyApp extends StatelessWidget {
	@Override
	Widget  build(BuildContext context) {
		final wordPair = WordPair.random();
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
				appBar: AppBar(
					title: Text('Welcome to Flutter'),
				),
				body: Center(
					child: Text(wordPair.asPascalCase),
				),
			),
		);
	}
}

重新运行可以看到随机生成的名称：

  • 添加Stateful Widget

    Stateless Widgets 是不可变的，它们的属性都不可变。
    Stateful Widgets 维持了可在控件生命周期内可变的状态。实现一个Stateful Widget需要至少两个类：1）StatefulWidget类； 2）State类。StatefulWidget类自身可变，但是State类维持整个控件的生命周期不变。

添加State类：

1
2
3
class RandomWordsState extends State<RandomWords> {
	
}

添加StatefulWidget类：

1
2
3
4
class RandomWords extends StatefulWidget {
	@Override
	RandomWordsState createState() => RandomWordsState();
}

然后给RandomWordsState补上build方法：

1
2
3
4
5
6
7
class RandomWordsState extends State<RandomWords> {
	@Override
	Widget build(BuildContext context) {
		final wordPair = WordPair.random();
		return Text(wordPair.asPascalCase);
	}
}

还要替换MyApp中的代码：

1
body:Center(child:RandomWords(),),

重新运行，看到的效果与上一张图相同。

  • 做一个无限滑动的列表
    在RandomWordsState中添加一个数组用于保存生成的名称，并添加一个大号的字体：
    1
    2
    3
    4
    class RandomWordsState extends State<RandomWords> {
    	final _suggestions = <WordPair>[];
    	final _biggerFont = const TextStyle(fontSize: 18.0);
    	...
    添加**_buildSuggestions**方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    Widget _buildSuggestions() {
    	return ListView.builder(
    		padding: const EdgeInsets.all(16.0),
    		itemBuilder: (context, i) {
    			if (i.isOdd) return Divider();
    			
    			final index = i ~/ 2;
    			if (index >= _suggestions.length) {
    				_suggestions.addAll(generateWordPairs().take(10));
    			}
    			return _buildRow(_suggestions[index]);
    		});
    }
    添加**_buildRow**方法：
    1
    2
    3
    4
    5
    6
    7
    8
    Widget _buildRow(WordPair pair) {
    	return ListTile(
    		title: Text(
    			pair.asPascalCase,
    			style: _biggerFont,
    		),
    	);
    }
    修改RandomWordsState的build方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    @Override
    Widget build(BuildContext context) {
    	return Scaffold(
    		appBar: AppBar(
    			title: Text('Startup Name Generator'),
    		),
    		body: _buildSuggestions(),
    	);
    }
    修改MyApp的build方法：
    1
    2
    3
    4
    5
    6
    @Override build(BuildContext context){
    	return MaterialApp(
    		title: 'Startup Name Generator',
    		home: RandomWords(),
    	);
    }

重新运行App，可以看到预期的效果：