Эта статья организована изRoadmap To Become A Flutter Developer, пожалуйста, обратитесь к оригинальному тексту, чтобы прочитать
Эта статья для тех, кто хочет начать изучать флаттер, пошаговая дорожная карта для начинающих со всеми необходимыми ресурсами.
что такое флаттер
Flutter — это набор инструментов пользовательского интерфейса Google для создания красивых, скомпилированных в собственном коде приложений для мобильных, веб- и настольных систем из единой кодовой базы.
Следующие два видео являются хорошим введением в флаттер;
•Introducing Flutter1
•What's new in Flutter 20192
[1] https://youtu.be/fq4N0hgOWzU
[2] https://youtu.be/5VbAwhBBHsg
Зачем трепетать?
Мы уже знаем, что существует множество фреймворков, обеспечивающих кроссплатформенную функциональность, так что же делает флаттер особенным в этой жесткой конкуренции?
быстрое развитие
Функция горячей перезагрузки Flutter помогает быстро и легко экспериментировать, создавать пользовательские интерфейсы, добавлять функции и быстрее исправлять ошибки. Испытайте время перезагрузки менее секунды без потери состояния на эмуляторах и оборудовании iOS и Android.
Выразительный и красивый пользовательский интерфейс
Встроенные во Flutter красивые виджеты Material Design и Cupertino (со вкусом iOS), богатый API движения, плавная естественная прокрутка и совместимость с платформой удивят ваших пользователей.
производительность на исходном уровне
Виджеты Flutter сочетают в себе все важные отличия платформы, такие как прокрутка, навигация, значки и шрифты, чтобы обеспечить полную нативную производительность на iOS и Android.
Посмотрите, что делает 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 использует Dart?
Следующие статьи и видео можно посмотреть
•Why Flutter Uses Dart?14
•Видео: Почему Flutter использует 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, установленный в существующей ОС.
•Install21
[21]https://flutter.dev/docs/get-started/install
Устранение неполадок во время установки
Если у вас возникли проблемы с установкой флаттера, а флаттер не работает, значит, что-то идет не так.
•Проблема с настройкой пути флаттера - команда флаттера не найдена22
•Flutter Doctor не распознает плагины Android Studio для флаттера и дротика, но плагины установлены23
•Предупреждение плагина Flutter и Dart не установлено во Flutter Doctor24
•Некоторые распространенные проблемы при установке трепетания.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 create <project-name>
Или вы можете использовать IDE (Intellij, Android Studio и т. д.)
Обзор проекта
Вы увидите эти файлы и папки при создании своего флаттер-приложения, большая часть кода написана в dart в папке lib, а собственный код размещен в каталогах android и ios.
В статье Джея Тиллу объясняется структура проекта.
•Flutter Project Structure27
[27]https://dev.to/jay_tillu/flutter-project-structure-1lhe
Запустите свое первое приложение
•Test drive28
Или вы можете использовать следующую команду для запуска вашего первого приложения
flutter run
Когда вы запускаете свое первое приложение, вы обязательно будете в восторге (технически это не ваше приложение, код уже есть 😜). Я тоже очень рада 🎉.
Когда вы создадите свое флаттер-приложение, вы увидите, что у приложения-счетчика уже есть код.
Когда вы запустите код, вы увидите эту информацию. Это простое приложение-счетчик с FAB (FloatingActionButton) и текстом, указывающим, сколько раз была нажата FAB.
[28]https://flutter.dev/docs/get-started/test-drive
виджеты во флаттере
Если вы посмотрите на код, вы увидите StatefulWidget и StatelessWidget. Прежде чем углубиться в это, давайте сначала разберемся, что такое виджет.
•Introduction to widget29
По сути, все, что вы видите в флаттер-приложении, — это виджеты.
я нашелWhat is a Widget in Flutter30Объяснение в статье очень точное
Команда Flutter также предоставляет плейлист YouTube (Widget of the week31), в списке обсуждаются только виджеты в флаттере.
[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?
Чтобы сделать пользовательский интерфейс более гибким, вам необходимо иметь общее представление о макетах и о том, как их использовать.
•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
Как добавить интерактивности в ваше приложение?
Во флаттере вы не можете просто присвоить значение и оставить его.
Например
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
Все во флаттере — это виджеты, вы можете сами создать любой пользовательский виджет, но уже есть виджеты, определенные через флаттер.
•Widget catalog46
[44]https://flutter.dev/docs/development/ui/interactive
[45]https://flutter.dev/docs/development
[46]https://flutter.dev/docs/development/ui/widgets
Парсинг JSON во Flutter
•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 (Комната для Flutter) #1 – Таблицы и запросы – База данных Fluent SQLite57
[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 в свое приложение Flutter62
•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
Вопросы о флаттере
•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
Эта статья предназначена только для новичков.