tdn
tdn

Reputation: 3

How to make across and down crossword in flutter

I have a problem: I want to create a crossword like the image below, but my code is only horizontal, so please let me know if there is a way to handle this problem, thank you. thank you

This is the video I want to follow video

This is my code

class AcrossAndDownWidget extends StatefulWidget {
  const AcrossAndDownWidget({
    super.key,
    required this.row,
    required this.col,
    required this.word,
  });

  final List<int> row;
  final List<int> col;
  final List<String> word;

  @override
  State<AcrossAndDownWidget> createState() => _AcrossAndDownWidgetState();
}

class _AcrossAndDownWidgetState extends State<AcrossAndDownWidget> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.sizeOf(context);

    const int gridSize = 14;
    List<int> number = [];
    for (int i = 0; i < widget.row.length; i++) {
      int intersectionIndex = widget.row[i] * gridSize + widget.col[i];
      for (int j = 0; j < widget.word[i].length; j++) {
        int currentIndex = intersectionIndex + j;
        number.add(currentIndex);
      }
    }

    return SizedBox(
      height: 500,
      child: SizedBox(
        height: size.height * 0.90,
        width: size.width * 0.90,
        child: GridView.count(
          shrinkWrap: true,
          crossAxisCount: 14,
          children: List.generate(gridSize * gridSize, (index) {
            bool isIntersection = number.contains(index);

            return isIntersection
                ? Container(
                    height: 40.0,
                    width: 40.0,
                    decoration: BoxDecoration(
                      color: isIntersection ? Colors.grey : Colors.transparent,
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                    child: const Center(child: NoBorderTextField()),
                  )
                : const SizedBox();
          }),
        ),
      ),
    );
  }
}

Currently I'm looking for a few libraries but they don't support them, but in React I found a library lib so I don't know if there's a way to do it like the video, thank you.

Upvotes: 0

Views: 87

Answers (0)

Related Questions