记得flutter出来的时候,官方推荐的是使用IntelliJ IDEA,当时个人尝试了一下,比较麻烦,整个过程比较漫长。
进入2018年,再去看的时候,官方推荐使用Android Studio和VS code。我选择了使用Android Studio,整个过程相当惊喜,就是按钮那么一点,整个过程和配置就完成了,不过前提是你要先安装Dart和Flutter的插件。
下面对整个使用过程做一个简单的记录!
一、创建
创建完成后,整体的架子如下所示:蓝色框,即lib下的main.dart是整个程序的入口!
main.dart里的代码如下:
import 'package:flutter/material.dart';
void main() => runApp(new 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'),
),
),
);
}
}
对此做如下简单说明:
1、Material是一个对移动端和web端的标准的可视化语言。Flutter提供了丰富的Material widgets(容器)
2、这里通过继承StatelessWidget是的该app自己也变成了一个widget,在Flutter中,基本上每一个事物都是一个widget,包括alignment、padding和layout。
3、widget的主要工作是提供build()函数(方法),用来描述和表达其中的其他的widget的展示方式
二、使用外部package
这里使用的是外部包english_words,和其他开源包一样,可以在这里找到。
1、pubspec文件管理着Flutter app的资源。在pubspec.yaml文件中,添加english_words和版本号到依赖表中,如下:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
2、保存的时候,Android studio窗口上方会出现下图:3、在main.dart文件中的最上面引入,Android studio会有提示。当然,如果你在下面没有使用该package,这里在展示上会有些许不同。
4、对main.dart内容做一个修改,即对该库的使用,具体增加内容如下:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random(); // 新增
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'),
child: new Text(wordPair.asPascalCase), // 新增
),
),
);
}
}
5、保存后点击Android studio的右上角的闪电⚡️按钮,做刷新,你会发现每次点击,都会得到不一样的内容。