Как создать flutter проект в android studio
Перейти к содержимому

Как создать flutter проект в android studio

  • автор:

Как создать 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 в Android Studio

Для упрощения поиска нужного плагина мы можем ввести в поисковую стоку слово «Flutter», и первый результат будет как раз тем, который надо установить. При установке плагина также отобразится окно с предложением установить плагин для Dart. Также нажмем на ОК для его установки:

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

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

После перезагрузки на стартовом экране в Android Strudio мы можем увидеть кнопку New Flutter Project :

Создание проекта Flutter в Android Studio

Нажмем на эту кнопку для создания проекта под Flutter.

В качестве альтернативы для создания проекта в студии можно перейти в меню к пункту File -> New -> New Flutter Project :

Flutter Project в Android Studio

Далее нам откроется окно создания нового проекта. В левой части выберем пункт Flutter , а в центре в поле Flutter SDK path укажем путь к Flutter SDK:

Создание проекта Flutter in Android Studio

На следующем окне укажем ряд настроек проекта:

Настройка проекта Flutter в Android Studio

  • В поле 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 в Android Studio

Созданный проект будет иметь ту же самую структуру, что был создан в прошлой теме в консоли с помощью команды flutter create . В центре студии будет открыт файл main.dart , который содержит собственно код приложения.

Подключим к компьютеру устройство Android (или воспользуемся эмуляторами) и в панели Android Studio нажмем на зеленую стрелочку для запуска приложения.

Отладка приложения на Flutter на Android

Подобным образом в Android Studio можно запускать проект и под другие «устройства», например, под web. Для этого лишь нужно выбрать соответствующее устройство в панели инструментов:

#4 – Создание Flutter проекта

#4 – Создание Flutter проекта

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

Видеоурок

Полезные ссылки:

  • Скачать Андроид Студио ;
  • Flutter SDK .

Создание программы

Создать проект на Flutter можно используя разные текстовые редакторы. В ходе курса мы используем редактор Андроид Студио, так как он сразу же предоставляет возможность запустить виртуальное устройство.

На самом деле, то вести разработку можно и в других программах, к примеру, в Visual Studio. Программа Андроид студио нам требуется лишь для одной обязательной вещи – для создания и запуска виртуального устройства.

При создании новых проектов вам всегда нужно указать Flutter SDK. Скачать его можно с их официального веб сайта .

Тестирование программ

Тестировать Flutter проект можно тремя разными способами:

  1. Тестирование проекта на Андроид
  2. Тестирование проекта на iOS
  3. Тестирование проекта в веб браузере

Если вы хотите протестировать проект на телефоне, то сперва нужно установить эмулятор на компьютер. Для 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 — это мощный фреймворк, который может помочь вам с легкостью создавать высококачественные мобильные приложения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *