Как использовать Pug и Sass с flutter-view

10 сентября, 2021 11:40 дп 145 views | Комментариев нет

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

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: , ,

Добавить комментарий