【Flutter】编写第一个 Flutter 应用(官方示例完整代码版)
基础步骤
第一步: 创建 Flutter app
第二步: 打开 /lib/main.dart,删除main.dart的所有代码,然后替换为下面的代码
第三步: 安装依赖程序 english_words
第四步: 启动应用
//导入包。
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
//文档
// https://flutter.cn/docs/get-started/codelab
//应用入口。
void main() => runApp(MyApp());
//应用结构。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//应用名称
title: '名称生成器',
//白色主题
theme: new ThemeData(
primaryColor: Colors.white,
),
//应用首页路由
home: RandomWords(),
);
}
}
//定义首页
class RandomWords extends StatefulWidget {
const RandomWords({Key? key}) : super(key: key);
@override
//State类
_RandomWordsState createState() => _RandomWordsState();
}
//State类
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final Set<WordPair> _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) {
return const Divider();
}
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
@override
//构建UI界面
Widget build(BuildContext context) {
//Scaffold 是 Material 库中提供的页面脚手架
//它提供了默认的导航栏、标题和包含主屏幕widget树的body属性
return Scaffold(
appBar: AppBar(
title: const Text("名称生成器"),
actions: <Widget>[
new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute<void>(
builder: (BuildContext context) {
final Iterable<ListTile> tiles = _saved.map(
(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final List<Widget> divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return new Scaffold(
appBar: new AppBar(
title: const Text('收藏列表'),
),
body: new ListView(children: divided),
);
},
),
);
}
}
将包依赖项添加到应用程序
- 依赖它
打开 pubspec.yaml 文件,然后在dependencies下添加english_words: - 安装它
在 terminal中: 运行 flutter packages get
或者
在 IntelliJ中: 点击pubspec.yaml文件顶部的 ‘Packages Get’ - 导入它
在Dart代码中添加相应的import语句.
最终效果:
参考
https://flutter.cn/docs/get-started/codelab
lingduqingye: 代理服务器的DNS服务无法解析本地域名
Crawl.W: 我是由于安装clash导致的,切换下Rule和Direct
weixin_47640943: 你好,怎么设置多个定时任务
CCCStudy4923: 这个遍历赋值帮忙了,谢谢!
圆圆的东柳君: 结构体遍历这个很有帮助,感谢!