relations 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 40

Allround Relations #

A flutter package to set up a zoomable and scrollable area where you can manage nodes in realtime.

External packages are:

  • bloc
  • flutter_bloc
  • rxdart
  • vector_math

Features #

  • You can scroll the stage area by panning with one finger (just like in google maps).
  • Zooming is also available by using two fingers.
  • Nodes and the links between them are selectable by tapping on them.
  • After connection mode has enabled, you can select two boxes (nodes) to connect them.
  • After you have selected a node, you can move that by panning with your finger.
  • Touching to the empty area will casuse to unselect a selected item. If no item is selected, a popup menu will be opened and you can add a new node to the scene, choose an arrangment method or zoom to the tapped position.
  • By pressing home button the view will be reset.
  • In the background, the state of nodes is represented by a graph. So by pressing on save icon, you will receive the actual state of the stage in the given callback, containing the graph as a parameter.

Usage #

You can create a GraphNode with the following parameters:

  • id
    • optional
    • if no id is given, the package will automatically generate one
    • Ids are used for inside identification
  • position
    • relative to the top-left corner of the stage (0,0)
  • size
    • optional
    • if no size is provided, the wrapper box sizes itself to match the child
    • if size is provided, the wrapper box will be a fixed size box and child will not overflow
  • visible
  • data
    • any type of data to store
  • widget
    • the widget to display inside the box
GraphNode _getNode()  {
    return 
      GraphNode( 
        position: Offset(20, 40), 
        size: const Size(80, 80),
        data: "Some data to store", 
        widget: Container(
          color: Colors.lightBlue,
          padding: EdgeInsets.all(10.0),
          child: FittedBox(
            fit: BoxFit.contain, 
            child: Text(
              "A node",
              style: TextStyle(
                color: Colors.orange[300],
                decoration: TextDecoration.none
              )
            )
          )
        )
      );
}

To set up the stage:

StageConfig config = StageConfig(
    nodes: _getNodes(),
    onSave: _handleSave,
    onAddNew: _nodeProvider,
    initialZoom: 0.4,
    stageSize: const Size(2000, 2000),
    theme: const StageTheme()
);

For further practical information please take a look at the example.

Contact #

Allround Informatika Kft.

email: development@allround.net

website: https://allround.net

[1.0.0] - 2020.03.17. #

Updated to v1.0.0

[0.0.5] - 2020.03.17. #

External packages are updated.

[0.0.1] - 2020.03.12. #

A flutter package to set up a zoomable and scrollable area where you can manage nodes in realtime.

example/lib/main.dart

import "package:relations/relations.dart";
import "package:flutter/material.dart";

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

class RelationsTest extends StatelessWidget {

  final Size stageSize = Size(4000, 4000);
  final double boxPadding = 10.0;

  Widget _getText({String title = "untitled", Color textColor = const Color.fromARGB(255, 30, 30, 30),}) {
    return 
      Text(
        title,
        style: TextStyle(
          color: textColor,
          decoration: TextDecoration.none
        )
      );
  }

  Widget _getBox({
      Color boxColor = Colors.lightBlue,
      Widget innerWidget
    }) {
    return 
      Container(
        color: boxColor, 
        padding: EdgeInsets.all(boxPadding),
        child: FittedBox(
          fit: BoxFit.contain, 

          child: innerWidget
        )
      );
  }

  Widget _getIcon({IconData iconData = Icons.favorite}) {
    return  
      Icon(
        iconData,
        color: Colors.red,
        size: 24.0
    );
  }

  List<GraphNode> _getNodes()  {

    const double size = 150; 
    /// if no size is provided to a node, the wrapper box sizes itself to match the child.
    return [
      GraphNode( 
        position: stageSize.center(Offset(0, 0)) - Offset(size/2.0, size/2.0),
        size: const Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-1")
        ),
        data: "some data"
      ),
      GraphNode( 
        /// position: Offset(200,200),
        size: const Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-3")
        ),
        data: "some data"
      ),
      GraphNode( 
        /// position: Offset(200,200),
        size: const Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-3")
        ),
        data: "some data"
      ),
      GraphNode( 
        /// position: Offset(200,200),
        size: const Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-4")
        ),
        data: "some data"
      ),
      GraphNode(
        position: Offset(200,200), 
        size: Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-5")
        )
      ),
      GraphNode(
        position: Offset(200,200), 
        size: Size(size, size), 
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getIcon()
        )
      ),
    ];
  }

  void _onSave(Graph graph) {
    print(graph);
  }

  GraphNode _nodeProvider(Offset position) {
    String id = GraphNode.nextID;
    return 
      GraphNode(
        id: id,
        position: position,
        size: Size(150, 150),
        widget: _getBox(
          boxColor: const Color.fromRGBO(167, 204, 237, 1.0),
          innerWidget: _getText(title: "node-$id")
        )
      );
  }

  @override
  Widget build(BuildContext context) {

    StageConfig config = StageConfig(
      nodes: _getNodes(),
      onSave: _onSave,
      onAddNew: _nodeProvider,
      initialZoom: 0.4,
      stageSize: stageSize,
      theme: const StageTheme()
    );

    return MaterialApp(
      title: "Allround Relations",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StageWrapper(stageConfig: config)
    );
  }

}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  relations: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:relations/relations.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
15
Health:
Code health derived from static analysis. [more]
75
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
50
Overall:
Weighted score of the above. [more]
40
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health issues and suggestions

Fix lib/view/stage_items/wrapper_box.dart. (-25 points)

Analysis of lib/view/stage_items/wrapper_box.dart failed with 1 error:

line 221 col 8: The argument type 'Null Function(String)' can't be assigned to the parameter type 'void Function(Object)'.

Maintenance issues and suggestions

No valid SDK. (-20 points)

The analysis could not detect a valid SDK that can use this package.

Support latest dependencies. (-30 points)

The version constraint in pubspec.yaml does not support the latest published versions for 3 dependencies (bloc, flutter_bloc, rxdart).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
bloc ^3.0.0 3.0.0 4.0.0
flutter 0.0.0
flutter_bloc ^3.2.0 3.2.0 4.0.0
rxdart ^0.23.1 0.23.1 0.24.1
vector_math ^2.0.8 2.0.8
Transitive dependencies
collection 1.14.12
meta 1.1.8
nested 0.0.4
provider 4.1.2
sky_engine 0.0.99
typed_data 1.1.6
Dev dependencies
flutter_test