2021年如何学习Flutter?

约定不等于承诺〃 2022-10-23 05:52 207阅读 0赞

### 目录 ###

*   *  前言
     *  什么是Flutter？
     *  为什么要学习Flutter？
     *  Flutter的特性
     *   *  Flutter的一些独特功能是：
         *  学习Flutter的预备知识
     *  如何学习Flutter？
     *   *  在线视频和文档
         *  在线教程
         *  书籍
         *  来自GitHub的示例
     *  好吧，让我们立即开始！
     *  安装Flutter
     *  总结

> 文章译自：
> 
> [Ramya Shankar][] , [Hackr.io][]
> 
> [How to learn Flutter ?][How to learn Flutter]

## 前言 ##

![在这里插入图片描述][20210315091431610.png]  
Flutter之所以变得流行，是因为它具有快速构建应用程序的灵活性以及易于学习语言的灵活性。不管您是经验丰富的开发人员还是新手，观看一些有用的视频，收集一些在线和离线学习资源以及经过大量练习后，就可以熟练使用Flutter。在这篇文章中，我们将引导您获取所有资源，但在此之前-你应该了解所有关于Flutter你应该了解的知识！

## 什么是Flutter？ ##

Flutter由Google开发，是一个开放源代码框架（更准确地说是SDK），主要用于开发手机APP。我们还可以使用单个代码库为同一APP开发Web和桌面版本。Flutter由许多设计精美的[小部件][Link 1]，一组丰富的motion API以及可跨平台使用的滚动，导航，字体和图标组成。这样可确保在Android和iOS手机上均具有流畅的性能。Flutter应用程序是原生编译的，因此具有高性能和快速性。

## 为什么要学习Flutter？ ##

手机APP的开发是2021年的趋势。在移动设备上查看和执行操作最方便，因为我们可以随时随地进行操作。Flutter是一个完全可自定义的框架，可让您构建高度表达且灵活的UI，它易于学习，可加快开发速度。如果这些还不够，那么这里有一些您应该学习Flutter的原因：

*  没有跨平台问题：Flutter遵循了一次写入的方法，因为它是提前编译的，因此提供了原生代码体验。
 *  无需重新构建：“热重载”使开发人员可以在保存代码更改后立即查看带来的改变。
 *  强大的社区和支持：Flutter的团队非常乐于助人，社区为新手提供了充分的支持。
 *  使用2Dimension Flare创建无尽的动画。
 *  支持许多IDE，例如VS Code，Android Studio 等。
 *  使用Dart语言保证前端和后端代码的一致性。

## Flutter的特性 ##

在我们给你学习Flutter的资源之前的最后一件事，你必须知道，这样你就可以钻研资源，动手学习，而我们就不必再重复介绍了！

### Flutter的一些独特功能是： ###

*  专注于可定制的小部件，可以使用Material Design和Cupertino包（而不是android XML）中的所有小部件集来轻松开发UI。
 *  热重载可帮助开发人员立即查看其更改。这减少了开发时间以及错误修复时间。一次写入，可以在任何平台上运行的任何代码，无需更改即可运行。
 *  Flutter使用Dart编程语言，该语言既可以提前使用，也可以及时进行编译，从而提供高性能和更快的启动时间。
 *  原生ARM机器码可在Android和iOS上实现原生性能。

### 学习Flutter的预备知识 ###

要开始学习Flutter，对以下内容的熟悉是非常必要的。如果您不了解以下内容，最好先掌握这些概念，然后继续进行Flutter之旅：

*  原生Android开发知识–如果您要开发非常精细的应用程序 。
 *  OOPS概念：由于Java，C ++等语言都是基于OOPS概念的，因此必须对它们进行深入的研究。这是一个很好的[视频][Link 2]，可以轻松地解释OOPS。
 *  在学习Flutter之前，您应该了解Dart编程：但这也很容易。Dart是Google的通用编程语言。Hackr.io列出了一些很好的[课程][Link 3]，可以帮助您快速轻松地上Dart。
 *  知道C++/Java是一项额外的优势，但不是必需的！

## 如何学习Flutter？ ##

现在是开始学习Flutter的好时机。互联网上的资源林林总总，眼花缭乱。这就是为什么我们会提供最好的资源来帮助您以正确的方式学习Flutter的原因。官方Flutter网站上有很多文档，但是您应该参考其他资源以便对于Flutter有一个更深层次和更多维度的理解。

### 在线视频和文档 ###

[官方网站][Link 4]上提供了许多示例视频和文档。您还应该在YouTube上查看本周的[窗口小部件][Link 5]，其中涵盖了SDK中的窗口小部件。如果您需要快速了解有关小部件的知识，那么这是一个好地方。

### 在线教程 ###

Hackr的[Flutter教程链接][Flutter]列出了一些最佳的免费和付费课程。Flutter＆Dart是一门很好的课程，您可以同时学习Dart和Flutter。同样，Flutter入门是一个很好的初学者课程，您可以免费学习。

### 书籍 ###

书籍是获取有关任何技术和参考资料的深入知识的好方法。目前学习Flutter的最好的书是：

*  [快速了解Google Flutter][Google Flutter]
 *  [Flutter入门–应用程序开发实践指南][Flutter 1]
    
    作为一个初学者，您应该能够从这两本书中学到很多东西。

### 来自GitHub的示例 ###

您可以使用Flutter社区在[GitHub][]上创建的示例，Demo来开始或强化Flutter的技能。首先尝试UI示例，其中一些可以在应用商店中找到-这将帮助您实时查看应用程序的工作方式。

好了，我们现在获取到了资源，但是我应该如何开始呢？

## 好吧，让我们立即开始！ ##

让我们快速设置 Flutter 环境并构建一个简单的APP以帮助您入门。

## 安装Flutter ##

您应该做的第一件事是获取SDK –软件开发工具包–它是一组软件工具，这些工具打包在一个软件包中，并且可以在您的开发环境中使用。 对于开发，我们使用集成开发环境（IDE）–使您的开发和测试变得轻松快捷。如我们之前所学，有2种流行的IDE –  
VS Code –它轻便，快速，你想要IDE拥有的功能它全都有 ！  
Android Studio –使用设备上的Android Studio，您只需安装Flutter和Dart的插件，设置SDK，就可以了。  
设置很容易，您可以按照[官方文档][Link 6]中的说明进行操作。

使用Flutter构建一个简单的应用程序  
让我们构建一个简单的Hello World程序。通过此程序，我们将了解Flutter的结构以及使用的主要方法。尽管它很简单，但仍然是一个良好的开端。  
要想创建一个新的Flutter项目，只需要键入：

$ flutter create flutter_app

Flutter 新项目主要包含以下几个目录：

flutter_app

**android** –生成Android应用。任何关于Android的实现都将放在此文件夹中。  
资产–用于存储数据文件，图像等…

**ios** \-生成的iOS应用。任何关于iOS的实现都将放在此文件夹中。

**lib**\-主要代码文件都在这里创建，main.dart -主文件

**test**–用于单元测试

对于我们这个比较简单的App，我们仅需要“ main.dart”。文件。该文件自带一些代码，开发人员通常将其删除以从头开始编写代码。这正是我们也将要做的！  
首先重要的是导入“ material ”包。它用于引入UI组件。

import 'package:flutter/material.dart';

就像许多其他语言一样，执行从main方法开始。main方法应包括runApp()方法，该方法调用要执行的代码。

void main() => runApp(new HelloWorldApp());

要执行的代码不过是一个小部件。请记住，Flutter 是完全基于 widget(小部件)的。

那么，什么是 **widget**(小部件)？

如果您还不知道，那么 **widget**(小部件)可以是视图内的任何东西- button(按钮)，list(列表)，table(表格)，input box(输入框)，card view(卡片视图)，等等。因此，您的整个 Flutter 应用都是一个个小部件的集合，这些小部件嵌套组合在一起，从而构建一个漂亮的 UI 。这就是为什么您创建的每个类都应扩展小部件类的原因。

由于我们的应用程序只需要打印 Hello World，所以我们只需要一个不需要保存任何状态的小部件-StatelessWidget(无状态小部件)。StatelessWidget(无状态小部件)具有构造方法。

class HelloWorldApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
    Now comes the main magic –
        return new MaterialApp(
          home: new Material(
            child: new Center(
              child: new Text("Hello world!"),

MaterialApp 是小部件的封装，Material 是 materials 中的一种，Center 是将元素居中的小部件。Text 将添加文本字段小部件。除了您看到的属性（home，child）外，还有许多其他属性（例如 style(样式)，position(位置)， decoration(装饰)，等等）可以完善整个UI。

然后，现在让我们将所有代码放在一起

import 'package:flutter/material.dart';
    void main() => runApp(new HelloWorldApp());
    
    class  extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return new MaterialApp(
          home: new Material(
            child: new Center(
              child: new Text("Hello world!"),
            ),),);}}

![在这里插入图片描述][20210315091410387.png]

…并使用命令运行它

$ flutter run

恭喜你！您刚刚构建了第一个手机APP。从这里开始，您的 Flutter 旅程将变得简单而有趣。

## 总结 ##

Udemy 和其他在线资源设计了许多很好的课程来学习 Flutter。如果您已经从事手机APP的开发，那么一门好的课程将帮助您快速学习。但是，如果您的项目时间紧迫，则应进行更多的实践；如果你想通过设置本地环境来构建小部件，应当阅读一两本书以了解更加复杂的设计。书籍将帮助您填补已经知道的知识和需要学习的知识之间的空白。

[Ramya Shankar]: https://hackr.io/blog/author/ramyashankar
[Hackr.io]: https://hackr.io/
[How to learn Flutter]: https://hackr.io/blog/how-to-learn-flutter
[20210315091431610.png]: /images/20221023/63afa8c2a491441cbba31f74ef33cf7e.png
[Link 1]: https://flutter.dev/docs/development/ui/widgets
[Link 2]: https://www.youtube.com/watch?v=xoL6WvCARJY
[Link 3]: https://hackr.io/tutorials/learn-dart?q=Dart
[Link 4]: https://flutter.dev/docs/resources/videos
[Link 5]: https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
[Flutter]: https://hackr.io/tutorials/learn-flutter?q=Flutter
[Google Flutter]: https://www.amazon.com/-/zh/dp-B07NX3WM6L/dp/B07NX3WM6L
[Flutter 1]: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D
[GitHub]: https://flutter.github.io/samples
[Link 6]: https://flutter.dev/docs/development/tools/vs-code
[20210315091410387.png]: /images/20221023/e544b3ba3f414d049c200c9349723f02.png