Как создать flutter проект в android studio
Для разработки под Flutter нередко выбирается такая среда разработки как Android Studio . Хотя мы можем набирать код и в простейшем текстовом редакторе и компилировать его в консоли, но среда разработки существенно позволяет упостить процесс написания и построения приложения. Причем Android Studio позволяет создать приложения на Flutter не только собственно под Android, но и под другие поддерживаемые платформы.
Для работы с Android Studio ее естественно вначале надо установить. Инсталлятор можно загрузить по ссылке https://developer.android.com/studio.
По умолчанию Android Studio не поддерживает Flutter, поэтому нам надо установить соответствующий плагин. Для этого в Android Studio на стартовом экране выберем пункт Plugins (либо в открытой студии перейдем в меню File -> Settings и далее в открывшемся окне также выберем пункт Plugins ). И в панели плагинов найдем плагин Flutter :
Для упрощения поиска нужного плагина мы можем ввести в поисковую стоку слово «Flutter», и первый результат будет как раз тем, который надо установить. При установке плагина также отобразится окно с предложением установить плагин для Dart. Также нажмем на ОК для его установки:
После установки плагина необходимо будет перезагузить Android Studio.
После перезагрузки на стартовом экране в Android Strudio мы можем увидеть кнопку New Flutter Project :
Нажмем на эту кнопку для создания проекта под Flutter.
В качестве альтернативы для создания проекта в студии можно перейти в меню к пункту File -> New -> New Flutter Project :
Далее нам откроется окно создания нового проекта. В левой части выберем пункт Flutter , а в центре в поле Flutter SDK path укажем путь к Flutter SDK:
На следующем окне укажем ряд настроек проекта:
- В поле Project name дадим проекту какое-либо имя. Так, в моем случае он называется hello_app .
- В поле Project location можно изменить расположение проекта, если предложенное расположение по умолчанию не устраивает.
- В поле Description можно указать описание проекта
- В поле Project type указывается тип проекта. По умолчанию он имеет значение Application (то есть проект предназначен для создания приложения). Оставим это значение по умолчанию.
- В поле Organization можно задать название для пакета приложения. Можно оставить по умолчанию, а можно и изменить. Например, в моем случае это com.metanit .
- В поле Android language указывается язык для Android. Можно оставить значение по умолчанию — Kotlin .
- В поле iOS language указывается язык для платфомы iOS. Можно оставить значение по умолчанию — Swift .
- В поле Organization можно задать название для пакета приложения. Можно оставить по умолчанию, а можно и изменить. Например, в моем случае это com.metanit .
- В поле Platforms можно указать платформы, под которые будет создаваться проект. По умолчанию отмечены пункты Android и iOS, но можно выбрать и другие доступные платформы. Так, как видно выше на скриншоте, я также выбрал пункт «Web» для создания проекта под веб.
И затем после установки всех настроек нажмем на кнопку «Finish» для непосредственного создания проекта. Сразу после создания Android Studio откроет созданный проект:
Созданный проект будет иметь ту же самую структуру, что был создан в прошлой теме в консоли с помощью команды flutter create . В центре студии будет открыт файл main.dart , который содержит собственно код приложения.
Подключим к компьютеру устройство Android (или воспользуемся эмуляторами) и в панели Android Studio нажмем на зеленую стрелочку для запуска приложения.
Подобным образом в Android Studio можно запускать проект и под другие «устройства», например, под web. Для этого лишь нужно выбрать соответствующее устройство в панели инструментов:
#4 – Создание Flutter проекта
При разработке на Flutter требуется виртуальное устройство, где можно будет тестировать проекты. За урок мы скачаем все необходимое и создадим шаблонный проект. Дополнительно мы запустим проект на виртуальном устройстве.
Видеоурок
Полезные ссылки:
- Скачать Андроид Студио ;
- Flutter SDK .
Создание программы
Создать проект на Flutter можно используя разные текстовые редакторы. В ходе курса мы используем редактор Андроид Студио, так как он сразу же предоставляет возможность запустить виртуальное устройство.
На самом деле, то вести разработку можно и в других программах, к примеру, в Visual Studio. Программа Андроид студио нам требуется лишь для одной обязательной вещи – для создания и запуска виртуального устройства.
При создании новых проектов вам всегда нужно указать Flutter SDK. Скачать его можно с их официального веб сайта .
Тестирование программ
Тестировать Flutter проект можно тремя разными способами:
- Тестирование проекта на Андроид
- Тестирование проекта на iOS
- Тестирование проекта в веб браузере
Если вы хотите протестировать проект на телефоне, то сперва нужно установить эмулятор на компьютер. Для iOS он устанавливается вместе с программой Xcode. Для Андроид он устанавливается вместе с программой Android Studio.
В Андроид Студио можно создать виртуальное устройство на базе Андроди. В программе Xcode можно создать виртуальное устройство на базе iOS.
Весь код будет доступен после подписки на проект!Как создать свое первое приложение Flutter
Flutter – это открытая платформа, созданная Google, которая ориентирована на создание кроссплатформенных приложений. Flutter в первую очередь сфокусирован на iOS и Android, но также разрабатывает надежную поддержку настольных компьютеров.
Примечание: Приложения Flutter созданы на языке программирования Dart.
В этом мануале вы создадите свое первое приложение Flutter.
Требования
Для выполнения этого руководства нужно:
- Скачать и установить Flutter.
- Загрузить и установить Android Studio или Visual Studio Code. Android Studio – это интегрированная многофункциональная среда IDE с поддержкой Flutter. Visual Studio Code предлагает более легкую, но достаточно мощную поддержку.
- Рекомендуется также установить плагины для вашего редактора кода:
- Flutter и Dart для Android Studio.
- Flutter для Visual Studio Code.
Данный мануал был написан для Flutter 1.2.x, но обновлен для Flutter 1.22.2.
1: Создание нового проекта Flutter
Итак, вы установили Flutter и соответствующие зависимости (Android SDK или XCode в зависимости от вашего компьютера). Теперь можно создать новый проект Flutter.
Сначала откройте окно терминала, перейдите в каталог, в котором вы хотите запустить проект, и выполните следующую команду:
flutter create hello_flutter
Перейдите в новый каталог:
Откройте этот проект в редакторе кода и приступайте к работе.
2: Запуск проекта
Чтобы запустить проект Flutter в Visual Studio Code или Android Studio, рекомендуем ознакомиться с документацией.
В Visual Studio Code откройте Run and Debug, затем выберите Dart & Flutter из выпадающего списка, после чего выберите конфигурацию hello_flutter. Укажите симулятор (веб, iOS или Android) в строке состояния. Запустите приложение, нажав кнопку Start Debugging. После этого в симуляторе или браузере вы увидите свое новое демонстрационное приложение.
Если вы используете Android Studio, то он потребует указать устройство и выбрать конфигурацию.
3: Изучение кода
Итак, вы уже создали свое первое приложение Flutter и запустили его в эмуляторе! В этом разделе мы разберем часть сгенерированного кода.
Примечание: Стартовый код, сгенерированный flutter, является частью официальной кодовой базы Flutter и доступен по следующей лицензии.
Теперь откройте файл lib/main.dart в редакторе кода.
Раздел MyApp
Первая часть файла определяет раздел MyApp. Этот класс расширяет StatelessWidget:
import 'package:flutter/material.dart'; void main() < runApp(MyApp()); >class MyApp extends StatelessWidget < @override Widget build(BuildContext context) < return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); >> // .
Сначала код импортирует пакет Material из Flutter. Этот пакет придает нашему приложению вид Material Design и открывает последующий доступ к виджетам и функциям в стиле Material.
Затем код регистрирует MyApp в качестве основного виджета нашего нового приложения; это делается с помощью метода runApp.
Внутри класса MyApp мы возвращаем метод build типа Widget, который, в свою очередь, возвращает MaterialApp. MaterialApp содержит метаданные, такие как текущие ThemeData, название приложения, домашний маршрут и т.п.
Примечание: Использовать здесь MaterialApp не обязательно. Мы также можем использовать CupertinoApp (в стиле iOS) или пользовательский стиль с помощью WidgetsApp.
Раздел MyHomePage
Следующая часть файла определяет MyHomePage. Этот класс расширяет StatefulWidget.
// . class MyHomePage extends StatefulWidget < MyHomePage() : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); > // .
Последняя часть этого файла определяет _MyHomePageState. Этот класс расширяет State для виджета и метода сборки. Если вы когда-либо ранее работали с React, это должно вам напомнить JSX-метод render.
Одним из наиболее важных моментов, которые следует учитывать в приведенном выше примере, является тот факт, что мы переопределяем метод createState, чтобы настроить собственный способ управления состоянием:
// . class _MyHomePageState extends State < int _counter = 0; void _incrementCounter() < setState(() < _counter++; >); > @override Widget build(BuildContext context) < return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); > >
Следовательно, состояние _counter можно изменить с помощью setState(). Затем мы определяем метод сборки build, который создает Scaffold для нашего приложения, содержащего appBar и body.
При использовании MaterialApp класс Scaffold можно рассматривать как контейнер верхнего уровня. Он позволяет легко добавлять панели навигации, кнопки астатического действия, панели, селекторные отметки и многое другое.
Каждый раз, когда мы вызываем setState(), вместе с ним вызывается метод build виджета, таким образом обновляя представление и перерисовывая его с учетом нового состояния. Как можно видеть в нашем примере, этот вызов setState выполняется внутри FloatingActionButton через функцию onPressed: _incrementCounter.
Заключение
В этом руководстве вы научились создавать базовое приложение Flutter и исследовали сгенерированный программой стандартный код.
Теперь вы можете самостоятельно поэкспериментировать с приложением и изменить значение счетчика или текст.
Установка Flutter в Android Studio
Первый шаг — это загрузить Android Studio. Вы можете скачать его с официального веб-сайта Android Studio.
После того как вы скачали Android Studio, установите его в свою систему.
Устанавливаем Flutter SDK
Установка Flutter SDK — это второй шаг к началу разработки на Flutter.
Скачайте Flutter SDK
Первый шаг — загрузить Flutter SDK. Вы можете загрузить последнюю стабильную версию Flutter с официального веб-сайта Flutter.
Извлеките Flutter SDK
После загрузки Flutter SDK распакуйте его в папку в вашей системе. Например, в Windows вы можете извлечь его в папку C:\frameworks.
Устанавливаем плагины Flutter и Dart
После установки Android Studio вам необходимо установить плагины Flutter и Dart. Для этого перейдите в File -> Settings -> Plugins.
В окне плагинов перейдите на вкладку Marketplace и найдите «Flutter» и «Dart». Нажмите на кнопку Install, чтобы установить оба плагина.
После установке плагинов перезагрузите Android Studio
Настраиваем путь к Flutter SDK
После того как вы установили плагины Flutter и Dart, вам необходимо настроить путь к Flutter SDK. Чтобы сделать это, перейдите в File -> Settings -> Языки и фреймворки -> Flutter. В поле путь к Flutter SDK нажмите на кнопку «…» и выберите каталог, в который вы установили Flutter SDK. Нажмите на Ok, чтобы сохранить изменения.
Создаем новый проект Flutter
Теперь, когда вы настроили Flutter в Android Studio, вы можете создать новый проект Flutter. Чтобы сделать это, перейдите в File -> New -> New Flutter Project.
В новом окне проекта Flutter выберите вкладку Flutter и нажмите Next. В следующем окне введите название проекта, местоположение проекта и другие сведения о проекте. Нажмите на кнопку Finish, чтобы создать проект.
Запустите проект Flutter
После создания проекта Flutter вы можете запустить его на эмуляторе или физическом устройстве. Чтобы запустить проект, перейдите в меню Выполнить -> Запустить ‘main.dart’. Android Studio скомпилирует проект и запустит его на выбранном устройстве.
Заключение
Настройка Flutter в Android Studio — это простой и понятный процесс. Следуя инструкциям, описанным в этой статье, вы можете быстро настроить Flutter в Android Studio и приступить к разработке кроссплатформенных мобильных приложений. Flutter — это мощный фреймворк, который может помочь вам с легкостью создавать высококачественные мобильные приложения.