graphite 1.2.0 copy "graphite: ^1.2.0" to clipboard
graphite: ^1.2.0 copied to clipboard

Flutter widget to easily draw direct graphs, trees, flowcharts. Includes gesture API to create graphs interactions.

example/lib/main.dart

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.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),
    );
  }

  // This widget is the root of your application.
  @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),
      },
    );
  }
}
163
likes
130
points
1.68k
downloads

Publisher

unverified uploader

Weekly Downloads

Flutter widget to easily draw direct graphs, trees, flowcharts. Includes gesture API to create graphs interactions.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

arrow_path, flutter, touchable

More

Packages that depend on graphite