Dynamic BoardArrow List

[hiulusoy]

My goal was trying to create a dynamic list of BoardArrow that can be changed at each user move.

The problem is after I use setState with BoardArrow list, the 'ChessBoard' widget is going to be reset with the initial position.

The process were;

• Create a list of board arrow

• Assign board arrow list the to 'ChessBoard' widget that we're mainly using.

• After these steps we have two options which are adding new BoardArrow to the list and show in the 'ChessBoard' widget.

• Or we can clear the BoardArrow list after we've shown.

[d3xvn]

Hi @hiusanmaz,

This a peculiar bug, I'll test it out and push a fix in a couple of days.

Thanks for reporting this.

[d3xvn]

Hi @hiusanmaz, I'm unable to recreate your bug (assuming your bug is the board resetting after you change the board arrows).

Here's a video and code snippet which work for me:

Video:

https://user-images.githubusercontent.com/26357843/163712048-b40999a5-7f2a-4c32-ac1f-0e60c224aa35.mov

Code:

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

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

class _HomePageState extends State<HomePage> {
  ChessBoardController controller = ChessBoardController();

  var arrows = [
    BoardArrow(
      from: 'd2',
      to: 'd4',
      //color: Colors.red.withOpacity(0.5),
    ),
    BoardArrow(
      from: 'e7',
      to: 'e5',
      color: Colors.red.withOpacity(0.7),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chess Demo'),
      ),
      body: Column(
        children: [
          FlatButton(
            onPressed: () {
              setState(() {
                arrows.add(BoardArrow(from: 'a1', to: 'h7'));
              });
            },
            child: Text('Add Arrow'),
          ),
          Expanded(
            child: Center(
              child: ChessBoard(
                controller: controller,
                boardColor: BoardColor.orange,
                arrows: arrows,
                boardOrientation: PlayerColor.white,
              ),
            ),
          ),
          Expanded(
            child: ValueListenableBuilder<Chess>(
              valueListenable: controller,
              builder: (context, game, _) {
                return Text(
                  controller.getSan().fold(
                        '',
                        (previousValue, element) =>
                            previousValue + '\n' + (element ?? ''),
                      ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Do you think there's anything I might need to know for replicating this bug? Additionally, are you sure the ChessBoardController isn't being recreated since the board is stored in the controller, not in the board Widget itself?

[hiulusoy]

Hi @deven98,

My business logic is integrated with the onMove method. When a move done; I should be able to clear the arrows or able to add new ones. Now we can try to create and set onMove method to ChessBoard like

child: ChessBoard(
               controller: controller,
               boardColor: BoardColor.orange,
               arrows: arrows,
               boardOrientation: PlayerColor.white,
               onMove: onMove

             ),
onMove(){
// Clear the current arrows with setState
setState(){
arrows = [];
}
Business Logic etc.
// Let's create a new arrow and show
}

And secondly I checked and found I was creating an instance of my main ChessBoardController in initState method. I changed from this:

To this:

But the problem is still remaining.

[d3xvn]

Hey @hiusanmaz,

This doesn't really give me any idea of what's going wrong since the example I provided works fine for me even if I use the onMove callback instead of the button. Can you give me a full example that I can run directly which has your issue - similar to the one in my comment?

Thanks.

[hiulusoy]

Hello @deven98, Firstly let me check my Business Logic again. If I still came with errors, I'm going to provide you a full example.

I just checked my Business Logic and found there were some unnecessary setState methods which causes an error that mentioned before on the Stackoverflow, resets the ChessBoard Widget. So I just wrapped my arrow list and ChessBoard widget with ValueNotifier and It's working as expected.

Thank you for your effort.