making text adaptive with screen size in flutter

Question

I was developing a simple basketball points counter app using flutter, but I have an error this is the initial UI of the app

when the number of digits inside the Text widget increase, an overflow happens like what happen in this photo

and also this photo

so how can I handle this issue to prevent overflow, I tried some solutions but the issue still happening.

this is my screen size : Height is 781.1 and width is 392.7 –

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int numOfPointsTeamA = 0;
  int numOfPointsTeamB = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text(
          'Basketball Points Counter',
          style: TextStyle(fontSize: 23),
        ),
      ),
      body: Padding(
        padding:
            const EdgeInsets.only(top: 30.0, left: 20, right: 20, bottom: 30),
        child: Column(
          children: [
            SizedBox(
              height: 468,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(children: [
                    const Text(
                      'Team A',
                      style:
                          TextStyle(fontSize: 35, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Text(
                      '$numOfPointsTeamA',
                      style: const TextStyle(
                          fontSize: 200, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA++;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 1 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA += 2;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 2 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA += 3;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 3 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                  ]),
                  const VerticalDivider(
                    color: Colors.grey,
                    thickness: 0.5,
                    width: 70,
                  ),
                  Column(children: [
                    const Text(
                      'Team B',
                      style:
                          TextStyle(fontSize: 35, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Text(
                      '$numOfPointsTeamB',
                      style: const TextStyle(
                          fontSize: 200, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB++;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 1 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB += 2;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 2 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB += 3;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 3 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                  ]),
                ],
              ),
            ),
            const SizedBox(
              height: 70,
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    numOfPointsTeamA = 0;
                    numOfPointsTeamB = 0;
                  });
                },
                style: ElevatedButton.styleFrom(primary: Colors.orange),
                child: const Text(
                  'Reset',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 25,
                      fontWeight: FontWeight.w500),
                ))
          ],
        ),
      ),
    );
  }
}

Answer 1

You can use auto_size_text package as doc

AutoSizeText(
  'The text to display',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)

in your case wrap your Column with Flexible and the text too:

Flexible(
    child: Column(
        children: [
            Flexible(
                child: AutoSizeText(
                    '$numOfPointsTeamB',
                    maxFontSize: 150, // set max and min to handle
                    minFontSize: 100,
                    style: const TextStyle(
                        fontWeight: FontWeight.w400),
                    ),
            ),
        ],
    ),
),

you can use overflow: TextOverflow.fade but i dont think its good for you, and i think you need a logic to check if the number is too long, change fontsize or dont let to be bigger than 2000 for example.

Answer 2

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int numOfPointsTeamA = 0;
  int numOfPointsTeamB = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text(
          'Basketball Points Counter',
          style: TextStyle(fontSize: 23),
        ),
      ),
      body: Padding(
        padding:
            const EdgeInsets.only(top: 30.0, left: 20, right: 20, bottom: 30),
        child: Column(
          children: [
            SizedBox(
              height: 468,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(children: [
                    RichText(     //<----- here replace it with the Text Widget 
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
),
                    const SizedBox(
                      height: 20,
                    ),
                    Text(
                      '$numOfPointsTeamA',
                      style: const TextStyle(
                          fontSize: 200, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA++;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 1 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA += 2;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 2 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamA += 3;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 3 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                  ]),
                  const VerticalDivider(
                    color: Colors.grey,
                    thickness: 0.5,
                    width: 70,
                  ),
                  Column(children: [
                    const Text(
                      'Team B',
                      style:
                          TextStyle(fontSize: 35, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Text(
                      '$numOfPointsTeamB',
                      style: const TextStyle(
                          fontSize: 200, fontWeight: FontWeight.w400),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB++;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 1 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB += 2;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 2 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                    const SizedBox(
                      height: 7,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          numOfPointsTeamB += 3;
                        });
                      },
                      style: ElevatedButton.styleFrom(primary: Colors.orange),
                      child: const Text(
                        'Add 3 point',
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      ),
                    ),
                  ]),
                ],
              ),
            ),
            const SizedBox(
              height: 70,
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    numOfPointsTeamA = 0;
                    numOfPointsTeamB = 0;
                  });
                },
                style: ElevatedButton.styleFrom(primary: Colors.orange),
                child: const Text(
                  'Reset',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 25,
                      fontWeight: FontWeight.w500),
                ))
          ],
        ),
      ),
    );
  }
}

Answer 3

try this and adjust it as u want

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)