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 
package.yml
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)を渡すだけで、新しいステートレスウィジェットを作成できます。

これで、すべてのウィジェットが小文字になり、単語がハイフンで区切られるため、appBarapp-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

サス

残念ながら、これはご存知のようにCSSではなく、単に構文です。 CSSグリッド Flexbox 、レムやパーセンテージすらありません。 特定の各ウィジェットですでに使用可能なプロパティのみに制限されています。

コンテナは直接選択することも、クラス/IDを使用して選択することもできます。

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()のいずれかを使用して、ローカルまたは外部ソースを使用できます。 変更されたプロパティの完全なリストはここにあります。

home.sass
@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

App screenshot example

プロセスに慣れたら、このようなものを作成すると、標準のDartの場合の半分の時間で簡単に作成できます。

追加の構成

flutter-viewを使用すると、生成されたファイルを適切に制御できます。 プロジェクトのルートにflutter-view.jsonファイルが必要なだけで、準備は完了です。

ここでは、デフォルトで生成されたファイルにflutter-viewパッケージを追加するように指示し、buttonRaisedButtonからFlatButtonに再マッピングしています。

flutter-view.json
{
    "imports": [
        "package:flutter_view_widgets/flutter_view_widgets.dart"
    ],
    "tagClasses": {
        "button": "FlatButton"
    }
}

まとめ

わずか数行で、1つの角かっこやタイプエラーを心配することなく、2〜3倍の量のDartコードを簡単に生成できました。 さらに、ミックスイン、ループ、および条件をクリーンに作成する方法があると、開発が非常に迅速で楽しいものになります。

flutter-viewは、私のすべての個人的なプロジェクトの頼みの綱になりました。あなたにもそうなることを願っています。