根据文档实现第一个 Flutter 程序
文档中的情况是分为三个部分的,实现文字显示,再到实现一个列表。在 Step 2 里,实现了一个带赞的列表,并添加了点击菜单切换路由;
以下为实现了 Step 2 的代码:
lib/main.dart
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'test/NameList.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
theme: ThemeData( // Add the 3 lines from here...
primaryColor: Colors.cyan,
),
home: Scaffold(
body: RandomWords()
),
);
}
}
lib/test/NameList.dart
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
class RandomWords extends StatefulWidget {
@override
_RandomWordsState createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = <WordPair>{};
final _biggerFont = TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
actions: [
IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
void _pushSaved() {
Navigator.of(context).push(
MaterialPageRoute<void>(
// NEW lines from here...
builder: (BuildContext context) {
final tiles = _saved.map(
(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return Scaffold(
appBar: AppBar(
title: Text('Saved Suggestions'),
),
body: ListView(children: divided),
);
}, // ...to here.
),
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: /*1*/ (context, i) {
if (i.isOdd) return Divider(); /*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: Icon( // NEW from here...
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () { // NEW lines from here...
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
}
这个 APP 的路由切换被 Debug 标签遮住了。。找了好一会才发现。。。
通过上述代码学习了
- 编写 Dart
- 使用热加载以获得更快的开发周期
- 实现一个有状态的小部件,向应用程序添加交互性
- 创建路由并添加逻辑,以便在主路由和新路由之间跳转
- 学习如何使用主题改变应用程序UI的外观
Step 1: https://flutter.dev/docs/get-started/codelab
Step 2: https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0