Mohamed Gamal Mohamed
Reputation: 103
making text adaptive with screen size in flutter
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),
))
],
),
),
);
}
}
Upvotes: 1
Views: 677
Answers (3)
B14ck
Reputation: 71
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),
))
],
),
),
);
}
}
Upvotes: 1
B14ck
Reputation: 71
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!'),
],
),
)
Upvotes: 0
mohammad esmaili
Reputation: 1737
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.
Upvotes: 2
Related Questions
- How to dynamically resize text in Flutter?
- How to create responsive Text widget in Flutter?
- How to make text as big as the width allows in flutter
- Flutter: How can I resize text based on device's screen size
- How to resize text based on screen size in Flutter?
- How to make Text dynamically size itself to the container
- how to make text responsive in flutter
- How to make text responsive in Flutter?
- How to fix the position of the text by resizing the font size according to the device screen size in flutter app?
- TextSize not scale according to deviceSize or devicePixelRatio in flutter