“Flutter – plug-in article” to implement the dynamic weather background of a cool plugin | the nuggets technical essay – double festival special articles

preface

Not long ago, I used the weekend to learn and complete a simple Flutter project — Simple Weather, simple but not simple, rich but not complex. This simple Flutter weather project provides real-time, multi-day, 24-hour, typhoon path, voice broadcast and life index services. Supports location, deletion, and search.

The following picture shows the homepage effect. Click Download to experience it:

Three previous posts:

• “Flutter- Draw” achieves cool rain and snow effects
• “Flutter- Draw” achieves cool thunder and lightning effects
• “Flutter- Draw” achieves a dreamy meteor effect

Detailed analysis and summary of the specific implementation of the weather background animation, many friends wrote to me, I hope to create a weather dynamic background plug-in. When I was writing it, I placed it in a separate package with the idea of modularity and the design principle of unitary and decoupling. Therefore, I wrote plug-in documents according to the official documents and selected plug-ins, hoping to provide help to friends in need. Also, share the process and considerations of writing a high-quality plug-in.

Therefore, the two main themes of this article are:

1. This section describes the functions and usage of flutter_weather_bg
2. Share tips and considerations for writing plug-ins

Cool dynamic weather background plugin

introduce

Address of the pub

Making the address

This is a rich and cool weather dynamic background plugin that supports 15 weather types.

function

• Supports 15 weather types: sunny, sunny late, cloudy, cloudy late, overcast, light to heavy rain, light to heavy snow, fog, haze, floating dust, and thunderstorm
• Support dynamic scaling, suitable for multi-scene display
• Support over animation when switching weather types

Supported Platforms

• Flutter Android
• Flutter iOS
• Flutter web
• Flutter desktop

The installation

Add flutter_weather_bg: ^2.8.2 to pubspec.yaml and guide package:

import 'package:flutter_weather_bg/flutter_weather_bg.dart';
Copy the code

use

Configuring the weather type by creating a WeatherBg requires passing in the width and height to complete the final display

WeatherBg(weatherType: _weatherType,width: _width,height: _height,)
Copy the code

Capture effect

Different features for the corresponding GIF display.

1. Full screen immersive page-turning effect

2. City management list effect

3. Various palace effects

4. Excessive animation when switching weather types

5. Modify the width and height adaptation effect

Write a high-quality plug-in

Flutter is so popular right now that it has a hot community and lots of plugins, so if you have an idea or have the ability to contribute as little as possible to the community.

If you choose to write and publish a plug-in, take responsibility for it, not just for coding, but for providing as much documentation as possible, and if possible, in an illustrated way, so that developers will want to use your plug-in.

Creating a plug-in project

You can create the Flutter Plugin directly using Android Studio, or generate the Plugin directory directly from the current folder by using the Flutter create -t Plugin flutter_demo_plugin command.

After creation, the following directories are generated:

Writing plug-in logic

The Android end

In android/SRC/main/Java/com/example/flutter_demo_plugin/FlutterDemoPlugin. Written in Java and android client interaction logic.

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); }}Copy the code

1. createMethodChannelFlutter_demo_plugin, which defines the unique identifier for communication
2. registered
3. Process the corresponding logic according to the method

The iOS side

IOS is similar, but it’s written on iOS.

1. createFlutterDemoPlugin.h

#import <Flutter/Flutter.h>

@interface FlutterDemoPlugin : NSObject<FlutterPlugin>
@end
Copy the code

2. inFlutterDemoPlugin.mWrite logic in

#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
Copy the code

The Flutter end

Dart calls the defined method directly from lib/flutter_demo_plugin.dart:

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

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

Pre-release preparation

Once the code logic is written, the final step to release is an important step in writing high-quality plug-ins.

After a project is released, wait a while and there will be a review score for the project, which the developer can use as a criterion for selection. How to achieve this standard will be described next.

1. Configure the version information in pubspec.yaml

Name: flutter_demo_plugin // Description: flutter_demo_plugin // Description: flutter_demo_plugin Version: 0.0.1 // author information: // homepage information: environment: SDK: ">=2.7.0 <3.0.0" flutter: ">=1.20.0 <2.0.0" flutter: SDK dev_flutter: SDK Flutter / / if only pure dart plug-ins, the fault can not add 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.dartCopy the code

2. Provide a detailed introduction to the readme. md project, preferably in English

3. Provides detailed changelog. md iteration update logs

4. In example/lib/main.dart, there is a detailed use case for the code

5. Provide as much detail as possible about public methods and variables in your code

6. Improve plug-in support platform

7. The code is guaranteed to be complete, correct, and compilable

8. Ensure that all dependencies in the plug-in package are up to date

These are automatically detected by scripting tools, in addition to static configuration, more important code quality and as much as possible to maintain, so that a qualified plug-in.

release

Finally, the flutter packages pub publish –server=https://pub.dartlang.org command is used to publish.

When you see:

Congratulations on your successful upload

🏆 nuggets technical essay | double festival special articles