Как использовать Pug и Sass с flutter-view
Без категорий | Комментировать запись
Flutter – очень мощная программа, но в самом начале даже опытным разработчикам бывает трудно разобраться в ее структуре. Логика, стили и разметка собраны в одном месте и, кажется, перепутались с кучей скобок и запятых. Чтобы разобраться в этом вопросе, попробуйте flutter-view – он сразу станет одним из основных инструментов при работе с Flutter.
flutter-view не заменят Dart, он не позволяет полностью использовать Pug и Sass. По сути flutter-view – это дополнение к нашему рабочему процессу, позволяющее изолировать представление и разработать его более понятным способом. Он предоставляет синтаксис Pug и Sass (или HTML и CSS) с отступами, миксинами, циклами и другими полезностями, но по-прежнему ограничивает нас пределами используемых виджетов. Это следует иметь в виду, потому что вы можете обратиться к возможностям CSS, но потом вы удивитесь, почему ничего не работает (например, слетает CSS Grid или не меняется ширина столбца).
Если вы не знакомы с Pug или немного подзабыли, что это такое, вы можете освежить свои знания в этом мануале.
Читайте также: Автоматическое создание иконок для приложений Flutter
Установка и настройка flutter-view
flutter-view – все еще довольно свежий пакет, поэтому перед установкой рекомендуем проверить последнюю версию и документацию на предмет обновлений.
$ flutter create flutter_view_example
Затем вам нужно открыть два терминала: один для запуска flutter-view, а другой – для вашего приложения. Все, что нужно flutter-view – это расположение кода, который вы хотите скомпилировать (обычно он лежит в папке lib). Указать эту папку можно через флаг watch.
$ flutter-view -w lib
Pug/HTML
Наша файловая структура похожа на структуры, которые мы встречаем в React или Angular. Здесь каждый экран и компонент расположен в своей собственной папке с файлами Pug и Sass. flutter-view автоматически сгенерирует новый файл Dart на основе этих двух файлов.
* lib 📂 * screens 📂 * loader 📂 * loader.pug * loader.sass * main.dart
Импортировав пакет flutter-view, мы можем приступить к созданию виджетов Flutter с помощью синтаксиса Pug. Создать новый stateless виджет можно, просто добавив тег и передав его (flutter-view).
Тогда все виджеты будут записаны в нижнем регистре, а слова разделены дефисами, поэтому appBar станет app-bar. Создание нового класса приведет к созданию пустого контейнера, на который мы сможем ссылаться в файле Sass. Мы также можем контролировать то, как он помечен, через его родительский виджет с помощью атрибута as.
Файл home.pug выглядит так:
home(flutter-view) scaffold app-bar(as='appBar') .siteName(as='title') Welcome
Когда вы сохраните это, должен сгенерироваться новый файл home.dart. Если мы заглянем внутрь, мы найдем кое-что довольно интересное.
import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter_view_widgets/flutter_view_widgets.dart'; Scaffold Home() { return Scaffold( // project://lib\home\home.pug#4,2 appBar: AppBar( // project://lib\home\home.pug#5,3 title: //-- TITLE ---------------------------------------------------------- Container( // project://lib\home\home.pug#6,4 child: Text( 'Alligator.io', ), ), ), ); }
flutter-view даже комментирует генерируемый код, чтобы упростить поиск и отладку.
Примечание: Если компилятор без причины начинает игнорировать отступы, перезапустите редактор – иногда такое бывает.
Любое свойство, которое нам нужно объявить для виджета, можно передать как обычный аргумент, следуя тому же формату именования, которому следуют виджеты. Если вам нужно что-то сделать с функциями, вы можете либо поставить перед ней @, чтобы заключить ее в скобки, либо использовать :^ для вывода без изменений (что лучше всего подходит для стрелочных функций).
Итак, файл home.pug выглядит так:
import(package='flutter_view_widgets/flutter_view_widgets.dart') loader(flutter-view) scaffold app-bar(as='appBar' center-title=true).bar .siteName(as='title') Alligator.io .bg(as='body') column: array(as='children') .logo .slogan Front-End Web Development, Chewed Up .subSlogan Angular 2+, Vue.js, React, Svelte JavaScript, CSS, Node.js... .btnText: button(:^on-pressed="() => print('Hello World')") See all posts
Работа с Sass
К сожалению, Sass – это не CSS, как мы его знаем, а просто синтаксис. Здесь нет ни CSS Grid, ни Flexbox, ни даже процентов. Мы ограничены свойствами, уже доступными для каждого конкретного виджета.
Работа с Sass происходит в файле global.sass.
Выможете выбрать контейнеры напрямую или через их классы/идентификаторы.
$solorized-light: #073642 $solorized-dark: #002b36 app-bar background-color: $solorized-light .bg background-color: $solorized-dark width: 500
У некоторых атрибутов есть модификации, влияющие на то, что нужно сгенерировать (поэтому теперь background-image может принимать url() или asset(), чтобы использовать изображение из локального или внешнего источника). Полный список измененных свойств вы найдете здесь.
@import '../global.sass' .logo background-image: url("https://aws1.discourse-cdn.com/netlify/original/2X/3/3c2117abab23d3cb409b49f75ca0ef8f46bb005c.png") height: 300 width: 300 .slogan color: #fff font-size: 30 text-align: center .subSlogan @extend .slogan margin-top: 15 font-size: 15 width: 300 .btnText margin-top: 40 font-size: 25 width: 200 height: 50 border-radius: 40 button color: $solorized-light text-color: white
Как только вы выучите этот процесс, привыкнете к нему, создание чего-то подобного займет вдвое меньше времени, чем на стандартном Dart.
Дополнительная конфигурация
flutter-view предоставляет подробный контроль над сгенерированными файлами. Для этого нужен только файл flutter-view.json в корневом каталоге вашего проекта.
В нижеприведенном примере мы просто говорим ему добавить пакет flutter-view к сгенерированным файлам по умолчанию и переназначаем button с RaisedButton на FlatButton.
{ "imports": [ "package:flutter_view_widgets/flutter_view_widgets.dart" ], "tagClasses": { "button": "FlatButton" } }
Заключение
Имея всего несколько строк, в этом мануале мы смогли легко сгенерировать в 2-3 раза больше кода Dart, не беспокоясь о скобках и типах. Кроме того, такой простой и понятный способ создания миксинов, циклов и условий делает разработку намного более быстрой и приятной.
Tags: Dart, Flutter, Sass