目录
- 从零开始写第一个Flutter app(一)——Hello World
- 从零开始写第一个Flutter app(二)——引用第三方包
- 从零开始写第一个Flutter app(三)——有状态的部件StatefulWidget
- 从零开始写第一个Flutter app(四)——无限滑动的ListView
- 从零开始写第一个Flutter app(五)——ListView添加图标
- 从零开始写第一个Flutter app(六)——添加点击事件交互
- 从零开始写第一个Flutter app(七)——弹出toast
- 从零开始写第一个Flutter app(八)——修改主题颜色
- 从零开始写第一个Flutter app(九)——route跳转新页面
- 从零开始写第一个Flutter app(十)——最终代码
说明
本节的主要内容是教大家如何在Flutter项目中引用第三方包,这里我们引用了一个叫做english_words的第三方包,这个包的主要功能是随机生成英文单词对,我们将用这个包生成的随机字符串显示在页面上,每次热加载都会显示不同的内容。
实现
首先需依赖english_words包,在项目根目录下找到pubspec.yaml配置文件,打开配置文件找到dependencies:配置项,添加english_worlds配置项,如下所示
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.0 # add this line
第一次引用还需点击页面顶部的Packages get按钮,吧包下载到本地
然后在lib/main.dart文件的顶部引用该包
import 'package:english_words/english_words.dart';
接下来就可以使用english_words包提供的功能了,用如下代码可以生成一个随机的单词对
final wordPair = WordPair.random();
将上一节课中lib/main.dart的代码替换成如下代码,新增或改动的内容看代码注释,最终代码如下
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; // 导入english_words包
void main() => runApp(MyApp());
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), // 将随机单词对转成首字母大写的驼峰格式显示在页面中间
),
),
);
}
}
运行结果
保存或者按hot reload按钮热重载,每次重载显示的内容都是随机的