Reputation: 3
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