天天看點
傳回

Flutter自制工具之fluct助力Flutter快速開發神器

Flutter自制工具之fluct助力Flutter快速開發神器

image

fluct

一個幫助開發Flutter應用程式的工具

.----------------------------------------------

| github位址:

| https://github.com/rhymelph/fluct

| pub位址：

| https://pub.dev/packages/fluct

`----------------------------------------------

安裝

該工具無需添加到依賴項中，我們隻需要激活即可,使用如下指令：

$ pub global activate fluct
# 或者
$ flutter pub global activate fluct

複制

使用

fluct

目前隻有兩個指令

create

和

gen-assets

  • create

     用于建立檔案及

    widget

     ,檔案名按

    Dart

     檔案命名規則指定的單詞與單詞之間添加下劃線，并無需指定

    .dart

     字尾，例如:

    index_page

  • gen-assets

     用于自動生成Flutter的資源檔案綁定

fluct create

在

Flutter

開發過程中，我們建立檔案是必須的，而AS自帶的建立檔案，并沒有自動的生成相關的内容，這會讓開發者非常的苦惱，類名還需要自己手動敲的話，而該指令，直接可以一步到位。

當運作此指令後，指令行會輸出以下内容

Help Flutter application create a new file

Usage: fluct create [arguments] <path>
-h, --help            Print this usage information.
-t, --type            
          [custom]    Create a new file about custom widget in 'fluct.yaml'
                      建立自定義widget的檔案，-a 為 指定你在‘fluct.yaml’檔案聲明的指令
          [stful]     Create a new file about StatefulWidget
                      建立StatefulWidget檔案
          [stless]    Create a new file about StatelessWidget
                      建立StatelessWidget檔案

-a, --arg             create a new file about your custom widget use arg in 'fluct.yaml'
                      使用你在'fluct.yaml'聲明的指令

Run "fluct help" to see global options.

複制

可以看到，該指令輸出的内容是簡單易懂的，我們來簡單使用一下吧。

簡單使用

建立

IndexPage

頁面，繼承自

StatefulWidget

,可以使用如下指令:

$ fluct create -t stful ./index_page
Create a new file about StatefulWidget
create class IndexPage
create success
exit 0

複制

運作成功之後，我們會在項目下找到

index_page.dart

檔案，内容為:

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

複制

當然，你也可以指定哪個檔案夾，例如，我要在./lib/src/page 檔案夾下建立

IndexPage

，使用如下指令

$ fluct create -t stful ./lib/src/page/index_page

複制

自定義内容的檔案

在開始之前，我們需要在項目根目錄下建立一個

fluct.yaml

檔案,因為

fluct create -t custom

指令會找到它，内容如下：

inh: |
  import 'package:flutter/material.dart';

  class $NAME$ extends InheritedWidget {
    const $NAME$({
      Key key,
      @required Widget child,
    })  : assert(child != null),
          super(key: key, child: child);

    static $NAME$ of(BuildContext context) {
      return context.dependOnInheritedWidgetOfExactType(aspect: $NAME$) as $NAME$;
    }

    @override
    bool updateShouldNotify($NAME$ old) {
      return false;
    }
  }

複制

這裡，我聲明了

inh

指令，然後運作這個指令之後會在生成檔案的時候添加

inh

對應的内容，内容中我們值得注意的是

$NAME$

占位符，該字元串會被替換成根據檔案名生成的内容，例如：

index_page

會插入

IndexPage

到

$NAME$

占位符中，最後，我們運作以下指令:

$ fluct create -t custom -a inh ./index_inherited

複制

運作成功之後，我們能夠在根目錄下找到

index_inherited.dart

檔案，内容也是對應的自定義内容

import 'package:flutter/material.dart';

class IndexInherited extends InheritedWidget {
  const IndexInherited({
    Key key,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);

  static IndexInherited of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType(aspect: IndexInherited) as IndexInherited;
  }

  @override
  bool updateShouldNotify(IndexInherited old) {
    return false;
  }
}

複制

<span style="color:#f00">(NEW)<span>

fluct gen-assets

我們在使用資源檔案時，需要在

pubspec.yaml

檔案聲明資源檔案的路徑

例如：我在

./assets/images

檔案夾下添加

a.png

圖檔，需要在

pubspec.yaml

檔案下聲明

flutter:
  assets:
    - assets/images/a.png

複制

或者使用檔案夾路徑

flutter:
  assets:
    - assets/images/

複制

這一步如果檔案多起來，很容易出現混亂，導緻聲明麻煩，引用麻煩，并随着項目的疊代，資源檔案有些不用了，也不知道哪個是哪個，這個時候，

fluct gen-assets

指令幫到你

當運作

fluct gen-assets -h

會輸出以下内容

Auto generate assets to dart file

Usage: fluct gen-assets [arguments] <path>
-h, --help      Print this usage information.
-a, --assets    your asset directory path -- default ./assets
                你的資源檔案夾路徑，預設為目前目錄下的`assets`檔案夾
-o, --output    your output directory path -- default ./lib/generated
                你要輸出的`a.dart`檔案的路徑
Run "fluct help" to see global options.

複制

到此，你已經擁有了自動資源綁定的功能了，輸入

fluct gen-assets

即可

Flutter自制工具之fluct助力Flutter快速開發神器

image

你可以看到，輸出的内容也是非常的友好！然後我們來看以下

a.dart

檔案

// fluct gen-assets command generated.
// author:  rhyme_lph
// github:  https://github.com/rhymelph
// version: 1.0.3
class A {
  static final String  assetsVillageMyMsg = 'assets/village/my_msg.png';
  static final String  assetsVillageVRepair = 'assets/village/v_repair.png';
  static final String  assetsVillageVPropertyFee = 'assets/village/v_property_fee.png';
  static final String  assetsVillageVVoting = 'assets/village/v_voting.png';
  static final String  assetsVillageIcCompany = 'assets/village/ic_company.png';
  static final String  assetsVillageIcRightArrow = 'assets/village/ic_right_arrow.png';
  static final String  assetsVillageVComplain = 'assets/village/v_complain.png';
  static final String  assetsVillageIcLaw = 'assets/village/ic_law.png';
  static final String  assetsVillageIcSearch = 'assets/village/ic_search.png';
  static final String  assetsVillageIvFamilyNorepair = 'assets/village/iv_family_norepair.png';
  static final String  assetsVillageIcUploadPic = 'assets/village/ic_upload_pic.png';
  static final String  assetsVillageIvFamilyNocomplaint = 'assets/village/iv_family_nocomplaint.png';
  static final String  assetsVillageIvFamilyNoad = 'assets/village/iv_family_noad.png';
  static final String  assetsVillageIcGovernment = 'assets/village/ic_government.png';
  static final String  assetsVillageVHouse = 'assets/village/v_house.png';

  static final String  assetsPayPayTypeWx = 'assets/pay/pay_type_wx.png';
  static final String  assetsPayPayTypeAbc = 'assets/pay/pay_type_abc.jpg';
  static final String  assetsPayPayTypeAli = 'assets/pay/pay_type_ali.png';

  static final String  assetsMessageArticle4 = 'assets/message/article_4.jpg';
  static final String  assetsMessageArticle1 = 'assets/message/article_1.jpg';
  static final String  assetsMessageArticle3 = 'assets/message/article_3.jpg';
  static final String  assetsMessageArticle2 = 'assets/message/article_2.jpg';
  static final String  assetsMessageMReturn = 'assets/message/m_return.png';

  static final String  assetsMineDefaultAvatar = 'assets/mine/default_avatar.png';
  static final String  assetsMineMyMsg = 'assets/mine/my_msg.png';
  static final String  assetsMineHwpushIcToolbarRefresh = 'assets/mine/hwpush_ic_toolbar_refresh.png';
  static final String  assetsMineArrowRight = 'assets/mine/arrow_right.png';
  static final String  assetsMineWhiteRight = 'assets/mine/white_right.png';
  static final String  assetsMineIvCardEmblem = 'assets/mine/iv_card_emblem.png';
  static final String  assetsMineHomeCenterNormal = 'assets/mine/home_center_normal.png';
  static final String  assetsMineUserCenterNormal = 'assets/mine/user_center_normal.png';
  static final String  assetsMineVideoCamera = 'assets/mine/video_camera.png';
  static final String  assetsMineShare = 'assets/mine/share.png';
  static final String  assetsMineIconCamera = 'assets/mine/icon_camera.png';
  static final String  assetsMineIvCardFace = 'assets/mine/iv_card_face.png';
  static final String  assetsMineMySetting = 'assets/mine/my_setting.png';
  static final String  assetsMineUmiIdentity = 'assets/mine/umi_identity.png';
  static final String  assetsMineUmiModfiyPwd = 'assets/mine/umi_modfiy_pwd.png';
  static final String  assetsMineMyBill = 'assets/mine/my_bill.png';

  static final String  assetsLoginIcClose = 'assets/login/ic_close.png';
  static final String  assetsLoginIcLauncher = 'assets/login/ic_launcher.png';
  static final String  assetsLoginIcLoginBg = 'assets/login/ic_login_bg.png';
  static final String  assetsLoginIcEyesClose = 'assets/login/ic_eyes_close.png';
  static final String  assetsLoginIcEyesOpen = 'assets/login/ic_eyes_open.png';
}

複制

所有的内容都聲明好了，

very good ~

Flutter中運作指令

有小夥伴可能會疑惑，

fluct create

運作之後會發現未找到指令，可能你使用了

flutter pub global activate fluct

指令激活，這個時候，我們可以使用

flutter pub run fluct create

運作

最後，希望大家喜歡這個工具，并關注我，了解更多關于

Flutter/Dart開發
上一篇: JS數組的應用二
下一篇: 王爽彙編語言第二版學習筆記之實驗13(2)