Pull to refresh
2944.48
Rating
RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR10

Пять причин проникнуться симпатией к Flutter

RUVDS.com corporate blog Development for iOS *Development for Android *Dart *Flutter *
Translation
Original author: Paulina Szklarska
На конференции Google I/O ’17 Google представила Flutter — новую опенсорсную библиотеку, предназначенную для создания мобильных приложений.
image

Как вы, возможно, знаете, Flutter — это решение для разработки кросс-платформенных мобильных приложений с симпатичным пользовательским интерфейсом. Подход, используемый Flutter для проектирования интерфейсов, похож на тот, который применяется в веб-приложениях, поэтому, знакомясь с этой библиотекой, вы найдёте множество аналогий с технологиями HTML/CSS.

Если прислушаться к тому, что создатели библиотеки говорят о Flutter, то окажется, что эта библиотека упрощает и ускоряет разработку веб-приложений, которые радуют глаз. Звучит это хорошо, но, когда я впервые взглянула на Flutter, я не вполне поняла причину возникновения очередного кросс-платформенного решения. Существует много подобных технологий, среди них — Xamarin, PhoneGap, Ionic, React Native. Все мы знаем, что в области разработки кросс-платформенных мобильных приложений имеется достаточное богатство выбора, и то, что у разных технологий есть свои плюсы и минусы. Я не была уверена в том, что Flutter сможет предложить что-то по-настоящему новое и интересное, отличающее его от толпы конкурентов. Однако когда я познакомилась с Flutter поближе, меня ждал сюрприз.

Библиотека Flutter имеет множество возможностей, которые могут быть очень интересными с точки зрения Android-разработчиков. В этой статье я хочу рассказать вам о том, что мне в этой библиотеке особенно понравилось.

Зачем нужен ещё один мобильный SDK?


Возможно, вас занимают вопросы о том, что нового может предложить Flutter, о том, как работает эта библиотека. Может быть, вам интересно узнать, чем Flutter отличается от React Native. Тут я не буду уходить в глубокие технические дебри, так как об этом уже писали. Если вам это интересно — можете заглянуть сюда и сюда.

Если рассказать о Flutter в двух словах, то перед нами SDK, который позволяет создавать гибридные мобильные приложения. В частности, это означает возможность использования одной и той же кодовой базы на платформах Android и iOS. Код пишут на Dart, на языке, разработанном Google, который покажется вам очень знакомым, если вы знаете Java. Вместо XML-файлов тут используются так называемые деревья макетов, которые выглядят так:

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "HelloFlutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("HelloFlutter"),
        ),
        body: new Container(
          child: new RaisedButton(onPressed: _handleOnPressed),
        ),
      ),
    );
  }
}

Как видите, макет страницы строится из вложенных компонентов (виджетов). Корневой виджет представлен объектом MaterialApp (это — всё приложение), затем имеется виджет Scaffold (основная структура макета), внутри которого расположен AppBar (аналог Toolbar в Android) и виджет Container, представляющий элемент body страницы. Внутри тела страницы размещены виджеты, представляющие элементы интерфейса — вроде текстовых полей и кнопок.

Тут всё это показано очень кратко, лишь для того, чтобы ввести вас в курс дела. Если вас интересуют подробности о построении макетов средствами Flutter, взгляните на этот материал.

Сейчас предлагаю рассмотреть пять особенностей Flutter, которые показались мне наиболее интересными и достойными внимания.

1. Горячая перезагрузка


Начнём с простого приложения. В нём имеются три кнопки. Каждая из них предназначена для изменения цвета текста. Выглядит всё это так:


Приложение с тремя кнопками, которые меняют цвет текста

Сейчас мы воспользуемся одной из самых интересных возможностей Flutter — горячей перезагрузкой. Этот механизм позволяет моментально пересобирать проект, так, как будто речь идёт об обычной веб-странице. Посмотрим на него в действии:


Горячая перезагрузка

Что мы тут делаем? Мы изменяем кое-что в коде (в частности, текст на кнопке), затем щёлкаем по кнопке Hot Reload (в верхней части IDE IntelliJ) и практически сразу же видим, как изменения кода подействовали на страницу.

Горячая перезагрузка — это механизм, который заметен не только скоростью работы. Он ещё и достаточно интеллектуален. Если у вас есть некие данные, которые уже выводятся на странице, или воздействуют на внешний вид её элементов (в нашем пример — это цвет текста), можно изменить код, описывающий интерфейс, в процессе выполнения программы, и если после этого выполнить горячую перезагрузку, выводимые ранее данные «выживут» после перезагрузки.

2. Набор виджетов в стилях Material Design и Cupertino


Ещё одно замечательное свойство Flutter заключается в том, что в этой библиотеке имеется весьма впечатляющий набор встроенных компонентов пользовательского интерфейса. На самом деле, тут присутствуют два набора виджетов — виджеты в стиле Material Design (для Android) и в стиле Cupertino (для iOS). Из них можно выбирать то, что вам нужно. Например, вот как выглядит добавление на страницу нового виджета FloatingActionButton:


Добавляем на страницу приложения виджет FloatingActionButton

Самое приятное тут — кросс-платформенность. Скажем, если в проект добавлен какой-нибудь виджет в стиле Material Design или Cupertino, он будет выглядеть одинаково на любом устройстве на платформе Android или iOS. В результате разработчик может не беспокоиться о внешнем виде созданного им интерфейса на разных устройствах.

3. Виджеты — основа всего


Как вы могли видеть на предыдущем рисунке, средствами Flutter очень просто создавать пользовательские интерфейсы. Это возможно благодаря основополагающему принципу Flutter, в соответствии с которым всё представлено виджетами. Класс приложения — это виджет MaterialApp, структура макета — это виджет Scaffold, да и все остальные элементы страницы, такие, как AppBar, Drawer, SnackBar, так же представлены виджетами. Тот же подход распространяется и на такие действия, как, например, выравнивание элементов. Например, для того, чтобы выровнять надпись по центру, достаточно поместить соответствующий ей элемент в виджет Center с помощью комбинации клавиш Cmd/Ctrl + Enter:


Выравнивание элемента

Благодаря такому подходу создание пользовательского интерфейса сводится к простой задаче сборки макета из множества различных небольших элементов.

Рассмотренный тут принцип сочетается с ещё одной базовой идеей, на которой основан Flutter. А именно, речь идёт о том, что здесь отдаётся предпочтение композиции перед наследованием. Это значит, что если вам нужно создать какой-то новый виджет, то, вместо того, чтобы расширять класс Widget (в Android это делается путём расширения класса View), новый виджет собирают из нескольких существующих.

4. Темы для Android и iOS


Обычно нужно, чтобы приложения для Android выглядели не так, как приложения для iOS. Различия заключаются не только в цветах элементов интерфейса, но и в размерах, и в стиле виджетов. Обеспечить правильное отображение интерфейсов приложений на разных платформах можно с помощью тем:


Воздействие тем Flutter на внешний вид приложений

Тут можно видеть, что для элемента Toolbar (AppBar) установлены разные цвета и параметры вывода. Сделано это с помощью команды Theme.of(context).platform, которая позволяет получить сведения о текущей платформе (Android или iOS):

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "HelloFlutter",
        theme: new ThemeData(
            primaryColor:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? Colors.grey[100]
                    : Colors.blue),
        home: new Scaffold(
          appBar: new AppBar(
            elevation:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? 0.0
                    : 4.0,
            title: new Text(
              "HelloFlutter",
            ),
          ),
          body: new Center(child: new Text("Hello Flutter!")),
        ));
  }
}

5. Возможности по расширению функционала


Хотя Flutter всё ещё пребывает в альфа-версии, эта библиотека уже собрала вокруг себя очень большое и активное сообщество. Благодаря этому Flutter поддерживает множество пакетов (библиотек, вроде зависимостей Gradle в Android). Среди доступных пакетов имеются такие, которые помогают работать с изображениями, выполнять HTTP-запросы, делиться данными, хранить настройки, работать с сенсорами, пользоваться возможностями Firebase. И, естественно, всё это можно применять и при разработке для Android, и при разработке для iOS.

Итоги


Если вам, после того, как вы узнали о Flutter, хочется освоить эту библиотеку, пожалуй, лучше всего будет начать с пошаговых уроков, размещённых на ресурсе Google Codelabs. В частности, вот руководство, посвящённое базовым методам работы, демонстрирующее процесс создания пользовательского интерфейса. Здесь можно найти руководство по использованию возможностей Firebase в приложениях, созданных средствами Flutter.

А вот здесь можно посмотреть на интерфейсы, созданные с помощью Flutter и поэкспериментировать с ними.

Уважаемые читатели! Какими инструментами вы пользуетесь для разработки кросс-платформенных мобильных приложений?
Tags:
Hubs:
Total votes 19: ↑16 and ↓3 +13
Views 38K
Comments Comments 18

Information

Founded
Location
Россия
Website
ruvds.com
Employees
11–30 employees
Registered
Representative
ruvds