Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
MIT License
420
stars
114
forks
source link
RenderCustomLayoutBox does not meet its constraints on empty initState #43
import 'dart:html';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:graph_page/service/service.dart';
import 'package:graphview/GraphView.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: TreeViewPage(),
);
}
class TreeViewPage extends StatefulWidget {
@override
_TreeViewPageState createState() => _TreeViewPageState();
}
class _TreeViewPageState extends State<TreeViewPage> {
@override
Widget build(BuildContext context) {
var appBar = AppBar();
return Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.blue[100],
child: Text("sdfsf"),
),
),
Expanded(
flex: 4,
child: Container(
color: Colors.green[100],
child: InteractiveViewer(
constrained: false,
boundaryMargin: EdgeInsets.all(100),
minScale: 0.01,
maxScale: 5.6,
child: GraphView(
graph: graph,
algorithm: BuchheimWalkerAlgorithm(
builder, TreeEdgeRenderer(builder)),
paint: Paint()
..color = Colors.green
..strokeWidth = 1
..style = PaintingStyle.stroke,
builder: (Node node) {
// I can decide what widget should be shown here based on the id
var a = node.key!.value as int;
return rectangleWidget(a);
},
)),
),
),
],
));
}
Random r = Random();
Widget rectangleWidget(int a) {
return InkWell(
onTap: () {
print('clicked');
},
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 15.0, // soften the shadow
spreadRadius: 5.0, //extend the shadow
)
],
// boxShadow: [
// BoxShadow(color: Colors.blue[100]!, spreadRadius: 1),
// ],
),
child: Text('Node ${a}')),
);
}
final Graph graph = Graph()..isTree = true;
BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
@override
void initState() {
// final node1 = Node.Id(1);
// final node2 = Node.Id(2);
// graph.addEdge(node1, node2);
/*
final node1 = Node.Id(1);
final node2 = Node.Id(2);
final node3 = Node.Id(3);
final node4 = Node.Id(4);
final node5 = Node.Id(5);
final node6 = Node.Id(6);
final node8 = Node.Id(7);
final node7 = Node.Id(8);
final node9 = Node.Id(9);
final node10 = Node(rectangleWidget(10)); //using deprecated mechanism of directly placing the widget here
final node11 = Node(rectangleWidget(11));
final node12 = Node(rectangleWidget(12));
graph.addEdge(node1, node2);
graph.addEdge(node1, node3, paint: Paint()..color = Colors.red);
graph.addEdge(node1, node4, paint: Paint()..color = Colors.blue);
graph.addEdge(node2, node5);
graph.addEdge(node2, node6);
graph.addEdge(node6, node7, paint: Paint()..color = Colors.red);
graph.addEdge(node6, node8, paint: Paint()..color = Colors.red);
graph.addEdge(node4, node9);
graph.addEdge(node4, node10, paint: Paint()..color = Colors.black);
graph.addEdge(node4, node11, paint: Paint()..color = Colors.red);
graph.addEdge(node11, node12);
*/
builder
..siblingSeparation = (100)
..levelSeparation = (150)
..subtreeSeparation = (150)
..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
}
}
error:
The following assertion was thrown during performLayout():
RenderCustomLayoutBox does not meet its constraints.
Constraints: BoxConstraints(w=947.2, h=937.6)
Size: Size(77.0, 246.0)
If you are not writing your own RenderBox subclass, then this is not your fault. Contact support: https://github.com/flutter/flutter/issues/new?template=2_bug.md
The relevant error-causing widget was
_GraphView
C:\…\lib\GraphView.dart:57
copy-paste example:
error: