『Flutter-插件篇』實現(xiàn)一款超酷的動態(tài)天氣背景插件

前言

前不久锁保，利用周末時間學習并完成一個簡單的 Flutter 項目 - 簡悅天氣，簡約不簡單半沽，豐富不復雜爽柒，這是一款簡約風格的 flutter 天氣項目，提供實時者填、多日浩村、24 小時、臺風路徑占哟、語音播報以及生活指數(shù)等服務心墅，支持定位、刪除榨乎、搜索等操作怎燥。

下圖為主頁效果，點擊下載進行體驗：

home

之前發(fā)了三篇文章：

『Flutter-繪制篇』實現(xiàn)炫酷的雨雪特效
『Flutter-繪制篇』實現(xiàn)炫酷的雷電特效
『Flutter-繪制篇』實現(xiàn)夢幻的晴晚流星效果

對天氣背景動畫的具體實現(xiàn)做了詳情的分析和總結(jié)蜜暑，很多小伙伴私信我铐姚，希望可以出一個天氣動態(tài)背景插件。正好當時寫的時候肛捍，就以模塊化的思想隐绵，單一和解耦的設計原則，放置在單獨的 package 下篇梭，所以后續(xù)根據(jù)官方編寫插件文檔氢橙，抽成插件酝枢，希望給有需要的小伙伴能提供幫助恬偷。同時，分享如何寫一個高質(zhì)量插件的過程和注意事項帘睦。

因此袍患，本篇文章的主要兩個主題：

介紹 flutter_weather_bg 此插件的功能和使用說明
分享編寫插件的方法和注意事項

超酷的動態(tài)天氣背景插件

介紹

pub 地址

Github 地址

這是一款豐富炫酷的天氣動態(tài)背景插件，支持 15 種天氣類型竣付。

功能

支持 15 種天氣類型：晴诡延、晴晚、多云古胆、多云晚肆良、陰筛璧、小中大雨、小中大雪惹恃、霧、霾巫糙、浮塵和雷暴
支持動態(tài)縮放尺寸，適配多場景下展示
支持切換天氣類型時過度動畫

支持的平臺

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

安裝

添加 flutter_weather_bg: ^2.8.2 到 pubspec.yaml 文件中醉锄，并且導包：

import 'package:flutter_weather_bg/flutter_weather_bg.dart';

使用

通過創(chuàng)建 WeatherBg 配置天氣類型，需要傳入寬高來完成最終展示

WeatherBg(weatherType: _weatherType,width: _width,height: _height,)

截圖效果

對不同的特點進行相應的 gif 展示浙值。

全屏沉浸式翻頁效果

home

城市管理列表效果

list

多樣的宮格效果

grid

切換天氣類型時的過度動畫效果

check

修改寬高的適配效果

width_height

編寫一款高質(zhì)量的插件

目前 Flutter 那么火，離不開高熱度的社區(qū)以及豐富的插件妆够，所以如果有想法或者有能力的話，盡可能的為社區(qū)貢獻出一份微薄之力吧负蚊。

那既然選擇編寫并發(fā)布一款插件神妹，就要對其負責，不只是負責完成編碼任務家妆，盡可能的提供詳細的使用文檔說明，有條件的話伤极，以圖文并茂的方式更好，這樣開發(fā)者才會愿意使用你的插件哨坪。

創(chuàng)建插件項目

image

使用 Android Studio 可以直接創(chuàng)建 Flutter Plugin当编，或者直接通過命令 flutter create -t plugin flutter_demo_plugin 直接在當前文件夾生成插件目錄届慈。

創(chuàng)建好后忿偷，會生成如下的文件目錄：

image

目錄	描述
android/	android 端相關代碼
ios/	ios 相關代碼
example/	樣例演示項目
lib/	flutter 端代碼
test/	單元測試代碼
CHANGELOG	每個版本的更新日志說明
LICENSE	license 相關
pubspec.yaml	項目名稱、項目描述揍拆、版本茶凳、依賴等相關
README.md	項目的 readme 文檔

編寫插件邏輯

Android 端

在 android/src/main/java/com/example/flutter_demo_plugin/FlutterDemoPlugin.java 中編寫與 Android 端交互的邏輯嫂拴。

public class FlutterDemoPlugin implements FlutterPlugin, MethodCallHandler {

  private MethodChannel channel;

  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    channel = new MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "flutter_demo_plugin");
    channel.setMethodCallHandler(this);
  }

  public static void registerWith(Registrar registrar) {
    final MethodChannel channel = new MethodChannel(registrar.messenger(), "flutter_demo_plugin");
    channel.setMethodCallHandler(new FlutterDemoPlugin());
  }

  @Override
  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android " + android.os.Build.VERSION.RELEASE);
    } else {
      result.notImplemented();
    }
  }

  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {
    channel.setMethodCallHandler(null);
  }
}

創(chuàng)建 MethodChannel筒狠，定義通信的唯一標識 flutter_demo_plugin
注冊
根據(jù)方法來處理相應的邏輯

iOS 端

iOS 類似，只不過是按照 iOS 端的寫法窟蓝。

創(chuàng)建 FlutterDemoPlugin.h

#import <Flutter/Flutter.h>

@interface FlutterDemoPlugin : NSObject<FlutterPlugin>
@end

在 FlutterDemoPlugin.m 中編寫邏輯

#import "FlutterDemoPlugin.h"

@implementation FlutterDemoPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"flutter_demo_plugin"
            binaryMessenger:[registrar messenger]];
  FlutterDemoPlugin* instance = [[FlutterDemoPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}

@end

Flutter 端

直接在 lib/flutter_demo_plugin.dart 中調(diào)用定義好的方法即可：

class FlutterDemoPlugin {
  static const MethodChannel _channel =
      const MethodChannel('flutter_demo_plugin');

  static Future<String> get platformVersion async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

發(fā)布前準備

代碼邏輯編寫完畢，離發(fā)布還有最后一步状共，也是編寫高質(zhì)量插件的重要一步谁帕。

image

在項目發(fā)布后，等待一段時間匈挖，這里會有對項目的評價分數(shù)碾牌，開發(fā)者可以據(jù)此作為選擇的標準。那如何達到此標準儡循，接下來會進行介紹。

在 pubspec.yaml 中配置版本信息

// 配置項目名稱
name: flutter_demo_plugin
// 配置項目描述择膝，簡要并能概括項目的內(nèi)容和特點
description: A new Flutter plugin.
// 項目版本，每次發(fā)布更新肴捉，都需要增加此配置
version: 0.0.1
// 作者信息
author:
// 主頁信息
homepage:

environment:
  sdk: ">=2.7.0 <3.0.0"
  flutter: ">=1.20.0 <2.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

// 如果只是純 dart 插件，此斷可以不加
flutter:
  plugin:
    platforms:
      android:
        package: com.example.flutter_demo_plugin
        pluginClass: FlutterDemoPlugin
      ios:
        pluginClass: FlutterDemoPlugin
      macos:
        pluginClass: FlutterDemoPlugin
      web:
        pluginClass: FlutterDemoPlugin
        fileName: flutter_demo_plugin.dart

提供詳細的 README.md 項目使用介紹傲隶，最好是英文
提供詳細的 CHANGELOG.md 版本迭代更新日志
在 example/lib/main.dart 中窃页，要有詳細的代碼使用案例
代碼中，對公有方法和變量腮出，提供盡可能詳細的說明
完善插件支持平臺
代碼保證完整性芝薇、正確性和可編譯
插件包中的所有依賴要保證是最新版本

這些是通過腳本工具自動檢測，除此靜態(tài)的配置洛二，更重要的代碼質(zhì)量和盡可能的去維護攻锰，這樣才是一款合格的插件妓雾。

發(fā)布

最后娶吞，只需要通過 flutter packages pub publish --server=https://pub.dartlang.org 命令即可發(fā)布。

當看到：

image

恭喜證明你上傳成功了