Побудуйте крос-платформні мобільні програми з флатіром Google

Sep 13, 2025
Як

Протягом багатьох років існує численні перехресні платформні мобільні рамки, з постійними вдосконаленнями до досвіду розробника та продуктивності. Шукати Google Це нове доповнення до упаковки, і особливо цікаво, тому що, а не за допомогою JavaScript "Bridge", як багато рамків (таких як реагує рідний).

Ви можете дізнатись трохи про те, як він працює у вступному відео нижче, або читайте на покрокові посібники, щоб почати роботу з тремтінням. Для отримання додаткової поради подивіться на нашу колекцію навчальних посібників Як створити додаток . Або, якщо ви будуєте сайт, виберіть a Веб-будівельник і веб хостинг Сервіс від наших довідників. Не задоволений вашим зберіганням? Ось деякі хмара зберігання Варіанти.

У цьому підручнику ми поговоримо про те, як налаштувати Flutter і вивчити основи будівельних додатків за допомогою рамки, використовуючи MacOS для нашого розвитку. Ми припустимо, що ви запрограмовано раніше і знаєте, як використовувати оболонку Bash, але не може бути розробити для мобільних пристроїв.

01. Отримати налаштування

Вам потрібно буде завантажити та встановити кілька речей, перш ніж ви зможете використовувати Flutter:

  • Xcode для підтримки iOS
  • Android Studio для підтримки Android
  • Android SDK (завантаження через студію Android після створення нового проекту)

Після того, як ви маєте все це, запустіть XCode та Android Studio, встановіть додаткові компоненти, які вони пропонують та створюють новий проект, щоб переконатися, що вони працюють.

Тепер ви готові почати роботу з тремтінням. Завантажити Flutter sdk . Витягніть його, де б ви не хотіли, щоб він буде встановлений. Нам потрібно оновити наш шлях, тому макас може виявити, де б ви не закликали. Відкрити (або створити) $ Home / .bash_profile : 

sudo atom $HOME/.bash_profile

Тепер додайте каталог Flutter / Bin до вашого $ Шлях : 

export PATH=/Users/simon/dev/flutter/bin:$PATH

Запустіть команду оболонки, щоб оновити профіль Bash: 

source $HOME/.bash_profile

Тепер ми можемо почати використовувати Flutter Cli. Перше, що потрібно зробити, це переконайтеся, що у вас є найновіша версія: 

flutter upgrade

02. Виправити будь-які проблеми

Одного разу це зробити, Flutter пропонує зручний діагностичний інструмент, який перевірить, чи правильно встановлюється все, що потрібно встановити та налаштовано. Це дійсно корисно: 

flutter doctor

Візьміть увагу на те, що лікар каже вам і відповідає на будь-які проблеми, які виникають. Можливо, вам доведеться запустити лікаря пару разів, щоб отримати додатковий відгук і діяти на ньому.

Після того, як інструмент буде задоволений Flutter, Android ToolChain, IOS ToolChain та Android Studio, ви добре їхати. Не турбуйтеся про підключені пристрої.

XCODE може вимагати деяких додаткових кроків у оболонці, щоб отримати його повністю налаштування: 

 sudo xcode-select --switch /applications/xcode.app/contentents/developer
brew install --head libimobiledevice
brew install ideviceinstaller
Заготовка встановити какаподи
Pod Setup

І студія Android часто потребує ліцензійної угоди: 

 Flutter Doctor --android-Licenses

03. Знайдіть IDE і запустіть новий проект

Тепер налаштовано Flutter, ви захочете IDE для роботи. Є плагіни доступні для Android Studio та Intellij. Ми збираємося з кодом VS, який також має свій власний плагін Flutter.

Запустіть код та натисніть кнопку Перегляд & gt; Командна палітра. Введіть "Встановити" та виберіть розширення: Встановіть дію розширення. Пошук "Flutter" та встановіть плагін Flutter. Після завершення, перезапустіть код VS.

Тепер ми готові почати розвиватися. Запустіть новий проект через палітру команди, вибравши Flutter: Новий варіант проекту. Назвіть свій проект, виберіть, де зберегти його, і код не буде викликати Flutter, щоб створити новий проект.

04. Налаштування віртуальних пристроїв

Щоб перевірити наш проект, ми хочемо, щоб пристрій симулятор дозволяє нам на робочому столі. У нижньому правому куті коду VS (у блакитному барі), ви побачите щось, що говорить про пристрої. Якщо ви розробили для мобільних пристроїв, коли ви натиснете це, ви побачите свої симулятори, доступні в палітрі команди.

Якщо у вас немає симуляторів, запустіть наступне в терміналі, щоб відкрити IOS-симулятор вперше: 

 Відкритий -а-симулятор

Після того, як ви перезапустіть код IOS-симулятора.

Android є більш складним. Завантажте студію Android та в межах проекту Android, натисніть Інструменти & GT; Android & GT; Менеджер AVD. Виберіть Створити віртуальний пристрій.

Виберіть пристрій для емуляції - наприклад, Google Pixel 2. Натисніть кнопку Далі, і ви також можете вибрати системне зображення (I.E. Version), щоб завантажити. На наступній сторінці під емульованою продуктивністю виберіть Обладнання - Gles 2.0, щоб дозволити апаратну графічну прискорення на емуляторі. Закінчити процес.

Після створення віртуального пристрою в Studio Android, перезапустіть код VS, і ви побачите, що ваш емулятор Android з'являється разом з IOS-симулятором у списку пристроїв VS Code.

Тепер, якщо ви натиснете ніяких пристроїв, ви можете вибрати пристрій iOS або Android, а віртуальний телефон буде вогонь на робочому столі. Спробуйте з iPhone x симулятор.

04. Перевірте програму стартера

Тепер симулятор працює, ви можете випробувати стартовий додаток. Натисніть F5 або натисніть Debug & GT; Почніть налагодження. Додаток буде завантажувати на симулятор, і ви можете спробувати взаємодіяти з ним. Будьте терплячим, якщо це не відбудеться негайно, як це може зайняти деякий час.

Перш ніж ми зможемо зробити те ж саме на Android, нам потрібно встановити залежності CRADLE для нашого проекту (зараз невеликий нюанс Flutter). Перейдіть до кореневого каталогу проекту та запустіть: 

 Android / Gradlew

Тоді ви можете відкрити емулятор Android та запустити проект у режимі налагодження, коли ви зробили для iOS.

Відмінна особливість Flutter полягає в тому, що він підтримує "гаряче перезавантаження" - тобто ви можете змінити своє джерело і побачити зміни, відбиті в симуляторі відразу. В main.dart , Давайте зробимо пару змін до класу MyApp, а симулятор iPhone X працює: 

 PrimeSwatch: Colors.Green,
Головна: Нова MyHomepage (Назва: "Рецепт книги"), =

Ви повинні побачити зміни, як тільки ви заощаджуєте.

06. Досліджуйте систему віджета Flutter

Про що ми ще не говорили, - це мовна програмування Dart, яка використовує використання. Дарт - це об'єктно-орієнтована мова з синтаксисом C-стилю, розроблена компанією Google, і всі розробки Flutter використовує його. Якщо ви вже отримали певний досвід веб-або мобільного розвитку, то це не повинно бути повністю чужим для вас.

Все в тремтіння базується на віджетах, які є будівельними блоками програми. Якщо ви використовували реагування, перш за все, підхід Flutter дуже схожий, а віджети аналогічні компонентів. По суті, ваша ціла додаток може бути розкладена в ієрархію віджетів.

Це легко видно в межах MyApp клас. MyApp є Безтурботний (Це означає, що це незмінно). Точний побудувати () Метод, який ми перевищили, розповідає, як віджет повинен бути наданий. Це схоже на реагування рендеринг () функція.

Метод повертає a Матеріал Віджет, який представляє додаток, який використовує дизайн матеріалу Google. Це, у свою чергу, має декілька властивостей, які самі віджети: Themedata визначає візуальний стиль, який буде використовуватися Myhomepage є користувацький віджет, який визначається далі вниз main.dart файл, який містить тіло програми.

07. Редагувати вміст

На відміну від без громадянства MyApp , Myhomepage є державним віджетом. Це означає, що її поведінка визначається _Myhomepagestate Клас, що дозволяє зберігати інформацію та відповідно змінити, наприклад, коли ви натискаєте кнопку на додаток.

Ви можете побачити, що він зараз використовує багато вбудованих віджетів Flutter, що дозволяє обробляти загальні речі, такі як макет, кнопки та текстовий дисплей. Давайте зробимо деякі зміни до цього класу, щоб змінити те, що наш додаток представляє. 

 Class _MyHomePagestate розширює стан & lt; myhomepage & gt; {
 @veroveride
 Віджет Build (BuildContext контекст) {
   Поверніть нові ліси (
     AppBar: Новий AppBar (
       Назва: Новий текст (Widget.title),
     ),
     Тіло: новий контейнер (
       Прикраса: Нова BoxDecoration (Color: Colors.Brown 
),
       Дитина: Новий рентНК ()
     )
   );
 }
}

Ми відривалися від існуючого вмісту та замінив його коричневим віджетом контейнера, але нам також потрібно створити власний віджет, рент., Що буде поставлено в контейнер. 

 Клас-реформджування розширює безнадійний годинник {
 @veroveride
 Віджет Build (BuildContext контекст) {
   Список & lt; widget & gt; віджети = новий список & lt; віджет & gt; ();
   Повернення нових списків (діти: віджети);
 }
}

08. Завантажте деякі активи

Далі давайте завантажимо деякі активи з додатком, щоб ми могли додати їх до Перегляд віджет всередині Ревідт . Встановлено статичні активи для програми pubspec.yaml Під розділом "Flutter": 

 Активи:
   - img / breakfast.jpg
   - img / curry.jpg
   - img / pasta.jpg

Ми також створимо просту структуру даних у Main.dart, спарювання зображень зі струнами, щоб діяти як мініатюр та резюме для рецептів. 

 Var Recipes = {
   "сніданок.jpg": "Почніть день прямо з цим поживним сніданком",
   "pasta.jpg": "Wow ваші друзі, роблячи власну свіжу макарону",
   'curry.jpg': "Покажіть свої кулінарні навички з багатим каррі",
};

09. закінчити

Нарешті, давайте оновіть Ревідт Щоб побудувати список віджетів, що відображають рецепти. Ми використовуємо Image.astet Для завантаження статичних активів ми включили pubspec.yaml . 

 рецепти.Зобов'язав ((великий палець, підпис) = & gt; віджети.
       Новий контейнер (дитина:
         Нова підкладка (підкладка:
           Нові EdgeinSets.all (16.0), дитина:
             Новий Listtile (
               Провідний: image.astet ('img /' + великий палець, ширина: 80.0),
               Назва: Текст (підпис)
             )
           ),
           Прикраса:
             Нова BoxDecoration (
                 Кордон: новий кордон (
                     Нижня: Нова межі (колір: кольори. Броун)
                 ),
                 Колір: кольори.Brown 

             )
       )
     )
)

Сподіваюся, ви починаєте отримувати відчуття, наскільки тремтіння використовує віджети для побудови додатків. Спробуйте використовувати симулятор, щоб повернути пристрій. Макет Flutter автоматично вміщує зміни. Для порівняння спробуйте додаток на емуляторі Android.

Ця стаття була опублікована сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купувати Випуск 310 або підписатися .

Читати далі:

  • Отримайте голову навколо, реагуючи з цими п'яти чинниками
  • 11 Creative Free iPhone Apps для дизайнерів
  • Як спроектувати значки програми

Як - Найпопулярніші статті

Adobe XD: Як використовувати автоматичну функцію

Як Sep 13, 2025

(Зображення кредиту: Adobe) Незважаючи на те, що його пізній запис у..

Як додати шрифти в Photoshop

Як Sep 13, 2025

(Зображення кредиту: Adobe) Шрифти в Photoshop: Швидкі посилання ..

Як намалювати руку

Як Sep 13, 2025

(Зображення кредиту: Patrick J Jones) Навчаючись, як намалювати руку, як..

Побудувати прототипи з Adobe XD

Як Sep 13, 2025

(Зображення кредиту: майбутнє) У сучасному веб-сторінці та дизай..

Зрозумійте, що імпортування активів єдності

Як Sep 13, 2025

Єдність є однією з найпопулярніших ігрових двигунів у світі, відповід�..

Створіть ефект порталу в майя

Як Sep 13, 2025

Цей портальний ефект у докторі дивно був дуже особливим. Це було досит�..

Побудувати масштабовані відповідні компоненти

Як Sep 13, 2025

Всякий раз, коли ми говоримо про будівництво ремонту та масштабованих ..

Як спроектувати промо для уявного бренду

Як Sep 13, 2025

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

Категорії