Как ускорить разработку на Flutter

Development | Amber | Комментировать запись

Никто не идеален: даже при всех преимуществах у Flutter есть свои недостатки. К примеру, в самой простой разработке Flutter постоянно растет набор виджетов и пакетов; а если код состоит из повторяющихся или похожих блоков, вы можете долго играть в игру «найди пропущенную скобку». В этом коротком мануале вы найдете пару советов, которые облегчат вам жизнь при изучении этой новой технологии.

В основном речь здесь пойдет о том, что можно сделать в Flutter через VSCode (хотя есть и другие редакторы, которые работают примерно так же).

Основные советы и рекомендации

Примечание: Сочетания клавиш могут отличаться в зависимости от редактора. Приведенные здесь сочетания действительны для VSCode и Android Studio.

Висящие запятые

Считается, что самый простой способ сохранить чистое форматирование кода – добавить запятую в конец любой строки. Тогда редактор преобразует ее во вложенную древовидную структуру. В целом, рекомендовать делать это с каждой строкой нельзя – если в вашем коде куча скобок и огромное количество уровней вложенности, это может сбивать с толку больше, чем пара сохраненных внутри строки элементов.

Так или иначе, вот такой код:

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[Row(children: <Widget>[Container(child: Center(child: Text('I\m some text'),),),],),],);
}
}

Можно переформатировать в вот такой:

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Center(
child: Text('I\m some text'),
),
),
],
),
],
);
}
}

Инструменты рефакторинга

Вместо того, чтобы вырезать всё вручную, создавать виджет и вставлять его обратно каждый раз, когда вам нужно вернуться к своему проекту, – а это бывает довольно часто, – вы можете использовать несколько удобных инструментов рефакторинга, которые предлагает VSCode.

Вам просто нужно поместить курсор внутри имени виджета – и рядом с ним появится маленькая лампочка. Нажмите ее, чтобы открыть дополнительные функции (среди них – добавление столбцов, извлечение в отдельный виджет, полное удаление). Вы можете либо центрировать курсор, кликнуть правой кнопкой мыши и выбрать нужное действие, либо использовать Ctrl+Shift+R.

Просмотр исходного кода Flutter

Помимо документации, есть еще один отличный способ понять, как работает Flutter, – это посмотреть на сам исходный код этой программы. Команда Flutter создала очень хорошо прокомментированную кодовую базу, где вы найдете описание буквально всего, что вы используете. Изучить исходный код будет очень полезно, если вы хотите узнать, какие аргументы принимает конкретный виджет и что с ними происходит потом; кроме того, исходный код поможет вам выяснить, почему вы получаете ту или иную ошибку.

Чтобы просмотреть исходный код Flutter, просто удерживайте Ctrl и кликните на виджет, который хотите изучить.

Расширения Flutter

Выделитель пар скобок

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

Расширение Pubspec Assist

Прошли те времена, когда нужно было идти в документацию, находить нужную зависимость или номер версии, а затем копировать и вставлять его в файл pubspec.yaml. Теперь вы можете использовать комбинацию клавиш Crtl+Shift+P, чтобы активировать расширение Pubspec Assist и просто сказать ему, что вы ищете.

Файлы Flutter

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

Сниппеты Flutter

Чем меньше кода нужно набирать разработчику, тем он счастливее. В некоторых ситуациях эта небольшая коллекция под названием Awesome Flutter Snippets может показаться настоящим сокровищем: например, если вы не можете точно вспомнить, как создать stateless виджет или метод сборки.

Заключение

Способов сократить путь и автоматизировать повторяющиеся задачи Flutter всегда будет бесконечное множество. В этом коротком руководстве мы рассмотрели некоторые из наиболее распространенных методов работы с этим инструментом.

Читайте также: Форматирование кода в Visual Studio Code с помощью ESLint