Flutter – это открытая платформа, созданная Google, которая ориентирована на создание кроссплатформенных приложений. Flutter в первую очередь сфокусирован на iOS и Android, но также разрабатывает надежную поддержку настольных компьютеров.
Примечание: Приложения Flutter созданы на языке программирования Dart.
В этом мануале вы создадите свое первое приложение Flutter.
Требования
Для выполнения этого руководства нужно:
- Скачать и установить Flutter.
- Загрузить и установить Android Studio или Visual Studio Code. Android Studio – это интегрированная многофункциональная среда IDE с поддержкой Flutter. Visual Studio Code предлагает более легкую, но достаточно мощную поддержку.
- Рекомендуется также установить плагины для вашего редактора кода:
Данный мануал был написан для Flutter 1.2.x, но обновлен для Flutter 1.22.2.
1: Создание нового проекта Flutter
Итак, вы установили Flutter и соответствующие зависимости (Android SDK или XCode в зависимости от вашего компьютера). Теперь можно создать новый проект Flutter.
Сначала откройте окно терминала, перейдите в каталог, в котором вы хотите запустить проект, и выполните следующую команду:
flutter create hello_flutter
Перейдите в новый каталог:
cd 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({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
// ...
Последняя часть этого файла определяет _MyHomePageState. Этот класс расширяет State для виджета и метода сборки. Если вы когда-либо ранее работали с React, это должно вам напомнить JSX-метод render.
Одним из наиболее важных моментов, которые следует учитывать в приведенном выше примере, является тот факт, что мы переопределяем метод createState, чтобы настроить собственный способ управления состоянием:
// ...
class _MyHomePageState extends State<MyHomePage> {
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: <Widget>[
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