Flutter数据可视化插件graphite的使用

Graphite 是一个用于在Flutter中绘制直接图、树形图和流程图的插件。它支持多种自定义选项，如节点和边的手势事件、方向设置（水平或垂直）、自定义构建器等。

支持作者

如果你喜欢这个库并希望支持未来的发布，请考虑捐赠给 Come Back Alive 慈善机构，该机构直接支持乌克兰军队。

示例演示

使用示例

以下是一个基本的示例，展示如何使用 Graphite 绘制一个简单的图表：

主要代码

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

void main() => runApp(MyApp());

const list = '['
    '{"id":"A","next":[{"outcome":"B"}]},'
    '{"id":"B","next":[{"outcome":"C"},{"outcome":"D"},{"outcome":"E"}]},'
    '{"id":"C","next":[{"outcome":"F"}]},'
    '{"id":"D","next":[{"outcome":"J"}]},{"id":"E","next":[{"outcome":"J"}]},'
    '{"id":"J","next":[{"outcome":"I"}]},'
    '{"id":"I","next":[{"outcome":"H"}]},{"id":"F","next":[{"outcome":"K"}]},'
    '{"id":"K","next":[{"outcome":"L"}]},'
    '{"id":"H","next":[{"outcome":"L"}]},{"id":"L","next":[{"outcome":"P"}]},'
    '{"id":"P","next":[{"outcome":"M"},{"outcome":"N"}]},'
    '{"id":"M","next":[]},{"id":"N","next":[]}'
    ']';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Graphite',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InteractiveViewer(
        constrained: false,
        child: DirectGraph(
          list: nodeInputFromJson(list),
          defaultCellSize: const Size(100.0, 100.0),
          cellPadding: const EdgeInsets.all(20),
          orientation: MatrixOrientation.Vertical,
        ),
      ),
    );
  }
}

功能特性

• 节点和边手势事件。
• 提供图形构建方向（水平或垂直）。
• 提供自定义构建器来创建节点小部件。
• 可以添加覆盖层。
• 可以为边添加文本或 Widget 标签。
• 提供自定义绘制器来绘制图形边缘。
• 可以自定义箭头和线条。

完整示例 Demo

下面是一个完整的示例应用，展示了如何使用 Graphite 插件的不同功能：

import 'package:flutter/material.dart';
import 'package:example/flowchart.dart';
import 'package:example/labels.dart';
import 'package:example/custom_edges.dart';
import 'package:example/digimon.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  void _onChangePage(BuildContext context, int index) {
    setState(() {
      _selectedIndex = index;
      Navigator.push(
          context,
          PageRouteBuilder(
              transitionDuration: const Duration(seconds: 1),
              pageBuilder: (_, __, ___) => [
                    FlowchartPage(bottomBar: _buildBottomBar),
                    LabelsPage(bottomBar: _buildBottomBar),
                    DigimonPage(bottomBar: _buildBottomBar),
                    CustomEdgesPage(bottomBar: _buildBottomBar)
                  ][index]));
    });
  }

  Widget _buildBottomBar(BuildContext context) {
    return BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.account_tree, color: Theme.of(context).disabledColor),
          activeIcon: Icon(Icons.account_tree, color: Theme.of(context).primaryColor),
          label: 'Flowchart',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.text_format_outlined, color: Theme.of(context).disabledColor),
          activeIcon: Icon(Icons.text_format_outlined, color: Theme.of(context).primaryColor),
          label: 'Labels',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.layers, color: Theme.of(context).disabledColor),
          activeIcon: Icon(Icons.layers, color: Theme.of(context).primaryColor),
          label: 'Overlays',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.stacked_line_chart, color: Theme.of(context).disabledColor),
          activeIcon: Icon(Icons.stacked_line_chart, color: Theme.of(context).primaryColor),
          label: 'Edges',
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.teal[800],
      onTap: (index) => _onChangePage(context, index),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Graphite',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
                primarySwatch: Colors.teal, backgroundColor: Colors.white)
            .copyWith(surface: Colors.white),
      ),
      home: FlowchartPage(bottomBar: _buildBottomBar),
      routes: <String, WidgetBuilder>{
        '/flowchart': (BuildContext context) =>
            FlowchartPage(bottomBar: _buildBottomBar),
        '/labels': (BuildContext context) =>
            LabelsPage(bottomBar: _buildBottomBar),
        '/digimon': (BuildContext context) =>
            DigimonPage(bottomBar: _buildBottomBar),
        '/complex': (BuildContext context) =>
            CustomEdgesPage(bottomBar: _buildBottomBar),
      },
    );
  }
}

许可证

MIT © lempiy

以上内容详细介绍了如何在Flutter中使用Graphite插件进行数据可视化，并提供了完整的示例代码和功能说明。希望这些信息能帮助你在项目中有效地使用Graphite插件。