Untitled

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QuranPage(),
    );
  }
}

class QuranPage extends StatefulWidget {
  @override
  _QuranPageState createState() => _QuranPageState();
}

class _QuranPageState extends State<QuranPage> {
  List<String> ayatWords = [
    "اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْ",
    "الرَّحْمٰنِ الرَّحِيْمِ",
    "مٰلِكِ يَوْمِ الدِّيْنِ",
  ];

  List<List<bool>> wordClickedList = [];
  List<int> ayatOrder = [];

  @override
  void initState() {
    super.initState();
    // Initialize the wordClickedList based on the number of words in each ayat
    wordClickedList = List.generate(
      ayatWords.length,
      (index) => List.generate(
        ayatWords[index].split(" ").length,
        (wordIndex) => false,
      ),
    );
    // Generate a random order for ayat
    ayatOrder = List.generate(ayatWords.length, (index) => index)..shuffle();
  }

  void toggleWordClicked(int ayatIndex, int wordIndex) {
    setState(() {
      wordClickedList[ayatIndex][wordIndex] =
          !wordClickedList[ayatIndex][wordIndex];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Surat Al-Fatihah"),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: ayatOrder.length,
          itemBuilder: (context, index) {
            final int ayatIndex = ayatOrder[index];
            final String ayat = ayatWords[ayatIndex];
            final List<String> words = ayat.split(" ");

            return Wrap(
              spacing: 8.0,
              children: words.asMap().entries.map((wordEntry) {
                final int wordIndex = wordEntry.key;
                final String word = wordEntry.value;

                return GestureDetector(
                  onTap: () {
                    toggleWordClicked(ayatIndex, wordIndex);
                  },
                  child: Container(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      word,
                      style: TextStyle(
                        color: wordClickedList[ayatIndex][wordIndex]
                            ? Colors.red
                            : Colors.black,
                      ),
                    ),
                  ),
                );
              }).toList(),
            );
          },
        ),
      ),
    );
  }
}