Бесплатное видеоруководство по Flutter, сезон 1: создание среды разработки

Android Google Flutter Android Studio

Предисловие:

Видео в конце статьи! ! !

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android. Flutter работает с существующим кодом. Во всем мире Flutter используется все большим количеством разработчиков и организаций, и Flutter полностью бесплатен и имеет открытый исходный код. Мы здесь, чтобы раскрыть его милую и волшебную вуаль.

Это только первый сезон, и он будет выходить дальше, я постараюсь рассказать вам от основ до самого боя. Еженедельно обновляются три эпизода.

Раздел 00: Описание курсов, полезная ерунда

Предлагаемый способ обучения

Это набор видео-уроков с картинками и текстами, вы можете смотреть видео, чтобы учиться, или вы можете смотреть текстовые уроки, когда компания не занята. Но здесь я надеюсь, что вы сначала просмотрите видео, а затем просмотрите статью, когда будете просматривать или использовать ее в работе (это экономит ваше время на заметки, а весь важный контент написан в виде текстового руководства).

Частота обновления статьи

эта статьяЕженедельно обновляются три эпизода, Так как я не профессиональный лектор, гарантировать время невозможно.

  • Вы можете пойти по стопам статьи и учиться вместе из первой статьи. Поскольку частота обновления невелика, вы можете идти в ногу с прогрессом обучения с меньшими усилиями.

  • Конечно, вы также можете подождать, пока обновление не будет завершено, прежде чем учиться, что является более последовательным и может быть выполнено за один раз, что делает знания более организованными.

Конечно, вы можете делать все, что хотите, не думая об этом так много, и самое главное, что-то получить.

Учимся подстраиваться под толпу

  • Фанаты фронтенда:Надеюсь повысить квалификацию и освоить технологию полноценной разработки.
  • Практики флаттера:Практики флаттера также должны многому научиться.
  • Любители мобильной разработки:Новички, которые хотят заняться мобильной разработкой, но еще не начали.

Возможности видео и рекомендации по просмотру

Видео основано на официальном сайте Flutter, а также ссылается на китайский сайт. Таким образом, содержание неизбежно повторяется, но знания также были тщательно проверены и отсортированы мной, цель состоит в том, чтобы надеяться, что вы сможете быстро освоить этот навык.

Моя скорость речи низкая, для просмотра видео рекомендуется использовать 1,5-кратную скорость, чтобы опыт был лучше.

Раздел 01: Познакомьтесь с Флаттером

Давайте сначала скопируем введение с официального сайта, чтобы у всех было интуитивное понимание:

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android. Flutter работает с существующим кодом. Во всем мире Flutter используется все большим количеством разработчиков и организаций, и Flutter полностью бесплатен и имеет открытый исходный код.

Я думаю, что в этом предложении есть три основных момента:

  • Кроссплатформенность:Теперь Flutter может работать как минимум на 4 платформах и даже поддерживает разработку встраиваемых систем. Мы обычно используем Linux, Android, IOS, и даже Fuchsia может работать в последней версии операционной системы Google. Пока что Flutter — это фреймворк, который поддерживает большинство платформ, хорошая кроссплатформенность, прямая выгода — снижение затрат на разработку.
  • Родной интерфейс:Он нативный, делает наш опыт лучше и работает лучше. Официально говоря, это плавный и естественный эффект скольжения и осведомленность о платформе, дающий вашим пользователям новый опыт. (Вы можете посмотреть на картинку, это исполнение Флаттера)
  • Бесплатно с открытым исходным кодом:Излишне говорить, что пока мы учимся и используем их, они бесплатны. Это очень нужно для большой компании.Некоторые люди говорят, что вы можете использовать взломанную версию или что-то в этом роде.... Это означает, что вы все еще небольшая компания, и программное обеспечение нашей компании все подлинное, не говоря уже об операционной системе и производственная среда, в противном случае различные Вы даже не можете решить судебный процесс о нарушении прав компании.

alt

Сравнение основных фреймворков

На самом деле, эта часть субъективна и легко подвергается нападкам.Я не могу гарантировать, что то, что я сказал, является полностью правильным, но я дам вам краткое введение.

  • Кордова:Лично я думаю, что Flutter может победить, потому что Cordova все еще упакована на основе веб-технологий и разрабатывает мобильные приложения в виде плагинов, вот и все. Будь то производительность или опыт, Flutter может победить.
  • РН (реагировать нативный):Поскольку эффективность RN заключается в том, чтобы скомпилировать представление в собственное представление, эффективность намного выше, чем у HTML5 на основе Cordova, но у него также есть проблемы с эффективностью.Механизм рендеринга RN основан на рассмотрении внешней среды, и сложный рендеринг пользовательского интерфейса требует много зависимостей.Наложение представлений.Например, мы визуализируем сложный ListView, каждый небольшой элемент управления является собственным представлением, а затем комбинируем и накладываем друг друга.Подумайте, сколько объектов нужно отрисовывать, если наш список в это время необходимо провести пальцем, чтобы обновить.. Таким образом, существует вышеупомянутая схема списка RN, которая не является дружественной.
  • Флаттер:Усвоив уроки первых двух, с точки зрения технологии рендеринга, я решил реализовать его самостоятельно (GDI).Из-за лучшей управляемости был использован новый язык Dart, что позволило избежать общения между RN и Javascript через мост. Это приводит к проблеме низкой эффективности, поэтому с точки зрения производительности он лучше, чем RN, опытные разработчики могут открыть макет границы дисплея в параметрах разработчика мобильного телефона Android и обнаружить, что макет Flutter представляет собой единое целое. рендеринг Flutter бесполезен с использованием собственного элемента управления.

Также есть много друзей фронтенда, которые спрашивали меня, почему я не взял курс RN, а этот, потому что лично я считаю, что Flutter лучше RN и займет более длительный этап в области фронтенда, поэтому этот набор бесплатных видео опубликовано.

120 кадров в секунду сверхвысокая производительность

Flutter использует технологию рендеринга на GPU, поэтому производительность чрезвычайно высока.

Приложение, написанное Flutter, может достигать 120 кадров в секунду (кадров в секунду), что означает, что оно полностью пригодно для создания игр. И мы часто говорим, что производительность RN может достигать только 60 кадров в секунду, что также является суперконкурентоспособностью Flutter. Официальные лица утверждают, что Flutter даже превзойдет производительность.

Изучение Flutter также является отличным вариантом, если вы хотите заняться мобильными играми.

Флаттер экологическая ситуация

Благодаря поддержке и продвижению таких суперкомпаний, как google, хотя Flutter уже давно не выходит, его экология по-прежнему очень хороша.Также в Китае есть большое количество энтузиастов Flutter, и технический жир также является одним из их.

Давайте сначала посмотрим на ситуацию с плагинами Flutter. Список плагинов Flutter составили французы, мы можем его открыть и посмотреть, плагинов в нем очень много. Так что не нужно беспокоиться об экологической среде Flutter.

адрес гитхаба: GitHub.com/solid O/awes…

alt

В настоящее время Ali Group начала использовать Flutter для разработки, например, Xianyu, который мы часто используем, основные модули разрабатываются с помощью Flutter. Позвольте мне дать вам другую картинку, эти эффекты разработаны Flutter.

Официальный сайт Flutter предоставляет намshowcase, Заинтересованные партнеры могут щелкнуть ссылку ниже для просмотра.

Адрес витрины:GitHub.com/solid O/awes…

Маленькие друзья, поторопитесь и садитесь в машину, давайте вместе освоим этот новый навык.

Раздел 02: Среда разработки Flutter для сборки версии для Windows

Как старая программа, мне все еще нравится разрабатывать на Windows.Хотя компания использует MacOS для разработки, это также увеличит стоимость вашего обучения, поэтому мы сосредоточимся на окнах, чтобы объяснить. Установка на окна также относительно проблематична.

Специальное примечание: если вы все еще не можете преодолеть стену, выходите в Интернет с научной точки зрения. Тогда сначала перестаньте учиться, потому что вы не можете успешно установить его, сначала изучите эти вещи, вы можете открыть Google, а затем вернуться, чтобы учиться более эффективно.

Основные требования системы

  • **Операционная система:**Должна быть установлена ​​64-разрядная операционная система выше Windows7. (В целом этого достаточно)
  • **Дисковое пространство: **Больше, чем 3G, хотя официально говорят, что 400M, но вам также необходимо установить Android Studio и виртуальную машину, так что по крайней мере 3G или около того, если он может достичь 5G, это лучше (удовлетворенные требования для нескольких виртуальных машин).
  • Требуется среда Git: Flutter нуждается в поддержке среды git, так что это тоже обязательно.Как интерфейс, это обязательный инструмент, поэтому в этой статье я не буду учить вас его устанавливать.

Установка среды JAVA

Поскольку мы хотим сделать нативное приложение и оно основано на Android, нам все равно нужно установить среду JAVA.Это первый шаг, который я делаю, когда получаю новую систему. Это эквивалентно тому, что вы нажимаете программное обеспечение, вам не нужно слишком много думать.

Адрес загрузки среды JAVA:

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Этот адрес изменится с обновлением Java. Если он изменился, выполните поиск на Baidu.java下载Или загрузите прямо с официального сайта Java.

alt

Сначала щелкните красный кружок, а затем выберите версию в зависимости от того, является ли ваша система 64-разрядной или 32-разрядной.У меня здесь 64-разрядная версия, поэтому выберите версию x64 внизу.

После завершения загрузки установите его, и вы можете сразу перейти к следующему шагу. Я обычно устанавливаю на системный диск, то есть на диск C.

После завершения установки войдите в терминал (командная строка)java, появится результат, показанный на рисунке ниже, что означает, что установка прошла успешно.

alt

Загрузите и установите FlutterSDK

  1. Перейдите на официальный сайт, чтобы загрузить установочный пакет Flutter, адрес загрузки:flutter.IO/fast-archive…

(Этот официал будет часто меняться, если он недоступен, пожалуйста, сообщите мне, и я внесу изменения.) Я выбрал версию 0.9.4.

  1. Разархивируйте установочный пакет zip по пути, по которому вы хотите установить Flutter SDK (например:E:\fluter\flutter; Обратите внимание, не устанавливайте флаттер по пути, требующему высоких разрешений, например, C:\Program Files\, это не обязательно должно быть таким же, как у меня, просто установите его в соответствии с вашими предпочтениями).

  2. в каталоге установки Flutterflutterнашел под файломflutter_console.bat, дважды щелкните, чтобы запустить и запустить командную строку флаттера.Затем вы можете запустить команду флаттера в командной строке флаттера.

  3. настроить环境变量, выполнение Flutter нужно сетевое.В силу бытовых соображений нужно задать переменные окружения (стена хорошая, этот шаг можно пропустить. В видео есть конкретные пояснения)

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  1. Если вы хотите выполнить в любом местеFlutterКоманда, вам необходимо настроить каталог Flutter SDK на запись пути в переменной среды. (Также смотрите видео)

Тест с доктором Flutter

введите в терминалеflutter doctor, вы можете получить результат, аналогичный приведенному ниже.

Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

На этом этапе вы получите немного больше x, чем это, потому что мы еще не установили его.Android studioТогда следующим шагом будетAndroid Studioустановка.

Установка Android Studio.

На самом деле, предыдущие относительно просты, и на этом шаге начинается отнимать время. Потому что, когда вы устанавливаете Android Studio, вам нужно загрузить много пакетов на веб-сайте Google, но Google заблокирован стеной, поэтому это занимает больше времени. Я надеюсь, что мои друзья могут быть немного терпеливы и установить его дважды, если это не так. т работать.

  1. скачатьAndroid Studio: Вы можете скачать его прямо с официального сайта. ссылка на скачивание:developer.android.com/После входа потяните вниз, а затем увидите следующий интерфейс, щелкните красный кружок для загрузки.

alt

  1. Установите программное обеспечение Android Studio: Эта установка является почти следующим шагом.Если вы действительно не можете, я дам вам более подробное руководство.Блог Woo Woo.cn на.com/scared to/afraid…, (нужно отметить, что когда дело доходит до картинки ниже, она станет очень медленной, заходил в гугл скачивать много пакетов, я качал около 30 минут)

alt

  1. Откройте программное обеспечение Android Stuido, затем найдите конфигурацию плагина и найдите плагин Flutter.

altПоявится изображение выше, нажмите на серединуSearch in repositories, а затем нажмите «Установить».altПосле завершения установки вам необходимо перезапустить программное обеспечение Android Studio.

Установить сертификат Android

После установки Android Studio снова откройте терминал (командную строку) и введитеflutter doctor, В это время x будет значительно уменьшен, но вы все равно столкнетесь с 1-2, одна из которых заключается в том, что сертификат не установлен. Чтобы установить сертификат, просто выполните следующую команду в терминале.

flutter doctor --android-licenses

Затем вам будет предложено выбрать Y/N, не стесняйтесь, всегда выбирайте Y, вы можете установить сертификат. (Это все много на английском, я не понимаю, что это такое)

Среда разработки Windows здесь почти установлена, но не радуйтесь, на следующем уроке мы установим виртуальную машину и запустим ее на виртуальной машине, возможно, у вас возникнет много неприятностей. (Если вы будете следовать дальше, не забудьте закончить этот урок, прежде чем продолжить)

Раздел 03: Среда разработки Flutter для сборки версии для Mac

Потому что моя компания использует компьютер Mac, но класс, записанный дома, не Mac. Так что этот раздел в тексте, но я постараюсь быть максимально подробным. Надеюсь, вы сможете создать среду Flutter на Mac, прочитав статью.

Требования к системной среде

Поскольку Flutter — это новый фреймворк, у него все еще есть определенные требования к системе.

  • MacOS (64-разрядная версия)
  • Место на диске: более 700 МБ, если вы включаете инструменты редактирования, такие как Android Studio, постарайтесь превысить 3G.
  • Инструменты с номером команды: bash, mkdir, rm, git, curl, unzip, которые могут использоваться для приготовления этих команд.

Примечание: Как правило, вы загружаете pit в команде brew. Многие системы Mac не имеют этого установленного. Вы можете установить его. Поскольку это мало связано с этими знаниями, я не буду описывать процесс. Если у вас есть проблемы, просто нажмите ссылку, чтобы научиться устанавливать.

Научитесь устанавливать brew:сегмент fault.com/ah/119000001…

Загрузите пакет Flutter SDK

С официального сайта качать рекомендуется здесь.Ландшан завис, и скорость не медленная.

URL-адрес:flutter.IO/setup-MA, потому что…

После ввода URL-адреса перетащите его вниз, а затем увидите содержимое на картинке, щелкните красное поле для загрузки.

alt

Если это также проблематично для вас, вы можете напрямую щелкнуть ссылку ниже:

Нажмите, чтобы скачать напрямую:storage.Google APIs.com/flutter_inf…

Это станет недействительным при обновлении версии, поэтому не рекомендуется его использовать.

Настроить переменные среды

После загрузки сжатого пакета найдите место для его распаковки. Это расположение важно, поскольку оно используется при настройке переменных среды ниже. Например, если вы настроите его на папку приложения в корневом каталоге.

1. Откройте терминал (мне это писать не нужно), используйте vim для настройки переменных окружения, команда выглядит следующим образом:

vim ~/.bash_profile

Добавьте строку кода в открытый файл, что означает, что команду конфигурации flutter можно использовать где угодно.

export PATH=/app/flutter/bin:$PATH

Совет: вам нужно написать эту строку команд в соответствии с местом, куда вы распаковали сжатый пакет.Написанный путь — это ваш путь, который может не совпадать со статьей.

После завершения настройки необходимо использоватьsourceПерезагрузите команду, конкретная команда выглядит следующим образом:

source ~/.bash_profile

После завершения этого, даже если наша установка флаттера завершена, ее еще нельзя разрабатывать. Вы можете использовать команду, чтобы проверить, завершена ли установка.

flutter -h

Появится следующий результат, указывающий на то, что наша установка прошла успешно.

alt

Проверьте среду разработки

На данный момент мы установили Flutter, но у нас еще нет среды разработки. Разработка также требует поддержки большого количества программного обеспечения и плагинов, так какие же плагины и программное обеспечение нужны? Мы можем использовать команду, которую Flutter предоставляет нам для проверки:

flutter doctor

alt

Если у вас хороший английский, вы должны быть в состоянии легко прочитать результаты теста выше, есть много элементов, которые не сдаются. Нам нужно устанавливать и устанавливать результаты тестов один за другим, пока среда разработки не будет удовлетворена. (Если стоит знак [!]x, значит, проверка данного банка не прошла, и нам необходимо установить или установить соответствующее ПО.)

Вполне возможно, что у вас не установлена ​​Android-студия, поэтому вам нужно сначала установить этот редактор, после установки вы, кстати, можете скачать Android SDK.

Адрес загрузки Android Studio:www.android-studio.org/

После открытия выберите соответствующую версию Mac, как показано ниже (с редакцией сайта она может немного отличаться)

alt

При загрузке Android SDK не забудьте встать на лестницу, иначе вы будете ждать до конца дня (желаю вам всего наилучшего).

Если он у вас установлен, первое, что нужно сделать, это разрешить протокол (android-лицензии). Способ разрешить это — запустить следующую команду в терминале:

flutter doctor --android-licenses

Затем, когда вас попросят ввести Y/N, вы можете пройти весь путь до Y (что это значит, я не читал внимательно, вероятно, это то же самое, что и следующий шаг установки программного обеспечения, вы можете не удастся, нажав N).

После того, как это не сделано, мы используемflutter doctorПосле тестирования вы увидите, что еще много крестиков. Вероятно, следующим образом:

  To install, run:
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ CocoaPods not installed.
    CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
    Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
    For more info, see https://flutter.io/platform-plugins
  To install:
    brew install cocoapods
    pod setup

На самом деле это, вероятно, означает, что нам нужно это программное обеспечение, и Flutter рекомендует использовать команду brew для его установки.

Мы можем ввести следующие команды прямо в терминале (приходится ждать некоторое время после каждого ввода, ожидая завершения установки пакета)

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

После их установки у меня ушло около полутора часов, у меня 100M волокно и лестница.

После того, как эта большая проблема будет решена, нам также необходимо установить плагин Flutter для Android Studio (возможно, он был установлен вами, если появится следующее приглашение, это означает, что вы его не установили)

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

Откройте программное обеспечение Android Stuido, затем найдите конфигурацию плагина и найдите плагин Flutter.

alt

Появится изображение выше, нажмите на серединуSearch in repositories, а затем нажмите «Установить».

alt

После завершения установки вам необходимо перезапустить программное обеспечение Android Studio.

Когда я это делаю, среда в порядке. Не удается найти только одно отладочное устройство. Поскольку у меня нет аппаратного обеспечения мобильного телефона для отладки, появляется это приглашение, не беспокойтесь об этом.

[!] Connected devices
    ! No devices available

Конфигурация Pub Source

Если у вас нет ладдера по известной всем причине, вам также необходимо настроить источник Pub в переменной окружения, иначе вы не сможете его использовать.

бегать:

vim ~/.bash_profile

Добавьте две строки конфигурации

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Перезагрузить переменные среды

source ~/.bash_profile

Я надеюсь, что все смогут установить его успешно Это только мой процесс установки, и я не могу гарантировать, что все будет правильно, но я стараюсь подробно описать процесс сборки моего Mac, надеясь помочь фанатам Flutter.

Раздел 04: Установите виртуальную машину AVD. Работает Flutter.

После установки базовой среды откройте Android Studio, чтобы создать новый проект Flutter. Конечно, если у вас есть мобильный телефон (настоящий телефон) для предварительного просмотра эффекта, это лучше всего, но для нужд горячих обновлений и лекций, преследуемых нашим интерфейсом, нам все равно нужно построить виртуальную машину.

Новый проект Flutter в студии Android

Открываем Android Studio, появится следующий интерфейс, выбираем второй пункт, создаем новый проект Flutter.

alt

(Если вы создаете новый проект в первый раз, он может быть немного медленным. Это может быть связано с компьютером с техническим жиром 700 юаней. Пожалуйста, игнорируйте это предложение.)

Когда откроется второе окно, выберите первый вариантFlutter Application(флаттер-приложение).

alt

После того, как этот шаг будет выполнен, система автоматически создаст для нас проект Flutter (процесс создания нового проекта также очень медленный, для загрузки gradle нужно идти в Google, эту штуку легко скачать и потерпеть неудачу, если она не получается, можно попробовать несколько раз).

alt

Если вы дойдете до этой точки, придерживайтесь ее, и вы добьетесь успеха в кратчайшие сроки.

Установить виртуальную машину AVD

  1. Теперь нам нужна виртуальная машина для запуска нашей программы, вы можете нажать верхнее меню в Android Studiotool -AVD Managerопции.
  2. Появится новое меню, выберитеCreate Virtual Device....., Если вы не создали виртуальную машину, эта опция находится посередине диалогового окна (у меня должно быть такое же, как у меня на картинке).

alt3. Выбираем тип виртуальной машины, можно выбрать по желанию, я выбралNexus 5x. (Если у вас маленький экран, выбирайте виртуальную машину с маленьким экраном)alt

  1. Выберите систему, попробуйте выбрать последнюю здесь, я выбралAndroid 9.0После выбора системы это еще один долгий процесс ожидания.

  2. После установки нажмите кнопку Пуск, чтобы запустить виртуальную машину (при первом запуске необходимо установить систему, что будет медленнее).После запуска отображается следующий рисунок.

alt

Пусть флаттер бежит

После запуска виртуальной машины вы можете нажатьdebugкнопку, чтобы запустить программу Flutter. Если вам повезет, ваша программа Flutter запустится после компиляции. (Вероятность такого везения очень мала, всегда будут небольшие ошибки, здесь я приведу две распространенные ошибки).

alt

Ошибка при запуске разрешения ошибок Gradle

При отладке проекта наиболее распространенной ошибкой должно быть что-то вроде следующего.

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.

Причина этой проблемы до сих пор уникальная проблема в Китае.Решение - смена ссылки Али.

Первый шаг: изменить каталог Android в проектеbuild.gradleфайл, удалите строки google() и jcenter(). Перейдите по ссылке Али.

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

Полный код:

buildscript {
    repositories {
        //  google()
        //  jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Обратите внимание, что две части были изменены, а не одна.

Шаг 2. Измените пакет SDK Flutter.flutter.gradleфайл, этот каталог зависит от того, где хранится ваш SDK. Например, если я помещу его в каталог Flutter на диске D, путь будет таким.

D:\Flutter\flutter\packages\flutter_tools\gradle

Откройте файл для модификации, и измените код следующим образом (на самом деле его можно изменить на путь Али).

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

Затем снова отладьте, и он может в основном запуститься.

Другая ошибка заключается в том, что аппаратное обеспечение не запускает графический процессор, и необходимо загрузить и установить программу.Эта подсказка очень понятна и не будет вводить слишком много.

Раздел 05: Как играть с Flutter в VSCode

Я использую VSCode в течение нескольких лет. Я помню, что начал использовать VSCode, как только он вышел. Лично мне не нравится использовать Android Studio для разработки. Я чувствую, что это слишком тяжеловесно (мой компьютер за 700 юаней очень тяжело бегать). Поэтому мы должны найти способ разработки с помощью VSCode. К счастью, в VSCode уже есть плагин Flutter, и он отлично работает.

VSCode устанавливает плагин Flutter

Откройте интерфейс плагина Flutter VSCode, а затем введите в поле поиска с помощьюFlutter, первый — это плагин Flutter. нажмитеinstallЕго можно установить (подробнее см. рисунок ниже).

alt

После завершения установки необходимо перезапустить VSCode. Некоторые друзья обязательно спросят, использовать его или нетDartПлагин на самом деле установлен, но после установки плагина Flutter Dart также установил его за нас, поэтому нам не нужно устанавливать его самостоятельно.

В это время программу Flutter можно написать, но места для предпросмотра нет, то есть виртуальная машина не включена.

Одна команда для быстрого запуска виртуальной машины

Теперь, если вы хотите запустить виртуальную машину, вам нужно открытьAndroid Studio, а затем открыть виртуальную машину AVD, мой компьютер должен ждать около 2 минут (кроме локального компьютера тирана), я все равно не могу его принять, это совершенно не соответствует духу гика. Давайте воспользуемся командой или создадим пакетный файл, чтобы напрямую запустить виртуальную машину AVD, чтобы вам не пришлось ждать две минуты для запуска.Android Studio.

Включение виртуальной машины требует двух шагов:

  1. Открытьemulator.exeЭта программа, вы можете ловко использовать инструмент поиска Windows для поиска.
  2. Откройте виртуальную машину, которую вы установили, и вам нужно ввести имя виртуальной машины, которое вы установили во время пакетной обработки.

Конкретные шаги заключаются в следующем:

  1. создать новыйxxx.batФайл на рабочий стол, xxx означает, вы можете назвать его сами, вы можете назвать его как хотите. меня зовут сюдаEmulatorRun.bat.
  2. найтиemulator.exeПуть к файлу, найденный путь вставьте в bat файл (как показано на рисунке).

altОбычно вы найдете два файла emulator.exe, один находится в каталоге инструментов, а другой — в каталоге эмулятора, мы выбираемemulatorЭтот в каталоге, скопируйте его путь.

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe

(Особое примечание, ваш и мой, скорее всего, отличаются, вам нужно скопировать путь на i-м компьютере, не копируйте сюда код)

  1. ОткрытьAndroid Studioи посмотрите на имя виртуальной машины AVD (как показано).

altЕсли вам неудобно вводить и вы боитесь ошибиться, вы можете нажать кнопку пера за картинкой, чтобы войти в режим редактирования и скопировать имя.alt

  1. Затем согласно скопированному имени введите bat-файл в следующую форму.
C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28

После сохранения дважды щелкните bat-файл, чтобы быстро открыть виртуальную машину.

Объяснение параметра:

  • -netdelay none: установить время сетевой задержки симулятора, по умолчанию нет, то есть задержки нет.
  • -netspeed full: установите значение ускорения сети, full означает полную скорость.

флаттер бег открывает предварительный просмотр

Теперь доступен и симулятор, а также VSCode поддерживает разработку Flutter.Теперь вы можете открыть терминал прямо в VSCode, а сочетание клавишctrl+~, затем введите следующую команду в терминал.

flutter run

После небольшой компиляции наша программа будет запущена (как показано на рисунке).alt

На данный момент среда разработки, подходящая для фронтенд-программистов, наконец-то создана.В начале следующего занятия мы официально изучим знания по написанию кода Flutter.

Раздел 06: Написание программы HelloWorld

После настройки среды принято писать программу HelloWorld.В этом уроке мы будем использовать простейшую структуру для написания HelloWorld и познакомим с соответствующим синтаксисом Dart.

Общий код HelloWorld

Давайте быстро напишем простейшую структуру.Этот интерфейс содержит только две части, синюю полосу шапки заказа и содержимое средней области экрана. (см. код ниже)

Этот код написан на根目录\lib\main.dartфайл, это основной файл Flutter.

import 'package:flutter/material.dart';
//主函数（入口函数），下面我会简单说说Dart的函数
void main() =>runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context){
    //返回一个Material风格的组件
   return MaterialApp(
      title:'Welcome to Flutteraa',
      home:Scaffold(
        //创建一个Bar，并添加文本
        appBar:AppBar(
          title:Text('Welcome to Flutter'),
        ),
        //在主体的中间区域，添加一个hello world 的文本
        body:Center(
          child:Text('Hello World'),
        ),
      ),
    );
  }
}

После написания откройте терминал и запуститеflutter run , подождите некоторое время, вы увидите отображение в виртуальной машинеHello WorldСодержание.

alt

Возможно, вы недостаточно знаете о приведенном выше синтаксисе, но вам не нужно паниковать, мы объясним его по частям, поэтому давайте сначала посмотрим на функции в Dart.

Синтаксис Dart Функция Функция

Dart — это объектно-ориентированный язык, даже функции являются объектами и являются объектами типа Function. Это означает, что функции можно присваивать переменным или передавать в качестве аргументов другим функциям. Конечно, вы также можете вызвать такую ​​функцию, как JavaScript.

Например, мы пишем вторую строку в Hello World, которая является функцией.

void main() =>runApp(MyApp());

Поскольку в теле этой функции всего одна строка кода, ее можно использовать напрямую.=>опустить{}, можно использовать только тогда, когда в теле функции есть только одна строка, в противном случае используйте фигурные скобки.

(ps: Изучая грамматику Dart, вы должны помнить одну вещь. Все в Dart является объектом, включая числа и функции... время пришло)

StatefulWidget и StatelessWidget

  • StatefulWidget: виджет с изменяемым состоянием, то есть вы можете изменить его в любое время, когда используете приложение, например, наш общий индикатор выполнения, который постоянно меняется в зависимости от хода выполнения.
  • StatelessWidget: виджет с неизменяемым состоянием, то есть вы не можете изменить его при использовании, например фиксированный текст (он будет там после того, как вы его напишете, и не изменится, когда вы умрете).

Этот код HelloWorld наследует неизменяемый виджетStatelessWidget.

Как выполнить горячую загрузку в VSCode

Один из минусов написания Flutter с помощью VSCode заключается в том, что вам придется вручную загружать и обновлять приложение, Лично мне кажется, что это снизит эффективность работы как минимум на 10%.

когда мы бежимflutter runВ будущем появится подсказка красным текстом, объясняющая, что мы можем сделать.

To hot reload changes while running, press "r". To hot restart (a
nd rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is
available at: http://127.0.0.1:64590/
You can dump the widget hierarchy of the app (debugDumpApp) by pressing "w".
To dump the rendering tree of the app (debugDumpRenderTree), press "t".
For layers (debugDumpLayerTree), use "L"; for accessibility (debugDumpSemantics), use "S" (for traversal order) or "U" (for inverse hit test order).
To toggle the widget inspector (WidgetsApp.showWidgetInspectorOverride), press "i".
To toggle the display of construction lines (debugPaintSizeEnabled),
press "p".
To simulate different operating systems, (defaultTargetPlatform), press "o".
To display the performance overlay (WidgetsApp.showPerformanceOverlay), press "P".
To save a screenshot to flutter.png, press "s".
To repeat this help message, press "h". To detach, press "d"; to quit, press "q".

Рассмотрим несколько ключевых моментов:

  • Клавиша r: горячая перезагрузка после нажатия, даже если она перезагружается.
  • Клавиша p: отображение сетки, это может быть хорошим пониманием макета, очень полезно в работе.
  • Клавиша o: переключение режима предварительного просмотра между Android и iOS.
  • Клавиша q: выход из режима предварительного просмотра отладки.

Они обычно используются, а остальные команды мы объясним позже.

Если вы считаете, что это слишком много хлопот, мы можем включить режим отладки, и тогда мы можем добиться настоящей горячей перезагрузки (сохраняем, эффект сразу изменится), но иногда довольно раздражает сообщать об ошибках. (Картинка ниже в режиме отладки)

alt

Этот урок является первым уроком для нас, чтобы начать писать код.Эта базовая структура очень важна.Друзья могут попрактиковаться еще несколько раз, чтобы хорошо запомнить базовую структуру.

Первый сезон подошёл к концу, и я надеюсь, что мои друзья смогут создать окружение. Затем мы начнем второй сезон видео и начнем объяснять основные компоненты Flutter. Надеюсь, вы продолжите смотреть.

Обучающая дискуссионная группа, приглашаем присоединиться

Обучение и обсуждение QQ группа: 674639629 (тыс. человек)

Групповой вопрос: Какой компанией является Flutter?

Групповой ответ: гугл

Список видео:

  1. Раздел 1: Описание курса, полезная чепухаV.QQ.com/small/afraid/ah 078…
  2. Раздел 2: Знакомство с FlutterV.QQ.com/small/afraid/078…
  3. Раздел 3: Среда разработки Flutter для сборки версии для WindowsV.QQ.com/small/afraid/small 078…
  4. Раздел 4: Установка виртуальной машины FlutterV.QQ.com/small/afraid/также 078…
  5. Раздел 5: Написание кода Flutter в VSCodeV.QQ.com/small/afraid/afraid 078…
  6. Раздел 6: Первая программа HelloWorld на FlutterV.QQ.com/small/afraid/small 078…

bilibili видео адрес:

Адрес полного комплекта:вооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Пожалуйста, нажмите, чтобы подписаться, второй сезон скоро начнет обновляться......

Категории