Как запустить flutter
После установки Flutter SDK создадим первое простейшее приложение.
Создание приложения на Windows
Прежде всего создадим для проектов Flutter каталог на жестком диске. Например, в моем случае это каталог C:\fluttersrc .
Откроем командную строку/консоль и перейдем к созданному каталогу с помощью команды cd . Далее введем следующую команду:
flutter create myapp
Данная команда создает в текущей папке проект под названием myapp .
В результате будет создан большой проект с довольно сложной структурой
Основные элементы структуры проекта:
- Папка .dart-tool — специальная папка, которая хранит информацию об используемых пакетах
- Папка .idea — специальная папка для Android Studio, которая содержит базовую конфигурацию
- Папка android содержит код и дополнительные файлы, которые позволяют связать прложение на Dart с Android
- Папка ios содержит код и дополнительные файлы, которые позволяют связать приложение на Dart с iOS
- Папка buid содержит файлы, создаваемые в результате процесса построения приложения
- Папка lib содержит собственно файлы приложения на языке Dart. Именно с этой папкой идет основная работа при создания приложения на Flutter
- Папка test предназначена для хранения файлов с тестами
- Папка web содержит код и дополнительные файлы для создания веб-приложения на Flutter
- Файл pubsec.yaml хранит конфигурацию проекта, в частности, пакет проекта, список зависимостей и т.д.
Этот проект уже содержит самый минимальный функционал, который мы можем запускать.
Для запуска и тестирования приложения мы можем использовать эмуляторы или реальные устройства. Для запуска веб-приложений на Flutter в качестве условных «устройств» используются браузеры. Для тестирования десктоп-приложений — текущий компьютер.
Для проверки наличия устройства для запуска проекта можно выполнить в командной строке/консоли следующую команду:
flutter devices
Так, на скриншоте можно увидеть, что у меня доступно для тестирования три «устройства». Первое — мобильное устройство Nexus 5X, которое предназначено для текстирования приложения под Android. А осстальные два устройства — Chrome и Microsoft Edge, предназначеные для тестирования веб-приложения. Следует отметить, что, как видно из скриншота, браузеру Google Chrome присвоена текстовая метка «chrome», а Microsoft Edge — метка «edge», а для Nexus 5X — «013a70d5bc970c2c». Эти метки позволят при запуске проекта заускать его на определенном устройстве. По умолчанию выбирается первое в списке устройство.
Запуск приложения на Android
Для использования мобильного устройства для тестирования на рабочую машину необходимо установить драйвер. Если ОС — Windows 10, то там, как правило, система сама может найти через центр обновлений драйвер и установить его. Если ОС Windows, то также необходимо установить пакет Google Usb Driver. Установить данный пакет можно через Android SDK Manager.
Кроме того, на мобильном устройстве необходимо включить режим разработки и возможность отладки по USB.
Для запуска проекта командной строке/консоли и перейдем к каталогу myapp с помощью команды cd . Далее запустим проект и для этого введем следующую команду:
flutter run
Обратите внимание, что компилировать и запускать приложение необходимо из папки проекта
В итоге будет скомпилирован пакет apk, который затем будет установлен на подключенном устройстве Android. Весь процесс может занять довольно много времени, особенно при первом запуске. В итоге на подключенном устройстве будет запущено приложение с содержимым по умолчанию:
Где определяется это приложение? В проекте в папке lib мы можем найти файл main.dart
По умолчанию он имеет следующее содержимое:
import 'package:flutter/material.dart'; void main() < runApp(const MyApp()); >class MyApp extends StatelessWidget < const MyApp() : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) < return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); >> class MyHomePage extends StatefulWidget < const MyHomePage() : super(key: key); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override State createState() => _MyHomePageState(); > class _MyHomePageState extends State < int _counter = 0; void _incrementCounter() < setState(() < // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; >); > @override Widget build(BuildContext context) < // This method is rerun every time setState is called, for instance as done // by the _incrementCounter method above. // // The Flutter framework has been optimized to make rerunning build methods // fast, so that you can just rebuild anything that needs updating rather // than having to individually change instances of widgets. return Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text(widget.title), ), body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: Column( // Column is also a layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug painting" (press "p" in the console, choose the // "Toggle Debug Paint" action from the Flutter Inspector in Android // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) // to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); > >
Здесь определен ряд классов на языке программирования Dart, которые собственно и создают приложение.
Запуск приложения на Web
Однако в проекте по умолчанию есть также поддержка для iOS и Web. Рассмотрим, как запустить проект для текстирования веб-приложения в браузере. Так, выше на скриншоте было видно, что у меня есть три «устройства». Однаим из них является Google Chrome, которому присвоено имя «chrome».Для этого введем команду:
flutter run -d chrome
То есть опять же вводится та же команда flutter run для запуска проекта. Только теперь с помощью флага -d указывается устройство, на котором будет запускаться проект. Этому флагу передается текстовая метка устройства — в данном случае «chrome» (то есть браузер Google Chrome), соответственно будет запускаться веб-приложение.
Соответственно, если бы я хотел запустить проект на Microsoft Edge, мне потребовалось бы указать соответствующую текстовую метку:
flutter run -d edge
При запуске проекта под Web запускается тестовый веб-сервер, на котором разворачивается приложение и затем запускается веб-браузер, который обращается к этому приложению. В итоге в браузере мы увидим практически тот же интерфейс с аналогичной логикой, что и на Android:
Перезагрузка приложения
Если проект уже ранее запущен с помощью команды flutter run , то можно изменить код приложения и с помощью ввода в командной строке символа «r» выполнить перезагрузку приложения (так называмый Hot reload). Однако надо отметиь, что перезагрузка не всегда можт срабатывать. В этом случае можно заново выполнить команду flutter run . Соответственно изменится и приложение:
Первое приложение на MacOS
Создание приложения на MacOS не будет сильно отличаться от соответствующего процесса на Windows.
Прежде всего создадим для проектов Flutter каталог на жестком диске. Например, в моем случае это каталог Documents\fluttersrc .
Откроем терминал и перейдем к созданному каталогу с помощью команды cd . Далее добавим путь к папке bin для текущего окна терминала с помощью команды:
export PATH="$PATH:[Путь к папке с Flutter SDK]/flutter/bin"
И затем введем команду для создания проекта:
flutter create myapp
Далее перейдем к каталогу myapp с помощью команды cd . Далее добавим путь к папке bin для ткущего окна терминала и запустим проект и для этого введем следующую команду:
Как создать свое первое приложение 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
В последнее время Гугл стал активно продвигать новую неведомую зверушку — Flutter. Компания заявляет, что за ним будущее. Это новый мобильный SDK предназначен для написания программ под Android, iOS, Web на языке Dart. У JetBrains с языком Kotlin такие же планы, поэтому непонятно, зачем нужен подобный зоопарк.
Я решил попробовать и взглянуть одим глазком на это чудо. Оказалось, что всё очень печально. Постоянно вылезают какие-то ошибки, баги, сообщения, предупреждения.
Установить Flutter можно на IDEA и на Android Studio. Сама установка не слишком сложная.
Запускаем студию, открываем File | Settings | Plugins. Выбираем Browse repositories…, ищем Flutter и запускаем установку. Дополнительно попросят разрешения на установку Dart.
После установки следует перезагрузить студию. Теперь мы можем создавать приложения на основе Flutter.
Выбираем File | New Flutter Project.
При первом запуске попросят указать путь к Flutter SDK (указывайте родительскую папку SDK, не нужно указывать папку bin. Потом путь будет подставляться автоматически.
Далее указываете дополнительные настройки. Я оставил без изменений.
С созданием первой программы проблем не возникло. Но при попытке запустить приложение, получал сообщение:
* Error running Gradle: Unable to download needed Android SDK components, as the following licenses have not been accepted: Android SDK Build-Tools 26.0.2 To resolve this, please run the following command in a Terminal: flutter doctor --android-licensesУказанный совет не помогал. Поиск в интернете показал, что это частая ошибка у многих программистов. Решение, которое мне помогло — открыть файл local.properties и указать правильный путь к SDK. Насколько я понял, такая проблема может возникнуть, если вы устанавливали Android SDK несколько раз. Например, Processing или Xamarin устанавливает свои версии SDK, даже студия у меня пыталась ставить SDK в свою папку по умолчанию, хотя я предпочитаю свой путь на другом диске.
На этом проблемы не закончились. Программа стала запускаться на китайском телефоне, но сразу же вырубалась. При этом LogCat не работал и не видел подключенное устройство, я не мог посмотреть на текст ошибки. Эмулятор отказался запускаться. Решил попробовать планшет Nexus 7 — запустилось.
На экране увидел кнопку FAB и текст, подсчитывающий число щелчков по кнопке.
Сам код находится в файле main.dart и кажется страшным с непривычки.
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget < // This widget is the root of your application. @override Widget build(BuildContext context) < return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run >Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); > > class MyHomePage extends StatefulWidget < MyHomePage() : super(key: key); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override _MyHomePageState createState() => new _MyHomePageState(); > class _MyHomePageState extends State < int _counter = 0; void _incrementCounter() < setState(() < // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; >); > @override Widget build(BuildContext context) < // This method is rerun every time setState is called, for instance as done // by the _incrementCounter method above. // // The Flutter framework has been optimized to make rerunning build methods // fast, so that you can just rebuild anything that needs updating rather // than having to individually change instances of widgets. return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: new Text(widget.title), ), body: new Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: new Column( // Column is also layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug paint" (press "p" in the console where you ran // "flutter run", or select "Toggle Debug Paint" from the Flutter tool // window in IntelliJ) to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: [ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); > >Поддерживается горячая перезагрузка Hot Reload по подобию InstantRun.
Если бы у меня был Мак и айфон, то мог бы также запустить этот код и для iOS. Но не судьба.
Первое впечатление довольно прохладное. Не впечатлило совсем.
Кстати, уже идёт подготовка к выпуску версии Dart 2. Обещают реактивный стиль, меньшее количество кода и бла-бла-бла.
Посмотрим, как будет развиваться новая платформа.
Дополнительное чтение
Easy and fast SDK for beautiful apps — Flutter — домашняя страница Flutter с примерами и документацией.
Как запустить flutter
Установка и настройка Flutter Flutter projects
Скачать актуальную версию Flutter SDK можно на официальном сайте фреймворка. Там же представлена подробная инструкция по его установке на разные операционные системы: Windows, macOS, Linux.
В частности, для начала работы нужно:
- Загрузить установочный пакет на устройство.
- Распаковать ZIP-архив и выбрать место установки.
Примечание: Flutter не рекомендуется устанавливать в директорию C:\Program Files\, поскольку она требует повышенных прав. - Запустить flutter doctor — команду, которая проверит правильность установки инструмента.
- Установить недостающие компоненты, если это необходимо.
- Настроить IDE.
- Протестировать работу Flutter.
В итоге вы получите: готовый к работе фреймворк Flutter, редактор исходного кода VS Code и Android Studio. Для сборки проекта на iOS, придется также установить macOS с Xcode, которые есть в свободном доступе.
Важно : для разработки на Flutter можно использовать разные редакторы. По-умолчанию, основным для фреймворка является VSCode, но нам кажется что Intellij IDEA будет немного удобнее. В дальнейшем вы сможете выбрать из этих двух, или любой другой, однако для создания первого проекта будем использовать «родной» VSCode.
После написания кода, мобильное приложение нужно сразу запустить и протестировать. Для этого нам понадобятся:
- Реальное устройство Android или iOS, подключенное к компьютеру и переведенное в режим разработчика.
- iOS Simulator — для запуска IOS-приложений на компьютере, при отсутствии физического устройства.
- Эмулятор Android — для запуска Android-приложений.
- Google Chrome — браузер для отладки.
Когда все готово и настроено, можно переходить к самому интересному — к созданию приложения.
Flutter projects
Инструкция: как запустить свой первый проект на Flutter Flutter projects
Запустите VS Code с установленным расширением Flutter, а затем откройте командную строку. Это можно сделать несколькими способами:
- Перейдите по пути Вид → Палитра команд .
- В macOS: нажмите сочетание клавиш Command-Shift-P .
- В Windows или Linux: нажмите сочетание клавиш Control-Shift-P .
Затем введите в командную строку текст: Flutter: New Application Project и нажмите Return .
Выберите папку для хранения проекта, и придумайте его название. Для примера, назовем приложение new_flutter_project . В течение нескольких секунд Flutter настроит проект в VS Code, после чего в редакторе откроется вкладка под названием main.dart .
Разберем структуру интерфейса.
В центральной части VS Code находится редактор исходного кода, в котором будет происходить основная часть работы. Слева расположена панель, в которой отображается структура всего проекта. Папки Android , iOS и Web содержат набор файлов, необходимых для развертывания проекта на каждой из этих платформ. В папке lib содержит документ main.dart и код, применимый к обеим платформам.
Папка Test необходима для тестирования проекта. Это важный этап в разработке любого приложения но, в рамках этого руководства, мы не будем затрагивать данную тему. Поэтому, при желании, эту папку можно удалить.
Flutter projects
Работаем с кодом Flutter projects
Замените код в main.dart на этот:
Затем, чтобы изменения вступили в силу их нужно сохранить. Для этого выполните команду: Файл → Сохранить. Также можно нажать сочетание клавиш Command+S — для mac OS, или Control+S для Windows или Linux.
В этом коде, для запуска приложения main мы используем => — оператор для однострочной функции.
Большая часть объектов во Flutter-приложении — это виджеты, которые находятся или не находятся в каком-то состоянии. В нашем случае, получившееся приложение представляет из себя обыкновенный виджет без сохранения состояния.
Запустим свой проект. Для этого в правом нижнем углу кликните на выбранную платформу, после чего откроется список всех доступных платформ, на которых приложение может быть запущено. У нас это:
- эмулятор Android;
- браузер Google Chrome.
Например, выберем Android. Дождавшись запуска эмулятора, нужно выполнить сборку и запуск проекта. Для этого нужно нажать F5 , или выполнить команду Отладка → Начать отладку . После этого откроется консоль отладки и начнется сборка приложения.
В правом верхнем углу появится красный баннер с надписью DEBUG. Он говорит о том, что приложение работает в режиме отладки.
Чтобы остановить приложение, нужно нажать на кнопку в форме красного квадрата, расположенную в верхней части интерфейса.
Для того, чтобы вернуться в Project Explorer, в панели инструментов VS Code выберите: View → Explorer.
AVADA MEDIA
Итог AVADA MEDIA
Поздравляем, сегодня вы создали свое первое, приложение на фреймворке Flutter. В следующих статьях мы углубимся в тему, и расскажем, как создавать разные виджеты, использовать HOT Reload — горячую перезагрузку, импортировать пакеты данных и поднимем другие важные темы.
Если вы хотите начать изучать Flutter, приглашаем на бесплатные курсы в AVADA MEDIA. Здесь вас ждут конструктивные видеоуроки, практика на реальных проектах и поддержка действующей команды разработки. Лучшие студенты будут приглашены на работу в нашей компании.
Создаем космические проекты
Лучшим подтверждением нашей квалификации и профессионализма являются истории успеха наших клиентов и различия в их бизнесе до и после сотрудничества с нами.