Step by step to build a Flutter development shelf-chart

Step by step to build a Flutter development shelf-chart

Speaking of charts, I searched for information and saw that there is a flutter_echarts library, which, as the name suggests, is our commonly used echarts component library. Now that there is a ready-made library, just use it directly. But I took a look at how people write plug-ins with a learning attitude. Analyze a wave

The introduction of the flutter_echarts plug-in and how to use it, let s not talk about it. If you are anxious, go directly to the portal.

The ultimate goal is to learn the entire plug-in myself, and understand this to complete a plug-in similar to the flutter_echarts library. It is easy to understand and you will see it at a glance. final effect:

Create Package

flutter create --org com.example --template=plugin flutter_native_echart

After completion,

If you encounter problems, follow the prompts and finally you can complete it.

Analysis code

Open the project and you can see the file flutter_native_echart, first delete the contents of the file. In line with echarts is displayed based on webView. So add in the pubspec.yaml file

webview_flutter: ^1.0.7

Introduced in the flutter_native_echart.dart file

import 'package:webview_flutter/webview_flutter.dart';

The main file is to load js. Look at the echarts_script.dart in flutter_echarts for this purpose. For this, we go directly to the echarts official website to download the latest one. Create a new file and put it in and it's OK


The general idea is to use the evaluateJavascript method of webView_flutter to process after the page is loaded. The specific method is to splice strings. The main code is posted.

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

The created plug-in will have an example project, you can run to see the results of the project. Directly paste all the code

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

void main() {

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  void initState() {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(top: 30),
          child: Column(
            children: [


The renderEchartBei(), renderEchartBar(), renderEchartLine() methods are as follows:

        option: '''
       // echarts OK 
      width: 420,
      height: 300,

Just paste the code directly in the echarts instance, and it feels very good to implement. Of course, you can also publish your own plug-in hahahaha. . .

At last

Use CustomPainter in flutter to draw a variety of charts. This is set according to the specific requirements of the page. Of course I am also studying, of course, what needs to be integrated in the project at work, while accumulating and encapsulating

one more things. . . . . .

  • Find an app and imitate a project (which one has not been figured out yet)