注册

Flutter 入门路线图

本文是为那些渴望开始学习 flutter 的人们而准备的，这是一个适合初学者从所有必要资源中逐步学习的路线图。


什么是 flutter


Flutter 是 Google 的 UI 工具包，可通过单个代码库为移动设备，web 和桌面系统构建漂亮的，本机编译的应用程序。


下面两个视频很好地介绍了 flutter；


• Introducing Flutter1


• What's new in Flutter 20192



[1] https://youtu.be/fq4N0hgOWzU


[2] https://youtu.be/5VbAwhBBHsg


为什么是 flutter？


我们已经知道有很多框架可以提供跨平台功能，那么在这场激烈竞争中，是什么让 flutter 显得特别呢？


快速开发


Flutter 的热加载功能可帮助您快速轻松地进行实验，构建用户界面，添加功能并更快地修复错误。在 iOS 和 Android 的模拟器和硬件上体验亚秒级的重新加载时间，而不会丢失状态。


富有表现力的精美用户界面


Flutter 内置的精美 Material Design 和 Cupertino（iOS-flavor）小部件，丰富的运动 API，流畅的自然滚动以及对平台的了解，可为您的用户带来更多惊喜。


native 级别的性能


Flutter 的小部件结合了所有重要的平台差异，例如滚动，导航，图标和字体，以在 iOS 和 Android 上提供完整的 native 性能。


查看 Flutter 的功能


以下是全球开发人员构建的 Flutter 应用程序的展示。


• Apps take flight with Flutter3


• An open list of apps built with Flutter4


• Flutter Awesome5


• Start Flutter | Forever free, open source, and easy to use.6



[3]https://flutter.dev/showcase


[4]https://itsallwidgets.com/


[5]https://flutterawesome.com/


[6]https://startflutter.com/


首先要做什么？


Flutter 既快速又容易，如果您熟悉 Java 或任何面向对象的语言，那么很不错，但是我强烈建议您具备 Dart 的基本知识。


以下是一些可能对您有所帮助的视频。


• Dart Programming for Flutter7


• Dart Programming Tutorial - Full Course8


• Introduction to Dart for Beginners9


• Dart: Basics of Dart Part - 1/2 | Flutter10



[7]https://youtu.be/5rtujDjt50I?list=PLlxmoA0rQ-LyHW9voBdNo4gEEIh0SjG-q


[8]https://youtu.be/Ej_Pcr4uC2Q


[9]https://youtu.be/8F2uemqLwvE?list=PLJbE2Yu2zumDjfrfu8kisK9lQVcpMDDzZ


[10]https://youtu.be/DFRl4UyS7c8?list=PLR2qQy0Zxs_W4a6P70VYtzna7jwl3-lxI


对于那些不喜欢看视频的人，可以查看以下站点


• Tutorials11


• Dart Programming Tutorial12


• Learn Dart In A Week With These Free Resources13



[11]https://dart.dev/tutorials


[12]https://www.tutorialspoint.com/dart_programming/index.htm


[13]https://hackernoon.com/learn-dart-in-a-week-with-these-free-resources-b892e5265220


是什么使 Dart 如此典型，为什么 flutter 会使用它？


为什么 Flutter 使用 Dart？


可以查看以下文章和视频


• Why Flutter Uses Dart?14


• 视频：Why Flutter Uses Dart?15



[14]https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf


[15]https://youtu.be/5F-6n_2XWR8


Flutter 底层是如何工作的？


由于 iOS 不允许动态编译，因此您的 Dart 代码会使用 AOT 直接编译为本地代码。


要了解更多信息，请在下面查看这些资源：


• Technical overview16


• How to Dart and Flutter Work Together?17


• What's Revolutionary about Flutter18


• How Flutter reners Widgets19


• How is Flutter different for app development20



[16]https://flutter.dev/docs/resources/technical-overview


[17]https://youtu.be/iVYpeEd3Jes


[18]https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514


[19]https://youtu.be/996ZgFRENMs


[20]https://youtu.be/l-YO9CmaSUM


Flutter快速且易于使用，现在让我们看看如何安装它。


如何安装Flutter？


这是开发人员文档的链接，您可以在其中找到在现有的操作系统中安装Flutter。


• Install21



[21]https://flutter.dev/docs/get-started/install


解决安装过程中的问题


如果您在安装 flutter 时遇到任何问题，并且 flutter 无法正常工作，那么这就是出现了一些问题。


• 设置 flutter 路径时遇到麻烦-找不到flutter命令22


• Flutter Doctor无法识别Android Studio flutter和dart插件，但已安装插件23


• Flutter和Dart插件未在Flutter Doctor中安装警告24


• 安装 flutter 时的一些常见问题。25



[22]https://stackoverflow.com/questions/49268297/having-trouble-setting-flutter-path-flutter-commands-not-found


[23]https://github.com/flutter/flutter/issues/21881


[24]https://github.com/flutter/flutter/issues/11940


[25]https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues


设置Flutter的编辑器


• Set up an editor26



[26]https://flutter.dev/docs/get-started/editor


创建您的Flutter项目


通过以下命令创建 flutter 项目


flutter create <project-name>

或者您可以使用IDE（Intellij，Android Studio等）


项目概况


当您创建 flutter 应用程序时，您会看到这些文件和文件夹，大多数代码是用 dart 编写在 lib 文件夹中，native 代码放在 android 和 ios 目录下。


Jay Tillu的一篇文章解释了该项目的结构。


• Flutter Project Structure27



[27]https://dev.to/jay_tillu/flutter-project-structure-1lhe


运行你的第一个 App


• Test drive28


或者你可以使用以下命令来运行您的第一个应用程序


flutter run

当您启动第一个应用程序时，一定会感到很兴奋（从技术上说，这不是您的应用程序，代码已经在那里😜）。 我也很兴奋🎉。


创建flutter应用程序时，您会看到计数器应用程序已经有代码了。


运行代码时，您将看到此信息。这是一个简单的计数器应用程序，其中有一个FAB（FloatingActionButton）和 Text 来指示已按下 FAB 多少次。



[28]https://flutter.dev/docs/get-started/test-drive


flutter 中的 widget


如果看到代码，您将看到 StatefulWidget 和 StatelessWidget。在深入探讨之前，我们先来了解一下什么是 Widget。


• Introduction to widget29


基本上，在 flutter 应用程序中看到的所有内容都是一个小部件。


我发现 What is a Widget in Flutter30 一文中的解释非常准确


Flutter小组还提供了一个YouTube播放列表（Widget of the week31），该列表仅讨论flutter中的Widget。



[29]https://flutter.dev/docs/development/ui/widgets-intro


[30]https://stackoverflow.com/questions/50958238/what-is-a-widget-in-flutter


[31]https://youtu.be/b_sQ9bMltGU?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG


什么是有状态和无状态小部件？


在 Stateless Widget 中，其所有属性都是不可变的，这意味着 StatelessWidget 永远不会自行重建（但可以从外部事件重建），而 StatefulWidget 可以。


• Intro to Flutter - Stateful and Stateless Widgets, Widget Tree - Part One32


• Flutter: Stateful vs Stateless Widget33


• How to Create Stateless Widgets - Flutter Widgets 101 Ep. 134


• How Stateful Widgets Are Used Best - Flutter Widgets 101 Ep. 235


• Google's Flutter Tutorials | 6 - Stateless & Stateful Widgets | Android & iOS | Dart36



[32]https://youtu.be/-QRQIKtPTlI


[33]https://medium.com/flutter-community/flutter-stateful-vs-stateless-db325309deae


[34]https://www.youtube.com/watch?v=wE7khGHVkYY&feature=emb_title


[35]https://www.youtube.com/watch?v=AqCMFXEmf3w&feature=emb_title


[36]https://www.youtube.com/watch?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV&v=VnWHOogtDk8&feature=emb_title


让我们创建第一个Flutter应用


Google已经提供了一个 Codelab，您可以从那里开始学习如何构建自己的第一个 Flutter 应用程序。


• Write Your First Flutter App, part 137


• Write Your First Flutter App, part 238


• Flutter Tutorial Part 1: Build a Flutter app from scratch39


• 1.3 Flutter Hello World Tutorial: Create First Flutter Application: Flutter Dart Tutorial40


• 1.4 First Flutter Application using Dart: PART-2 Flutter Tutorial for Beginners using Dart41



[37]https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#4


[38]https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0


[39]https://medium.com/aviabird/flutter-tutorial-how-to-build-an-app-from-scratch-b88d4e0e10d7


[40]https://www.youtube.com/watch?list=PLlxmoA0rQ-Lw6tAs2fGFuXGP13-dWdKsB&v=dsyucuytW2k


[41]https://www.youtube.com/watch?list=PLlxmoA0rQ-Lw6tAs2fGFuXGP13-dWdKsB&v=ycHX8QtV08c


如何在 Flutter 中创建 UI？


为了使 UI 更加流畅，您需要基本了解布局以及如何使用它们。


• Layouts in Flutter42


• Flutter layout Cheat Sheet43



[42]https://flutter.dev/docs/development/ui/layout


[43]https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e


如何在您的应用中添加交互？


在 flutter 中，您不能只是分配一个值并留下它


例如


String value="Hello";

------------------------------

Text(value);

---SOMEWHERE IN THE CODE------

onTap(){

value="How are you?";

}

如果您认为文本将要更改，那么您错了🙅‍♂️，您将不得不使用 setState()。


onTap(){

	setState({

		value="How are you?";

	});

}

添加 setState() 将重建小部件并显示更改。


• Adding interactivity to your Flutter app44


我建议您跟进有关开发的 Flutter 官方文档


• Development45


flutter 中的所有内容都是小部件，您可以自行创建任何自定义小部件，但是已经有通过 flutter 定义的小部件。


• Widget catalog46



[44]https://flutter.dev/docs/development/ui/interactive


[45]https://flutter.dev/docs/development


[46]https://flutter.dev/docs/development/ui/widgets


Flutter 中的 JSON 解析


• JSON and serialization47


• Parsing JSON in Flutter48


• Parsing complex JSON in Flutter49


• Working with APIs in Flutter50


• Handling Network Calls like a Pro in Flutter51


• Flutter - Build An App To Fetch Data Online Using HTTP GET | Android & iOS52


• Testing, JSON serialization, and immutables (The Boring Flutter Development Show, Ep. 2)53



[47]https://flutter.dev/docs/development/data-and-backend/json


[48]https://medium.com/flutterdevs/parsing-complex-json-in-flutter-b7f991611d3e


[49]https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51


[50]https://medium.com/flutter-community/working-with-apis-in-flutter-8745968103e9


[51]https://medium.com/flutter-community/handling-network-calls-like-a-pro-in-flutter-31bd30c86be1


[52]https://www.youtube.com/watch?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV&v=aIJU68Phi1w


[53]https://www.youtube.com/watch?v=TiCA0CEePyE


在 Flutter 中使用数据库


SQLite


• Persist data with SQLite54


• Data Persistence with SQLite | Flutter55


• 4.1 Flutter SQFLite Database Tutorial: Implement SQLite database with example: Section Overview56


• Moor (Room for Flutter) #1 – Tables & Queries – Fluent SQLite Database57



[54]https://flutter.dev/docs/cookbook/persistence/sqlite


[55]https://medium.com/flutterdevs/data-persistence-with-sqlite-flutter-47a6f67b973f


[56]https://www.youtube.com/watch?list=PLDQl6gZtjvFu5l20K5KTEBLCjfRjHowLj&v=1BwjNEKD8g8


[57]https://www.youtube.com/watch?v=zpWsedYMczM


SharedPreferences


• Shared preferences plugin58


• Using SharedPreferences in Flutter59


• Store key-value data on disk60


• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework61



[58]https://pub.dev/packages/shared_preferences


[59]https://medium.com/flutterdevs/using-sharedpreferences-in-flutter-251755f07127


[60]https://flutter.dev/docs/cookbook/persistence/key-value


[61]https://www.youtube.com/watch?v=IvrAAMQnj4k


使用Firebase


• 将 Firebase 添加到您的 Flutter 应用62


• Firebase for Flutter63


• Flutter - Firestore introduction64



[62]https://firebase.google.com/docs/flutter/setup


[63]https://codelabs.developers.google.com/codelabs/flutter-firebase/#0


[64]https://www.youtube.com/watch?list=PLgGjX33Qsw-Ha_8ks9im86sLIihimuYrr&v=LzEbpALmRlc


其他学习 Flutter 的资源


以下是其他开发人员和Flutter团队提供的一些资源：


• Technical overview65


• Resources to learn Flutter66


• Free resources to learn and advance in Flutter67


• Flutter Community68


• My Favourite List of Flutter Resources69


• awesome-flutter70


• londonappbrewery/Flutter-Course-Resources71


• A Searchable List of Flutter Resources72


• FlutterDevs73



[65]https://flutter.dev/docs/resources/technical-overview


[66]https://medium.com/flutter-community/resources-to-learn-flutter-2ade7aa73305


[67]https://medium.com/flutter-community/free-resources-to-learn-and-advance-in-flutter-e07875ffc825


[68]https://medium.com/flutter-community


[69]https://medium.com/coding-with-flutter/my-favourite-list-of-flutter-resources-523adc611cbe


[70]https://github.com/Solido/awesome-flutter


[71]https://github.com/londonappbrewery/Flutter-Course-Resources


[72]https://flutterx.com/


[73]https://medium.com/flutterdevs


关于 Flutter 的问题


• FAQ74


• Answering Questions on Flutter App Development75


• Flutter Vs. React Native: FAQs for Every Developer76



[74]https://flutter.dev/docs/resources/faq


[75]https://medium.com/@dev.n/answering-questions-on-flutter-app-development-6d50eb7223f3


[76]https://hackernoon.com/flutter-vs-react-native-faqs-for-every-developer-yjp329z


本文仅适用于初学者。


作者：知识小集
链接：https://juejin.cn/post/6844904049003724807
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
0
分享
2021-12-06

0 个评论

要回复文章请先登录或注册

一个开放、互助、协作、创意的社区

关于imGeek
关于专职工程师值守
社区财富榜
赞助商
友情链接
热门标签
京ICP备2023000793号