skip to Main Content

the text work fine on one device but on other screens the text is messy so please help me to reduce scale of this container
i want to make it run on all screens like this image image preview example and the output on my screen is like this but on other screen is messy

 Container(
              width: 350,
              child: FutureBuilder(
                future: GetJuz(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    var ayat = snapshot.data!;
                    var ayah = "";
                    for (var i = 12; i < 23; i++) {
                      ayah += ayat[i].codes!.replaceAll(" ", "");
                    }

                    return Container(
                      child: RichText(
                        textDirection: TextDirection.rtl,
                        text: TextSpan(
                          children: [
                            for (var element in ayat) ...[
                              if (element.page == "5")
                                TextSpan(
                                  text: element.codes
                                      .toString()
                                      .replaceAll(" ", ""),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      print(element.text);
                                    },
                                  style: TextStyle(
                                    fontFamily: 'Schyler',
                                    fontSize:
                                        MediaQuery.of(context).size.width *
                                            0.05,
                                    color: Colors.black,
                                  ),
                                ),
                            ],
                          ],
                        ),
                      ),
                    );
                  }
                },
              ),
            ),
                  

2

Answers


  1.  fontSize: MediaQuery.of(context).size.width * 0.05, // This will adjus the font size
    

    I am not sure about this one, but you just try

    Login or Signup to reply.
  2. I think you want the text to be aligned equally from both ends. If that is the case, you can use this in RichText

     RichText(
          textAlign: TextAlign.justify,
          ......
    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search