Code Monkey home page Code Monkey logo

amonc / crossword Goto Github PK

View Code? Open in Web Editor NEW
6.0 4.0 3.0 350 KB

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

Home Page: https://pub.dev/packages/crossword

License: MIT License

Java 0.58% Kotlin 0.14% Ruby 3.17% Swift 2.12% Objective-C 0.73% Dart 38.58% CMake 22.88% C++ 26.13% C 2.30% HTML 2.14% Shell 1.23%
animation dart dart-package flutter game puzzle ui word word-puzzle

crossword's Introduction

NEW: Reveal Letter animation, OnUpdate line function, Gradient Colors, TextStyles and Line Decoration updated to the Crossword Widget

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.

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.1.0

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
  • onLineDrawn : returns a List of words created based on user interactions on 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

Contributions

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

crossword's People

Contributors

amonc avatar aquarius-blake avatar dontaskit28 avatar rijviz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

crossword's Issues

How to allow drawing of lines on word only when it matches a given word

Hello and thanks for this great plugin.
I want to implement a flutter code where colored lines will not be allowed to be drawn on the Crossword widget if the selected word does not match one of the pre selected list of words, or if the selected word does not make sense. I noticed that every time a user draw lines across the Crossword widget, the lines got drawn even when the word over which the line is drawn does not make sense. I want to be able to check the selected word(the word across which a line is drawn) against a list of words, stored in a list. The following is what i have done so far:

Crossword(
        letters: letters,
        spacing: const Offset(30, 30),
        onLineDrawn: (List<String> words) {
          print(words);
        },
        textStyle: const TextStyle(color: Colors.white, fontSize: 20),
        lineDecoration:
        LineDecoration(lineColors: lineColors, strokeWidth: 20),
        hints: const ["GOOD", "GREAT", "ALLOY", "ANNOYING"],
        allowOverlap: true,
      )

Feature request - onLetter,bool for imperfect diagonal,hint coloring

Hey, I had a few ideas :

  1. onLetter function that records the current letter painted so we can make ourselves a widget similiar to the upper text between "names" and the grid :
    https://github.com/Amonc/crossword/assets/74504869/7a1dd531-33d4-4b4e-b3b8-3b2b366c7fe2

  2. A boolean for turning off the imperfect diagonal line feature as described in (saw your reaction on it) : #6

  3. a function that draws on one of the letters based on a given (row,col) to give a hint like :
    https://github.com/Amonc/crossword/assets/74504869/d7060f35-f78b-433f-9918-db952ce1b575

Hope you will consider those ideas, I think it will make the package much more complete.
Enjoying the package a lot ! Thank you guys.

Feature Request - Add way to highlight already found words

Hi there! I love your amazing work and would like to use your plugin in my application https://play.google.com/store/apps/details?id=com.wayyyoutgames.simple_word_search.

However, my app allows users to save and resume their progress and I cannot find a way to highlight words that a user has already found in a previous session. Is there a way to make this possible? Or does the feature already exist?

Thanks again for the amazing work. All the best!

Bug: Displayed Matrix cannot be updated

I created a function to generate a new matrix of letters with new words inserted each time a specific button is pressed. However the Crossword widget only displays the first data it received , it does not update the matrix when a new matrix is generated. I already checked the value of the matrix from console and it gets updated, but the displayed matrix maintains the first matrix generated on the app start.

[Feature request] Same color coloring, adjusting sizedbox on top of crossword

Hey, thank you for the package and the amazing work ! It is super helpful.

I would like to suggest two features / changes :

  1. Same color coloring (like in the demo gif) - when you draw over a word it gives a random color and wether the word is correct / incorrect it takes a color from the incorrect colors. It would be very convenient to draw a word and the correct color will remain the color you drew with. example : https://github.com/Amonc/crossword/assets/74504869/5336bf16-934a-4ec4-b891-ada848632117 (drawing red, word stays in red)

  2. There is a sizedbox before the crossword, line 216 in crossword_panel.dart. If it is not mandatory for the crossword to work I suggest to remove it or let us control the size of the box. It would be much easier to integrate the crossword into our own UI that way.

Hope you consider those, thanks a lot again.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.