Amonc/crossword

NEW: LetterPop Animation

Crossword pub package

GitHub commit activity GitHub contributors GitHub Repo stars GitHub Pub Version Pub Likes Pub Points Pub Popularity

Crossword is a comprehensive solution for seamlessly integrating a crossword puzzle-solving user interface into your Flutter app. With this package, you can effortlessly provide users with an interactive and enjoyable crossword puzzle-solving experience within your application.

https://github.com/Amonc/crossword/assets/23643271/a2abcac4-2540-4e46-b398-366265c5fbc2

Features

• Customizable Crossword Widget: The package offers a customizable crossword widget that can be easily integrated into any Flutter app. You can adjust the widget's appearance, size, and layout to match your app's design and theme.

• User-Friendly Interface: The user interface is designed with simplicity and ease of use in mind. Users can intuitively navigate through the puzzle, pan, and select the letters to choose words.

• Clue Management: Manage crossword clues effortlessly with this package by passing the list of words into the Crossword widget.

Getting started

Installation

You just need to add crossword as a dependency in your pubspec.yaml file.

dependencies:
  crossword: ^1.3.2

Import the package in your Dart code and instantiate the Crossword widget.

Example

To get started add the Crossword widget.

• letters : takes all the letters as a two-dimentional List
• spacing : controls the horizontal and vertical spacing in between letters the Crossword panel
• hints : takes a List of words as clues

Crossword(
   letters: const [
       ["F", "L", "U", "T", "T", "E", "R", "W", "U", "D", "B", "C"],
       ["R", "M", "I", "O", "P", "U", "I", "Q", "R", "L", "E", "G"],
       ["T", "V", "D", "I", "R", "I", "M", "U", "A", "H", "E", "A"],
       ["D", "A", "R", "T", "N", "S", "T", "O", "Y", "J", "R", "M"],
       ["O", "G", "A", "M", "E", "S", "C", "O", "L", "O", "R", "O"],
       ["S", "R", "T", "I", "I", "I", "F", "X", "S", "P", "E", "D"],
       ["Y", "S", "N", "E", "T", "M", "M", "C", "E", "A", "T", "S"],
       ["W", "E", "T", "P", "A", "T", "D", "Y", "L", "M", "N", "U"],
       ["O", "T", "E", "H", "R", "O", "G", "P", "T", "U", "O", "E"],
       ["K", "R", "R", "C", "G", "A", "M", "E", "S", "S", "T", "S"],
       ["S", "E", "S", "T", "L", "A", "O", "P", "U", "P", "E", "S"]
   ],
   spacing: const Offset(30, 30),
   onLineDrawn: (List<String> words) {},
   textStyle: const TextStyle(
   color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
   lineDecoration: const LineDecoration(
      lineGradientColors: [
         [Colors.blue, Colors.black, Colors.red],
         [Colors.orange, Colors.black],
      ],
      strokeWidth: 26,
      lineTextStyle: TextStyle(
        color: Colors.white, fontSize: 16, 
        fontWeight: FontWeight.bold),
      ),
    hints: const ["FLUTTER", "GAMES", "UI", "COLORS"],
)

Additional parameters

• initialLineList: Accepts a List of LineOffset to add initial lines to the crossword -- A LineOffset is a class that takes the start and end positions of the line
• acceptReversedDirection: accepts a bool to identify while creating the words by touching in the reversed direction, is enabled or not
• drawCrossLine: accepts a bool, and identifies if the user can interact in the Cross direction or not.
• drawVerticalLine: accepts a bool, and identifies if the user can interact in the Vertical direction or not.
• drawHorizontalLine: accepts a bool, and identifies if the user can interact in the Horizontal direction or not.

drawCrossLine, drawVerticalLine, drawHorizontalLine can't be set as false altogether.

• lineDecoration: Decorate lines to update colors based on the input and clues
• textStyle: Add styles to the crossword letters
• transposeMatrix: Transpose the 2x2 matrix
• alowOverlap: Accepts a bool to identify if the user can overlap the words or not
• addIncorrectWord: Accepts a bool to identify if the user can draw incorrect lines or not

Line Decoration - parameters

• lineGradientColors: Accepts a List of List of Colors to update the gradient colors of the lines.
• incorrectGradientColors: Accepts a List of Colors to update the gradient colors of the lines when the user draws an incorrect line.
• correctGradientColors: Accepts a List of Colors to update the gradient colors of the lines when the user draws a correct line.
• strokeWidth: Accepts a double to update the width of the lines.
• strokeCap: Accepts a StrokeCap to update the stroke cap of the lines.
• lineTextStyle: Accepts a TextStyle to update the style of the words which are drawn by the user.

Reveal Letter Animation

• Use a Global Key to access the Crossword widget and call the animate method to animate the letter decoration.

final GlobalKey<CrosswordState> _crosswordState = GlobalKey();

• Pass the GlobalKey to the Crossword widget

 Crossword(key: _crosswordState);

• Access the Crossword widget using the global key and call the animate method to animate the letter

//offset is the position of the letter in the crossword
 crosswordState.currentState!.animate(offset: const Offset(7, 3));

• revealLetterDecoration: Accepts a RevealLetterDecoration to animate the decoration of the letters

• 'letterPopDecoration': Accepts a LetterPopDecoration to animate the decoration of the specific letter onTouchEvent

Contributions

Contributions are welcome! If you find a bug or want to add a feature, please file an issue