search

alexobviously / squares

A flexible chessboard widget for Flutter
https://pub.dev/packages/squares
Other
37 stars 15 forks source link

Unexpected size of chessboard in squares simple and complex examples #21

Open VladimirMishka opened 10 months ago

VladimirMishka commented 10 months ago

I am interested in creating an app for teaching the 3-check variant of chess and I have been looking for an appropriate framework. Your Dart/Flutter framework is very interesting. I am an experienced Delphi developer, but brand new to Dart/Flutter. I have been reading books on both Dart and Flutter to come up to speed. I am using the Microsoft Visual Studio Code IDE at the moment.

I was able to get both example programs to build and open in Windows 11. I didn't change any code. Visual Studio suggested that a few lines needed trailing commas and I allowed it to fix that syntax. The problem is that the chessboard and pieces are way too large (please see screenshots) and therefore you can only see the black pieces. I am hoping for a chessboard about the size of a "Lichess" chessboard. On the bottom of the simple example it says "Bottom overflowed by 1134 pixels" and at the bottom of the Complex Example after creating a game (I was slightly disappointed that 3-check didn't appear in the drop-down list but I imagine it can be added), it says "Bottom overflowed by 848 pixels." Visual studio Code seemed to indicate some kind of formatting error in the complex example (see screenshot) and I took a screenshot of something similar in the simple example.

Would you be able to point out what I should do to fix this? Squares Simple Example Visual Studio Code Screen Squares Complex Example Visual Studio Code Screen Squares Complex Example Create Game Squares Complex Example Opening Screen Squares Simple Example Thank you.

malaschitz commented 10 months ago

You can whole chessboard widget add to your own widget. For example SizedWidget, Container etc... I suggest close this issue.

VladimirMishka commented 10 months ago

Thank you for taking the time to comment, malaschitz. I hope you know that for someone like me who is brand new to Dart/Flutter, your answer, unfortunately, is not very helpful. It doesn't explain why the chessboard is so big "out-of-the-box" and it doesn't contain enough detail for someone new to this programming paradigm to fix the source code.

alexobviously commented 10 months ago

Hey, so basically the board widgets are designed to be agnostic of dimensions, and determine their size from the parent widget that contains them. This was a deliberate design decision to allow flexibility with regards to all of flutter's various ways of sizing and arranging widgets.

A good start would be to put it in SizedBox or FittedBox, but there are other options. Just treat it as any other widget that inherits its size from its parent.

Admittedly though, the layout in the example projects is not optimal, and I should probably update it to something more sensible. I just made it like that as a temporary solution and it's really just optimised for mobile, but I'll see if I can get a quick update out this weekend with more robust layouts in the examples.

alexobviously commented 10 months ago

And if you want to add three check to the list, there's a list of variants somewhere and you want to add CommonVariants.threeCheck (I think, I'm writing this from my phone). But I will also do that myself tomorrow.

VladimirMishka commented 10 months ago

Thank you very much for the information and any updates to the example projects while I get up to speed on learning Flutter widgets. I really appreciate it.