Как запустить flutter приложение на телефоне
Это руководство по созданию вашего первого приложения Flutter. Если вы знакомы с объектно-ориентированным кодом и основными понятиями программирования, такими как переменные, циклы и константы, вы можете завершить это руководство. Вам не нужен предыдущий опыт работы с Dart, мобильным или веб-программированием.
Эта лабораторная работа является 1 частью двухкомпонентной лабораторной работы. Вы можете найти часть 2 на Google Developers Codelabs (а также копия этой лабораторной работы, часть 1).
То, что вы построите в первой части.
То, что вы создадите в первой части
Вы реализуете простое приложение, которое генерирует предлагаемые имена для стартап-компании. Пользователь может выбирать и отменять выбор имен, сохраняя лучшие из них. Код лениво генерирует 10 имен за раз. В то время как пользователь прокручивает список, генерируется больше имен. Нет предела тому, как далеко пользователь может прокручивать список.
Анимированный GIF показывает, как приложение работает по завершению части 1.
То, что вы узнаете в первой части:
- Как написать flutter-приложение, которое выглядит естественно на iOS, Android и WEB
- Базовая структура приложения Flutter
- Поиск и использование пакетов для расширения функциональности Использование горячей перезагрузки hot reload для более быстрого цикла разработки
- Как реализовать Stateful-виджет
- Как создать бесконечно подгружаемый список
Что вы будете использовать:
Для работы в этой лаборатории вам понадобятся две программы: Flutter SDK и редактор. Эта лабораторная работа предполагает использование Android Studio, но вы можете использовать предпочитаемый вами редактор.
Вы можете запустить эту лабораторную работу с помощью любого из следующих устройств:
- Физическое устройство (Android или iOS), подключенное к компьютеру и переходящее в режим разработчика. (требуется установка инструментов Xcode). (требуется настройка в Android Studio)
- Браузер (для отладки требуется Chrome).
Если вы хотите скомпилировать ваше приложение для работы в Интернете, вы должны включить эту функцию (которая в настоящее время находится в бета-версии). Чтобы включить веб-поддержку, воспользуйтесь следующими инструкциями:
Шаг 1: Создайте стартовое Flutter приложение.
В основном вы будете редактировать lib/main.dart, где находится код Dart.
lib/main.dart:
2. Запустите приложение так, как описывает ваша IDE. Вы должны увидеть либо Android, либо iOS, либо веб-выход, в зависимости от вашего устройства.
Android IOS
Шаг 2: Используйте внешний пакет
На этом шаге вы начнете использовать пакет с открытым исходным кодом english_words, который содержит несколько тысяч наиболее употребляемых английских слов, а также некоторые утилитные функции.
Пакет english_words, а также многие другие пакеты с открытым исходным кодом, можно найти на сайте pub.dev.
- Файл pubspec.yaml управляет активами и зависимостями для приложения Flutter. В pubspec.yaml добавьте english_words (3.1.5 или выше) в список зависимостей:
2. При просмотре файла pubspec.yaml в редакторе Android Studio нажмите кнопку Pub get. Это втянет пакет в ваш проект. В консоли должно появиться следующее:
Выполняя Pub get, автоматически генерируется файл pubspec.lock со списком всех пакетов, втянутых в проект, и их номерами версий.
3. В файле lib/main.dart импортируйте новый пакет:
lib/main.dart
По мере набора текста, Android Studio дает вам предложения по импорту библиотек. Затем она отображает строку импорта серым цветом, информируя вас о том, что импортируемая библиотека не используется (пока что).
Если приложение работает, hot reload обновляет запущенное приложение. Каждый раз, когда Вы нажимаете на hot reload или сохраняете проект, в работающем приложении Вы должны видеть другую пару слов, выбранную случайным образом. Это связано с тем, что объединение слов генерируется внутри метода сборки, который запускается каждый раз, когда требуется отрисовка MaterialApp, или при переключении Платформы в Flutter Inspector.
Android IOS
Шаг 3: Добавление Stateful виджета (виджета с индикацией состояния)
Statefull виджеты поддерживают состояние, которое может изменяться в течение жизни виджета. Реализация stateful виджета требует как минимум два класса: 1) класс StatefulWidget, который создает экземпляр 2) класс State. Класс StatefulWidget сам по себе является неизменяемым и может быть выброшен и регенерирован, но класс State сохраняется в течение всего срока службы виджета.
На этом шаге вы добавите stateful виджет, RandomWords, который создает свой класс State, _RandomWordsState. Затем вы будете использовать RandomWords в качестве дочернего элемента существующего stateless виджета MyApp.
После того, как вы ввели RandomWords в качестве statefull виджета, IDE автоматически обновляет сопровождающий его класс State, называя его _RandomWordsState. По умолчанию имя класса State имеет префикс с подбаром. Префиксация идентификатора с подчеркиванием обеспечивает конфиденциальность в языке Dart и рекомендуется для объектов State.
Оба класса теперь выглядят следующим образом:
3. Обновите метод build() в _RandomWordsState:
lib/main.dart (_RandomWordsState)
После добавления state класса, IDE жалуется, что в классе отсутствует build метод. Далее будет добавлен базовый build метод, который генерирует пары слов, перемещая код генерации слов из MyApp в _RandomWordsState.
4. Удалите код генерации слова из MyApp, сделав изменения, показанные в следующем различии:
5. Перезапустите приложение. Приложение должно вести себя как раньше, отображая пару слов каждый раз при hot reload или сохранении приложения.
Шаг 4: Создание бесконечного прокручиваемого ListView
На этом шаге вы разворачиваете _RandomWordsState, чтобы сгенерировать и отобразить список пар слов. По мере прокрутки пользователя список (отображаемый в виджете ListView) растет бесконечно. Конструктор builder ListView позволяет построить просмотр списка лениво, по требованию.
- Добавьте список предложений _suggestions в класс _RandomWordsState для сохранения предлагаемых пар слов. Также, добавьте переменную _biggerFont для увеличения размера шрифта.
lib/main.dart
Далее в класс _RandomWordsState будет добавлена функция _buildSuggestions(). Этот метод формирует ListView, который отображает предлагаемую пару слов.
2. Добавьте функции _buildSuggestions() в класс _RandomWordsState:
lib/main.dart (_buildSuggestions)
/*1*/ Обратный вызов itemBuilder вызывается один раз на каждую предложенную пару слов и помещает каждое предложение в строку ListTile. Для четных строк функция добавляет строку ListTile для объединения слов. Для нечетных строк, функция добавляет виджет разделителя Divider для визуального разделения записей. Обратите внимание, что разделитель может быть трудно увидеть на небольших устройствах.
/*2*/ Добавление виджета разделителя Divider высотой в один пиксель перед каждой строкой в ListView.
/*3*/ Выражение i
/ 2 делит i на 2 и возвращает целочисленный результат. Например: 1, 2, 3, 4, 5 становится 0, 1, 1, 2, 2. При этом вычисляется фактическое количество пар слов в ListView за вычетом виджетов разделителей.
/*4*/ Если Вы достигли конца доступных пар слов, сгенерируйте еще 10 и добавьте их в список предложений.
Функция _buildSuggestions() вызывает _buildRow() один раз на пару слов. Эта функция отображает каждую новую пару в ListTile, что позволяет сделать строки более привлекательными на следующем этапе.
3. Добавьте функцию _buildRow() в _RandomWordsState:
lib/main.dart (_buildRow)
В классе _RandomWordsState обновите метод build() для использования _buildSuggestions(), а не для прямого вызова библиотеки генерации слов. (Scaffold реализует базовую визуальную компоновку Material Design.) Замените тело метода кодом:
lib/main.dart (build)
5. В классе MyApp обновите метод build(), изменив заголовок и превратив домашний виджет в виджет RandomWords:
6. Перезапустите приложение. Вы должны увидеть список пар слов, независимо от того, как далеко вы прокручиваете.
Android IOS
Профилирование или выпуски релизов
Следующие шаги
Вы написали интерактивное флаттер-приложение, которое работает как на iOS, так и на Android. В этой лабораторной работе вы:
Если вы хотите расширить это приложение, перейдите ко второй части на сайте Google Developers Codelabs, где вы добавите следующую функциональность:
1- Цель статьи
В этой статье я расскажу вам, как создать свое первое приложение Flutter на Android Studio и успешно запустить его с помощью Android Emulator.
Прежде всего, убедитесь, что вы успешно установили следующие необходимые инструменты:
2- Создание проекта Flutter
В Android Studio создайте новый проект Flutter.
- File > New > New Flutter Project.
3- Объяснение структуры проекта
Папка автоматически генерирует код для приложения Android.
Папка автоматически генерирует код для приложения iOS.
Домашняя папка содержит Dart-код приложения.
Папка содержит Dart-коды, используемые для тестирования приложения.
Git version control file - этот файл содержит конфигурацию проекта GIT.
Эта папка создается автоматически с помощью инструмента Flutter.
Автоматически генерируется файл, содержащий список зависимостей (dependencies), используемых проектом.
Файл используется для объявления ресурсов, связанных с проектом, таких как изображения, шрифты и т. д.
Этот файл следует добавить в GIT Control чтобы члены вашей команды разработчиков использовали одни и те же версии библиотек.
Файл описывает проект, который написан в соответствии со структурой Markdown.
4- Написание кода для приложения
Удалите всё содержимое файла main.dart и замените его новым.
5- Запустите приложение
Для запуска приложения Flutter необходимо развернуть его на устройстве Android или iOS. Таким образом, в процессе разработки приложения у вас есть один из следующих вариантов:
- Подключить физическое устройство Android к компьютеру и включить режим разработчика (Developer mode).
- Подключить физическое устройство iOS (например, iPhone) к компьютеру и включить режим разработчика (Developer mode)
- Запустить эмулятор Android (Android Emulator).
Мы программируем приложение Flutter на Android Studio, поэтому лучше всего запустить Android Emulator (эмулятор Android ).
Или нажмите на значок "AVD Manager" на панели инструментов:
Если вы не видите ни одного виртуального устройства в списке, создайте его, следуя приведенной ниже инструкции:
Android Emulator запущен и готов к развертыванию приложения Flutter.
На панели инструментов Android Studio запустите приложение Flutter, как показано на рисунке ниже:
После установки Flutter SDK создадим первое простейшее приложение.
Создание приложения на Windows
Прежде всего создадим для проектов Flutter каталог на жестком диске. Например, в моем случае это каталог C:\fluttersrc .
Откроем командную строку/консоль и перейдем к созданному каталогу с помощью команды cd . Далее введем следующую команду:
Данная команда создает в текущей папке проект под названием myapp .
В результате будет создан большой проект с довольно сложной структурой
Основные элементы структуры проекта:
Папка .dart-tool - специальная папка, которая хранит информацию об используемых пакетах
Папка .idea - специальная папка для Android Studio, которая содержит базовую конфигурацию
Папка android содержит код и дополнительные файлы, которые позволяют связать прложение на Dart с Android
Папка ios содержит код и дополнительные файлы, которые позволяют связать приложение на Dart с iOS
Папка buid содержит файлы, создаваемые в результате процесса построения приложения
Папка lib содержит собственно файлы приложения на языке Dart. Именно с этой папкой идет основная работа при создания приложения на Flutter
Папка test предназначена для хранения файлов с тестами
Папка web содержит код и дополнительные файлы для создания веб-приложения на Flutter
Файл pubsec.yaml хранит конфигурацию проекта, в частности, пакет проекта, список зависимостей и т.д.
Этот проект уже содержит самый минимальный функционал, который мы можем запускать.
Для запуска и тестирования приложения мы можем использовать эмуляторы или реальные устройства. Для запуска веб-приложений на Flutter в качестве условных "устройств" используются браузеры. Для тестирования десктоп-приложений - текущий компьютер.
Для проверки наличия устройства для запуска проекта можно выполнить в командной строке/консоли следующую команду:
Так, на скриншоте можно увидеть, что у меня доступно для тестирования три "устройства". Первое - мобильное устройство 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 . Далее запустим проект и для этого введем следующую команду:
Обратите внимание, что компилировать и запускать приложение необходимо из папки проекта
В итоге будет скомпилирован пакет apk, который затем будет установлен на подключенном устройстве Android. Весь процесс может занять довольно много времени, особенно при первом запуске. В итоге на подключенном устройстве будет запущено приложение с содержимым по умолчанию:
Где определяется это приложение? В проекте в папке lib мы можем найти файл main.dart
По умолчанию он имеет следующее содержимое:
Здесь определен ряд классов на языке программирования Dart, которые собственно и создают приложение.
Запуск приложения на Web
Однако в проекте по умолчанию есть также поддержка для iOS и Web. Рассмотрим, как запустить проект для текстирования веб-приложения в браузере. Так, выше на скриншоте было видно, что у меня есть три "устройства". Однаим из них является Google Chrome, которому присвоено имя "chrome".Для этого введем команду:
То есть опять же вводится та же команда flutter run для запуска проекта. Только теперь с помощью флага -d указывается устройство, на котором будет запускаться проект. Этому флагу передается текстовая метка устройства - в данном случае "chrome" (то есть браузер Google Chrome), соответственно будет запускаться веб-приложение.
Соответственно, если бы я хотел запустить проект на Microsoft Edge, мне потребовалось бы указать соответствующую текстовую метку:
При запуске проекта под Web запускается тестовый веб-сервер, на котором разворачивается приложение и затем запускается веб-браузер, который обращается к этому приложению. В итоге в браузере мы увидим практически тот же интерфейс с аналогичной логикой, что и на Android:
Перезагрузка приложения
Если проект уже ранее запущен с помощью команды flutter run , то можно изменить код приложения и с помощью ввода в командной строке символа "r" выполнить перезагрузку приложения (так называмый Hot reload). Однако надо отметиь, что перезагрузка не всегда можт срабатывать. В этом случае можно заново выполнить команду flutter run . Соответственно изменится и приложение:
Первое приложение на MacOS
Создание приложения на MacOS не будет сильно отличаться от соответствующего процесса на Windows.
Прежде всего создадим для проектов Flutter каталог на жестком диске. Например, в моем случае это каталог Documents\fluttersrc .
Откроем терминал и перейдем к созданному каталогу с помощью команды cd . Далее добавим путь к папке bin для текущего окна терминала с помощью команды:
И затем введем команду для создания проекта:
Далее перейдем к каталогу myapp с помощью команды cd . Далее добавим путь к папке bin для ткущего окна терминала и запустим проект и для этого введем следующую команду:
Запускаем Android Studio, на экране приветствия выбираем Start a new Flutter project.
Выбираем вариант нового проекта Flutter Application.
В качестве имени нового проекта напишем: flutter_hello_world
Доменное имя компании будет: flutter.su
После того как Android Studio настроит проект по умолчанию, мы открываем файл lib/main.dart.
main.dart – это главный файл с которого начинается Flutter приложение, в нем уже есть пример кода программы, можно его запустить и посмотреть что он выполняется на отладочном устройстве или в виртуальной машине.
Но для того чтобы понять, что там написано, мы напишем простую программу сами, весь код из файла lib/main.dart нужно удалить.
После этого ошибки пропадут. Перейдем к файлу main.dart для начала написания программы.
2. Главная функция main()
С функции main() начинается исполнение программы на языке Dart.
Напишем в пустом файле main.dart следующий код:
void – указывает на то что функция main не возвращает значения и не содержит оператора return;
print – выводит строку в консоль отладки приложении.
3. Функция runApp()
runApp – запускает “окно” приложения, может использоваться для смены “окон”. Функция принимает одно значение типа виджет (widget). Все компоненты построения интерфейса являются виджетами, но имеют свои особенности. Для использования необходимо подключить библиотеку material: import 'package:flutter/material.dart';
import 'package:flutter/material.dart';// подключаем библиотеку material void main() < runApp( new MaterialApp( home: new Text('Hello World!') ) ); >
В качестве параметра виджет для функции runApp мы передали объект класса MaterialApp. В параметре home передан виджет Text.
Виджет Text должен иметь как минимум один обязательный параметр типа String.
При создании экземпляра класса MaterialApp можно указать параметр debugShowCheckedModeBanner со значеним false – это скроет надпись “debug”.
Виджет текста мы обернем классом Scaffold.
4. Иерархия виджетов
Некоторые виджеты могут иметь несколько прямых потомков, через параметр children, например для классов Row и Column:
Другие классы могут иметь только одного прямого потомка, пример
new Center(child: new Text('center text')) new FlatButton(onPressed: ()<>, child: Text('my button text'))Добавим несколько виджетов в наш код.
import 'package:flutter/material.dart'; void main() < runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold( appBar: new AppBar(title: new Text('Flutter.su')), body: new Center( child: new Column( children: [new Text('Hello World!'), new FlatButton(onPressed: ()<>, child: Text('open site'))] ) ) ) ) ); > 
Виджет класса Center – центрует объект-наследника, а класс Column – размещает виджеты друг под другом.
Класс FlatButton создает кнопку, в качестве параметра для события нажатия мы передали пока что пустую функцию: ()<>; а в качестве содержания экземпляр класса Text, вместо текста можно было бы указать иконку изображения, или виджет содержащий и иконку и текст.
Получившиеся структура виджетов отражена на схеме, иерархия свойств каждого виджета влияет на свойства его потомков. Подробнее про концепцию дизайна материалов можно прочитать на официальном сайте material.io.
5. Свой «виджет» класс MyBody и горячая перезагрузка
Для того чтобы код был понятнее для чтения и удобнее для работы нужно использовать классы.
Создадим класс MyBody, который будет вызываться классом Scaffold через параметр body.
Класс объявляется с помощью ключевого слова class. Т.к. в параметр body ожидается виджет, то наш класс определим через наследование от уже существующего класса виджета, в нашем случае это будет класс StatelessWidget:
В классе наследующего от StatelessWidget должна быть определена функция: build(BuildContext context); которая возвращает объект виджет.
import 'package:flutter/material.dart'; class MyBody extends StatelessWidget< Widget build(BuildContext context) < return new Center(child: new Column( children: [ new Text('Hello World!'), new FlatButton(onPressed: ()<>, child: Text('open site'), color: Colors.red, textColor: Colors.white,)] )); > > void main() < runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold( appBar: new AppBar(title: new Text('Flutter.su')), body: new MyBody() ) ) ); > 
Наш класс MyBody при создании выполняет функцию build() и возвращает экземпляр класса Center и т.д.
До выполнения функции "return Center(… " мы могли бы выполнить какие-нибудь операции или использовать ветвление программы, и уже потом вернуть нужную структуру.
В дальнейшем код в main.dart можно разделить, и отдельные классы перенести в другие файлы.
После того как мы ввели класс MyBody – мы можем вносить в него изменения и использовать быструю перезагрузку для просмотра изменений.
Так например изменим текст кнопки с "open site" на "open url", после быстрой перезагрузки текст будет изменен. Таким образом можно быстро просмотреть изменения в работе приложения без полной перекомпиляции кода.
Функции и параметры, которые не обернуты в классы могут не срабатывать при быстрой перезагрузке, используйте полную перезагрузку когда есть сомнения.
В приведенном выше коде мы добавили цвет для кнопки и цвет для текста, с помощью параметров: color и textColor.
6. Установка и использование пакета url_launcher (открытие ссылок в браузере)
Добавим функциональности нашей кнопке, при нажатии пусть в браузере откроется сайт flutter.su
Эту задачу легко решить с помощью пакета url_launcher, чтобы добавить пакет в проект нужно сделать несколько действий:
1. Добавить в файл pubspec.yaml строку "url_launcher: ^3.0.1" после строки "dependencies:" со всеми отступами, так как это выглядит на скриншоте
2. После изменения файла сохраните его (Ctrl+S) и после этого нажмите на Packages get
Flutter — новый инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах (например, на Android или iOS) с общей кодовой базой.
Сам инструмент написан на C и C++. Предоставляет движок для 2D рендеринга, React-подобный FRP фреймворк и набор виджетов в стиле Material Design. На данный момент распространяется версия alpha:0.0.20, но несмотря на довольно "сырую" версию, уже можно создавать продвинутый интерфейс, работать с сетью и даже с файловой системой.
Подход Flutter отличается от инструментов, работающих через WebView и выполняющих HTML, CSS и Javascript (например Cordova), — он заключается в использовании Dart как единственного язык программирования. Dart довольно прост в изучении, а если вы ещё и знаете Java, то, считайте, 75% работы сделано, и на Dart можно перейти всего за пару дней.
Приложения компилируются в нативный код при сборке для релиза. Благодаря этому повышается производительность и уменьшается задержка при работе с интерфейсом. При сборке в режиме отладки (и выявлении возможных багов) Flutter также выполняет некоторые задачи, которые могут замедлять приложение. В таких случаях Flutter будет показывать надпись “Slow Mode” в правом верхнем углу экрана.
Почему именно Flutter?
Кроме того, что вы делаете приложение сразу под несколько систем (Android и iOS), код Flutter очень выразителен. То есть потребуется написать меньше кода чем если бы вы писали нативное приложение под одну платформу.
Производительность и отклик пользовательского интерфейса.
Ещё один плюс Flutter — он ориентирован на Material Design и предоставляет множество возможностей для работы с ним.
Google также использует Flutter для разработки пользовательского интерфейса своей новой системы Fuchsia.
Установка
Так как Flutter ещё в процессе разработки и постоянно обновляется, процесс установки со временем может поменяться. Актуальную инструкцию по установке можно найти на сайте Flutter.
Мы будем пользоваться версией 0.0.20+.alpha. (Прим.перев.: на данный момент установка возможна только под Mac и Linux (64-bit))
Шаг 1. Клонирование
Клонируйте ветку alpha из репозитория Flutter при помощи Git (SourceTree, Github Desktop…) и добавьте директорию bin в PATH.
Шаг 2. Проверка зависимостей
Запустите Flutter doctor, чтобы установить все необходимые зависимости.
Шаг 3. Установка платформ
Дальше мы установим платформы для разработки. Мы можем установить обе или ограничиться одной, для которой хотим написать приложение.
В случае с Android необходимо установить Android SDK. Можете просто установить Android Studio, SDK будет в комплекте. В случае, если Android Studio установлена не в директорию по умолчанию, необходимо добавить переменную ANDROID_HOME в PATH, указав новое расположение, куда был установлен SDK.
В случае с iOS необходим xCode версии 7.2 или выше. Для запуска приложений на физическом устройстве необходим дополнительный инструмент. Его можно установить при помощи Homebrew.
Шаг 4. Конфигурация Atom
Рекомендуется использовать текстовый редактор Atom с установленными плагинами Flutter и Dart.
Установка плагина Flutter для Atom:
- Запустите Atom.
- Packages > Settings View > Install Packages/Themes.
- Напишите в поле Install Packages слово ‘flutter’, затем нажмите кнопку Packages.
- Выберите Flutter и установите.
Откройте Packages > Flutter > Package Settings и выставьте в FLUTTER_ROOT путь, куда был склонирован Flutter SDK.
Затем Packages > Dart > Package Settings и выставьте переменную с расположением dart sdk, обычно это bin/cache/dart-sdk в директории Flutter.
Если у вас Mac, запустите Atom > Install Shell Commands чтобы установить shell-команды.
И напоследок запустите ещё раз Flutter doctor, чтобы удостовериться, что всё в порядке.
Вывод из консоли ниже показывает, что процесс установки успешен, но среда iOS ещё не отвечает всем необходимым требованиям.
Первые шаги (Пишем Hello World!)
Давайте создадим простенькое приложение и посмотрим Flutter в действии. В последующих статьях примеры будут куда сложнее и увлекательнее.
Запустите Packages → Flutter → create new Flutter Project. В директории lib есть файл main.dart, откройте его и сотрите весь код.
Выполнение кода Dart начинается с функции main, которая должна быть включена в файл main.dart.
Теперь импортируем библиотеку material, она предоставляет нам функцию для запуска приложений.
Эта функция называется runApp и принимает виджет (Widget) в качестве параметра. Виджет можно сравнить с представлением (View) в Android или iOS, чтобы иметь общее представление, но, само собой, между ними есть и отличия. То есть в Flutter весь интерфейс строится на использовании виджетов и весь код пишется на Dart. Например в Android надо было бы использовать XML для описания представлений.
Начнём с того, что выведем при помощи виджета Text произвольный текст.
Теперь запускаем приложение через Atom.
Как видно, текст появился за статус-баром. Так произошло потому, что туда установлены координаты Flutter (0,0).
В примере выше создан виджет Padding, в котором отступы установлены на 24 при помощи объекта EdgeInsets, а в качестве дочернего элемента указан виджет Text. Запустите приложение и увидите, что текст теперь ниже.
Примечание: если вы знакомы с Java, то имейте в виду, const EdgeInsets.only(top: 24.0) всего лишь вызов конструктора EdgeInsets. Он возвращает экземпляр объекта, который будет константой времени компиляции. В этом разница между Java и Dart, больше информации о конструкторах в Dart можете найти здесь.
Воспользуемся виджетом Center, чтобы разместить текст в центре экрана.
Оба виджета, Padding и Center, предоставляют атрибут, называемый child, используемый для указания дочернего элемента. На самом деле это одна из особенностей, делающих Flutter таким мощным инструментом. Каждый виджет может иметь дочерние элементы, благодаря чему одни виджеты могут быть вложены в другие виджеты. Так, например, Text может быть вложен в Padding, который будет вложен в Center.
Заключение
В первой статье из цикла статей про Flutter мы рассмотрели, как можно при помощи всего нескольких строк кода вывести текст в приложении. В последующих статьях мы сосредоточимся на более сложных интерфейсах, чтобы показать, как их просто реализовать (по сравнению с нативным способом).
Читайте также: