Flutter-viewを使用したFlutterでのパグとサスの使用
Flutterが大好きでしたが、Web開発の世界から初めてFlutterにアクセスしたときは、Flutterの構造に少し不安がありました。 ロジック、スタイル、マークアップがすべて1つの場所にあり、多数の角かっことカンマの中に混在しています。 flutter-view を発見したので、Flutterを操作するときの主要なツールの1つになりました。
flutter-viewはDartに代わるものではなく、PugとSassをFlutterで完全に使用できるようにするものでもありません。 これは、ビューを分離してよりクリーンな方法で開発できるようにすることで、ワークフローを補足するものです。 インデント、ミックスイン、ループ、その他の機能を備えたPugとSass(またはHTMLとCSS)の構文が与えられていますが、使用しているウィジェットの制限に制限されています。 少なくとも私にとっては、CSSが許可するものに到達するのは非常に簡単であり、CSSグリッドの使用や列ウィジェットへの幅の追加など、何も機能しないのはなぜか疑問に思うため、これを覚えておく必要があります。
パグに慣れていない場合や少し錆びている場合は、ここでブラッシュアップするか、Sassがここで実行できるすばらしいことをいくつか読んでください。
インストールとセットアップ
flutter-viewはまだかなり新しいパッケージなので、最新バージョンとdocsで変更を確認することをお勧めします。
$ flutter create flutter_view_example
dependencies:
flutter:
sdk: flutter
flutter_view_widgets: ^1.0.6
次に、2つのターミナルを開く必要があります。1つはflutter-view
を実行するためのもので、もう1つはアプリ用です。 必要なのは、コンパイルするコードの場所、通常はlib
フォルダー、および監視フラグだけです。
$ flutter-view -w lib
パグ/HTML
私たちのファイル構造は、ReactまたはAngularで見られるものと似ており、すべての画面とコンポーネントがPugandSassファイルとともに独自のフォルダーにあります。 flutter-viewは、両方に基づいて新しいDartファイルを自動的に生成します。
* lib 📂
* screens 📂
* loader 📂
* loader.pug
* loader.sass
* main.dart
flutter-viewパッケージをインポートすると、Pug構文を使用してFlutterウィジェットの作成を開始できます。 タグを追加して(flutter-view)
を渡すだけで、新しいステートレスウィジェットを作成できます。
これで、すべてのウィジェットが小文字になり、単語がハイフンで区切られるため、appBar
はapp-bar
になります。 新しいクラスを作成すると、Sassファイルで参照できる空のコンテナが生成されます。 as
属性を使用して、親ウィジェットでのラベル付けを制御することもできます。
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はすべてにコメントを付けて、デバッグ中に何かを簡単に見つけられるようにします。
コンパイラが理由もなくインデントについての適合をスローし始めた場合は、エディタを再起動してください。たまにそのようになります。
ウィジェットに対して宣言する必要のあるプロパティはすべて、ウィジェットと同じ命名形式に従って、通常の引数として渡すことができます。 関数で何かを行う必要がある場合は、前に@
を付けて角かっこで囲むか、:^
をそのまま出力します。これは矢印関数に最適です。
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
サス
残念ながら、これはご存知のようにCSSではなく、単に構文です。 CSSグリッド、 Flexbox 、レムやパーセンテージすらありません。 特定の各ウィジェットですでに使用可能なプロパティのみに制限されています。
コンテナは直接選択することも、クラス/IDを使用して選択することもできます。
$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"
}
}
まとめ
わずか数行で、1つの角かっこやタイプエラーを心配することなく、2〜3倍の量のDartコードを簡単に生成できました。 さらに、ミックスイン、ループ、および条件をクリーンに作成する方法があると、開発が非常に迅速で楽しいものになります。
flutter-viewは、私のすべての個人的なプロジェクトの頼みの綱になりました。あなたにもそうなることを願っています。