Draw arrows between widgets in Flutter

Hi. When using ArrowContainer() in a non global coordinate space such as in the detail view of a tablet in landscape with a master/detail view, the arrows are drawn in global coordinate space which results in offset arrows by the amount of the width of the master view. In the 'widget_arrows.dart' in the Paint() method, please see these two lines:

    final startGlobalOffset = start.localToGlobal(Offset.zero);
    final endGlobalOffset = end.localToGlobal(Offset.zero);

The localToGlobal() method has an optional 'ancestor:RenderBox' parameter. If this can be exposed through ArrowContainer, any custom coordinate space RenderBox can be provided, which solves the issue. Hope this helps, thank you!

Hello, great package!

But, I am having a slight issue with it. It appears that if you are using the arrows in certain scrollable views, the arrows are not updating their location correctly.

For example, if you check on the 3rd tab view, the arrows are missing. But, if you do a hot reload while on the 3rd tab, they will appear. Then, you will notice that they will not scroll with the view correctly.

The same problem occurs regardless of where you place the initial ArrowContainer widget.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  // Controllers.
  TabController _controller;

  @override
  void initState() {
    super.initState();

    _controller = TabController(
      length: 5,
      vsync: this,
    );
  }

  @override
  void dispose() {
    super.dispose();

    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ArrowContainer(
      child: Scaffold(
        body: SafeArea(
          child: TabBarView(
            controller: _controller,
            children: [
              Container(
                color: Colors.red,
              ),
              Container(
                color: Colors.blue,
              ),
              Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ArrowElement(
                      id: '1',
                      targetId: '2',
                      color: Colors.black,
                      child: Text(
                        '1',
                      ),
                    ),
                    ArrowElement(
                      id: '2',
                      targetId: '3',
                      color: Colors.black,
                      child: Text(
                        '2',
                      ),
                    ),
                    ArrowElement(
                      id: '3',
                      targetId: '1',
                      color: Colors.black,
                      child: Text(
                        '3',
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                color: Colors.green,
              ),
              Container(
                color: Colors.brown,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Thank you.

Hi! How do I start multiple arrows from the same widget?

Hi,

I needed a way to target multiple destinations from a single source, so I added the ability to specify a list of targetIds. I've done this in a source compatible way, however, it's possible to simplify the code if you're willing to make a small compatibility break. Specifically, if ArrowElement had a non-const constructor, it would be possible to populate the targetIds list from a single targetId. However, as that would break source compatibility, I check for this in the paint override.

I've also updated the example to demonstrate multiple targets whilst leaving most of the destinations as single targets.

I've finally created the flutter project in the example folder so it compiles/runs out of the box. That's what I've seen most packages do, but if that's not correct it can be changed.

Very happy for feedback or further suggestions.

Best regards,

Keith

As such, this package is awesome.👌 But I found some issues when the application is finally built.

As you can see in the picture attached, the two pairs of arrows going from left to right and right to left are the next and previous pointers of the nodes of doubly linked list. Hence you can see it that where are the nodes and where are the arrows.

And the two arrows on top should be attached to the text "Head Pointer" and "Tail Pointer" respectively.

NOTE: The package is studied completely before using it. And the things are perfectly fine while developing (writing the code). This thing just happens when we build the application.

OTHER THINGS: The application is built several times from different machines and also tested on different mobile phones. The issue still persist!

Hence I request for getting help ASAP! Because this package is fantastic and can be used in many places.

Thank you for this very useful widget.

The issue I am experiencing is that inside a PageView, when I swipe to a different page, the arrows act weird. They stay in the same position although the page swipes to the left/right.

Hello, when I use this package, I come across the bug. When the exception was thrown, this was the stack: #0 _ArrowElementState.initState (package:widget_arrows/widget_arrows.dart:333:73) #1 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5015:57) #2 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4853:5) #3 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3863:16) #4 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6435:36) #5 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6447:32) ... Normal element mounting (4 frames) #9 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3863:16) #10 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6435:36) #11 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6447:32) ... Normal element mounting (4 frames) #15 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3863:16)