Навстречу переменам

Рассказываем про обновлённую версию фреймворка, полезных виджетах и смене парадигмы для тех, кто только планирует перейти на Flutter. Сделайте перерыв на чашечку кофе и наш сентябрьский Flutter-дайджест.

Встречаем Flutter 3.3

Разработчики языка не снижают темпов. Прошло всего 3 месяца после выхода крупнейшего обновления Flutter 3, а мы уже видим выход новой версии 3.3. Это 5687 пулл-реквестов и куча новых функций фреймворка, упрощающих жизнь разработчикам. Давайте посмотрим на ключевые изменения.

Выделение текста. С ним всегда было непросто. Текст хорошо выделялся только в пределах одного элемента. Но если требовалось выделение текста, который был размазан по разным элементам — попытка была обречена на провал. Теперь же появился виджет SelectionArea. Оборачиваете в него тело маршрута и вуаля. Текст можно будет выделять точно также, как и в обычных веб-приложениях. Вот небольшой пример:
 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: SelectionArea(
        child: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Text('Row 1'),
                Text('Row 2'),
                Text('Row 3'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Улучшенная поддержка трекпадов. До выхода версии 3.3 прокрутка списка трекпадом превращалась в попытку перемещения элемента списка. Flutter предоставлял жест прокрутки, который не распознавался карточками, но при этом воспринимался компонентом ScrollView. Теперь скроллинг списков работает корректно. Проблему пофиксили на всех платформах, включая ChromeOS.

Рукописный ввод на iOS. Владельцы iPad с Apple Pencil оценят. Flutter теперь поддерживает Scribble для рукописного ввода. Эта фича теперь включена по умолчанию в виджетах CupertinoTextField, TextField и EditableText.

Улучшенная детализация состояний при вводе текста. Отслеживание ввода раньше включало только текущее состояние. Это никак не позволяло отслеживать, что было в прошлом. Теперь мы можем видеть дельты ввода. Можно однозначно определить, был ли ввод заменой предыдущего символа. Но проще один раз показать. Здесь вы найдёте простое тестовое приложение, демонстрирующее детализацию состояний ввода.

Material design 3. Новый унифицированный язык дизайна Google продолжает приходить в Flutter. Впервые он был представлен с Android 12 и позволял автоматически адаптировать приложения под те цвета, которые пользователь выбрал в настройках устройства.

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

Отбрасываем тени

Если дать нарисовать одну и ту же картинку художнику и обычному человеку — результат будет разительно отличаться. Художник, например, помнит про блики и тени, отбрасываемые предметом, и прорабатывает их. Это справедливо и при создании пользовательского интерфейса. Сегодня мы расскажем, как кардинально улучшить графическую составляющую приложения, используя виджеты PhysicalModel и PhysicalShape.

Мы можем заставить объекты отбрасывать тени. Для начала определим какой из виджетов нам подойдёт лучше. PhysicalModel годится только для тех объектов, тени которых представить в виде прямоугольника с закругленными углами. Например, для большинства кнопок. Если надо сформировать тень для более сложной формы объекта — используйте PhysicalShape.

Работает это очень просто. Виджет копирует наш объект и прячет его на заднем плане, размывая границы и применяя заданный цвет. Чтобы этот скрытый объект превратить в тень, нам необходимо его слегка опустить вниз. Это делается параметром elevation, выражающимся в логических пикселях.

Physical Shape работает по тому же самому принципу. Взгляните на этот пример:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PhysicalShape Sample'),
      ),
      body: Center(
        child: PhysicalShape(
          elevation: 5.0,
          clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
          color: Colors.orange,
          child: const SizedBox(
            height: 200.0,
            width: 200.0,
            child: Center(
              child: Text(
                'Hello, World!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Мыслим декларативно

«Всё есть виджет» — это прекрасная особенность Flutter, привлекающая разработчиков из других языков. Но давайте подумаем про одно кардинальное отличие — стиль программирования. В большинстве фреймворков интерфейсы программируются императивно. Мы создаём интерфейс и далее меняем его параметры, добиваясь какого-то конечного результата. При изменениях мы вытаскиваем наш старый экземпляр интерфейса и изменяем его.

Декларативный подход работает иначе. Мы не меняем сам интерфейс, а меняем его состояние. Сам же интерфейс отрисовывается заново с учетом этого состояния. Каждое изменение не подтягивает старый экземпляр интерфейса, а создаёт новый. Разработчику требуется всего лишь описать все требуемые состояния. Не имеет значения, каким образом система будет достигать их. Фреймворк такую рутину забирает полностью на себя.

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

 

Flutter Quiz

до 1 декабря 2022

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

Среди всех, набравших не менее 6 правильных ответов мы устроим розыгрыш приза (Яндекс.Станцию). Счастливчика определит генератор случайных чисел в прямом эфире на нашем Youtube.

Принять участие

Митапы и конференции