Speaking of diagrams, I did a bit of a search and found the Flutter_echarts library, which as its name suggests is the echarts component library we use all the time. Now that there is a ready-made library, just use it. But with a learning attitude, I looked at how others wrote plug-ins. Analysis of a wave

How to use flutter_echarts plugin

The ultimate goal is to create a plugin that is similar to the Flutter_echarts library. End result:

Create a Package bag

Flutter_native_echart is the project name, flutter create --org com.example --template=plugin flutter_native_echartCopy the code

And when I’m done,

If you run into problems, follow the prompts and you can eventually do it.

Analysis of the code

Open the project and you can see the file flutter_native_echart. Delete the contents of the file first. Echarts is based on webView display. So add it to the pubspec.yaml file

webview_flutter: ^1.07.
Copy the code

Imported in the flutter_native_echart.dart file

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

The main file is to load js, see echarts_script.dart in Flutter_echarts. Just create a new file and put it in

The specific implementation

The general idea is that the evaluateJavascript method of webView_flutter is processed after the page has loaded. This is done by concatenating strings. Post the main code.

 WebViewController _controller;
 
 await_controller? .evaluateJavascript(''' $echartJS var chart = echarts.init(document.getElementById('chart'), $themeStr); chart.setOption(${option}, true); ' ' ');
Copy the code

The plug-in you create will have an Example project that you can run to see the result. The direct code is all posted

import 'package:flutter/material.dart';
import 'package:flutter_native_echart/flutter_native_echart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget{@override
  _MyAppState createState() = >_MyAppState(a); }class _MyAppState extends State<MyApp> {@override
  void initState() {
    super.initState(a); } @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SingleChildScrollView(
        child: Padding( padding: EdgeInsets.only(top: 30), child: Column( children: [ this.renderEchartBei(), this.renderEchartBar(), this.renderEchartLine()],), ),
      )),
    ); }}Copy the code

RenderEchartBei (), renderEchartBar(), and renderEchartLine() are as follows:

ECharts(
        option: } "{// Echarts can use echarts as an example.,
      ),
      width: 420,
      height: 300,);Copy the code

Just paste the code into the echarts instance, and it feels like a pretty good implementation. Of course, you can also publish your own plug-in hahaha…

The last

A variety of charts can be drawn using the CustomPainter in Flutter. This is set according to the specific requirements of the page. Of course, I am also learning, of course, what other projects need to be integrated in the work, while accumulating while encapsulating

One more things…

  • Find an app and copy a project (I don’t know which one yet)