<commit_before>---
layout: post
title:  "Flutter学习（二）：创建一个交互式的Flutter应用程序"
date:  2018-05-25
desc: "本教程将完成一个简单的移动应用程序，功能是：为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存（收藏）喜欢的名称。该代码一次生成十个名称，当用户滚动时，会生成一新批名称。用户可以点击导航栏右边的列表图标，以打开到仅列出收藏名称的新页面。"
keywords: "Flutter,学习,交互式,应用程序"
categories: [Flutter]
tags: [Flutter,学习]
---

# Flutter学习（二）：创建一个交互式的Flutter应用程序

本文将会完成 Flutter 官网的一个练习例子来作为 Flutter 开发学习的入门hello world。

主要知识点：
> - Flutter应用程序的基本结构.
> - 查找和使用packages来扩展功能.
> - 使用热重载加快开发周期.
> - 如何实现有状态的widget.
> - 如何创建一个无限的、延迟加载的列表.
> - 如何创建并导航到第二个页面.
> - 如何使用主题更改应用程序的外观.


具体的例子要求是：为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存（收藏）喜欢的名称。该代码一次生成十个名称，当用户滚动时，会生成一新批名称。用户可以点击导航栏右边的列表图标，以打开到仅列出收藏名称的新页面。
完成效果：
<video id="video" controls="" preload="none" poster="/assets/images/2018-05/fultter-2-项目演示效果.png">
      <source id="mp4" src="/assets/videos/2018-05/QQ20180524-211040-HD.mp4" type="video/mp4">
      <p>Your user agent does not support the HTML5 Video element.</p>
</video>

## 新建项目

项目使用IDEA来创建，具体新建项目的步骤请查看[Flutter学习（一）：开发环境搭建](https://wangxin1248.github.io/flutter/2018/05/flutter-install.html)

项目创建结束之后，打开 **lib/main.dart**便是项目的主要逻辑代码所在地。

默认创建的项目中包含系统自动生成的一系列代码，这里我们将其统统删除。开始自己亲手创建一个应用程序。
<commit_msg>修改flutter学习笔记第二篇<commit_after>---
layout: post
title:  "Flutter学习（二）：创建一个交互式的Flutter应用程序"
date:  2018-05-25
desc: "本教程将完成一个简单的移动应用程序，功能是：为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存（收藏）喜欢的名称。该代码一次生成十个名称，当用户滚动时，会生成一新批名称。用户可以点击导航栏右边的列表图标，以打开到仅列出收藏名称的新页面。"
keywords: "Flutter,学习,交互式,应用程序"
categories: [Flutter]
tags: [Flutter,学习]
---

# Flutter学习（二）：创建一个交互式的Flutter应用程序

本文将会完成 Flutter 官网的一个练习例子来作为 Flutter 开发学习的入门hello world。

主要知识点：

>
> 1. Flutter应用程序的基本结构.
> 2. 查找和使用packages来扩展功能.
> 3. 使用热重载加快开发周期.
> 4. 如何实现有状态的widget.
> 5. 如何创建一个无限的、延迟加载的列表.
> 6. 如何创建并导航到第二个页面.
> 7. 如何使用主题更改应用程序的外观.


具体的例子要求是：为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存（收藏）喜欢的名称。该代码一次生成十个名称，当用户滚动时，会生成一新批名称。用户可以点击导航栏右边的列表图标，以打开到仅列出收藏名称的新页面。

完成效果：
<video id="video" controls="" preload="none" poster="/assets/images/2018-05/fultter-2-项目演示效果.png">
      <source id="mp4" src="/assets/videos/2018-05/QQ20180524-211040-HD.mp4" type="video/mp4">
      <p>Your user agent does not support the HTML5 Video element.</p>
</video>

## 新建项目

项目使用IDEA来创建，具体新建项目的步骤请查看[Flutter学习（一）：开发环境搭建](https://wangxin1248.github.io/flutter/2018/05/flutter-install.html)

项目创建结束之后，打开 **lib/main.dart**便是项目的主要逻辑代码所在地。

默认创建的项目中包含系统自动生成的一系列代码，这里我们将其统统删除。开始自己亲手创建一个应用程序。

{'fraction_non_alphanumeric': 0.14376053962900506, 'fraction_numerical': 0.04426644182124789, 'mean_word_length': 6.754901960784314, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 28, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6952370', 'n_tokens_mistral': 1673, 'n_tokens_neox': 1869, 'n_words': 121}