Flutter App Screen is appearing weird on Samsung S8 - flutter

Question

Image is here
Flutter app screen and text is appearing weird in Samsung S8 mobile
but tested in Other Samsung devises and its working fine, you can see how its supposed to work on the other devices on the above image
any one know why is this screen issue is happening only on samsung s8 ,only this image is here no log is getting so it is hard to resolve , is anyone faced this issue before,
minimumSdk is 21
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:splink/src/constants/app_colors.dart';
import 'package:splink/src/controllers/login_view_controllers.dart';
import 'package:splink/src/view/login_view/login_welcome_view.dart';
import 'package:splink/src/view/signup_view/signup_welcome_view.dart';
class LandingView extends StatefulWidget {
const LandingView({Key? key}) : super(key: key);
#override
State<LandingView> createState() => _LandingViewState();
}
class _LandingViewState extends State<LandingView> {
final signLoginController = Get.find<LoginViewController>();
final controller = PageController(
viewportFraction: 1,
keepPage: true,
);
List items = [
"assets/images/6D2Lmtv_X8A.png",
"assets/images/secondimage.png",
"assets/images/thirdImage.png"
];
List textItems = [
//first page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Find and play sports at",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"anywhere, anytime",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"splink helps you find, connect and organise activities",
style: TextStyle(
color: Colors.white,
),
),
Text(
"with other sports players easily at anywhere, anytime",
style: TextStyle(
color: Colors.white,
),
),
],
),
//second page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Organise and manage",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"activties easily",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"no more messy groups and missed activities.",
style: TextStyle(
color: Colors.white,
),
),
Text(
"Activity creation and RSVPs, calendar-tracking",
style: TextStyle(
color: Colors.white,
),
),
Text(
"or notifications, everything doe easily in-app",
style: TextStyle(
color: Colors.white,
),
),
],
),
//third page of intro
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
"Meet, play and endorse",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
"one another",
style: TextStyle(
fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
height: 25,
),
Text(
"Have fun, encourage one another by exchanging medals,",
style: TextStyle(
color: Colors.white,
),
),
Text(
"track sports statistics and keep on playing!",
style: TextStyle(
color: Colors.white,
),
),
],
),
];
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
final pages = List.generate(
3,
(index) => Image.asset(
items[index],
fit: BoxFit.cover,
),
);
final pages2 = List.generate(3, (index) => textItems[index]);
return Scaffold(
backgroundColor: primaryColor,
body: Column(
children: [
Expanded(
child: ClipPath(
clipper: ClipPathClass(),
child: PageView.builder(
controller: controller,
padEnds: false,
// itemCount: pages.length,
itemBuilder: (_, index) {
return SizedBox(
height: size.height,
width: size.width,
child: pages[index % pages.length]);
},
onPageChanged: (value) {
signLoginController.curouselIndex(value % pages.length);
},
),
),
),
Expanded(
child: Container(
color: primaryColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: SmoothPageIndicator(
controller: controller,
count: 3,
effect: const ExpandingDotsEffect(
strokeWidth: 2.0,
dotColor: Colors.white,
activeDotColor: Colors.white,
dotHeight: 6,
dotWidth: 6,
),
),
),
const SizedBox(
height: 15,
),
Obx(
() => textItems[signLoginController.curouselIndex.value],
),
const SizedBox(
height: 70,
),
Padding(
padding: const EdgeInsets.only(right: 15, left: 15),
child: Material(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
child: InkWell(
onTap: () {
Get.to(SignupWelcomeView());
},
borderRadius: BorderRadius.circular(15),
child: Container(
width: size.width,
height: 50,
alignment: Alignment.center,
child: Text(
'Sign Up',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: primaryColor),
),
),
),
),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(right: 15, left: 15),
child: InkWell(
onTap: () {
Get.to(LoginWelcomeView());
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(color: Colors.white),
),
width: size.width,
height: 50,
alignment: Alignment.center,
child: const Text(
'Login',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
)
],
),
);
}
}
class ClipPathClass extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.addOval(Rect.fromCircle(
center: Offset(size.width * 0.5, -10),
radius: size.height - 20,
));
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Answer 1

I mean, the "issue" is that the width/pixel density of the device is causing the text to overflow to the next line. You can either use a FittedBox, or tweak the fontSize to optimize it depending on the width (using MediaQuery or LayoutBuilder), both sould work.
You can also align the text on the center, instead of to the right, and I'd add some padding to ensure the text doesn't go right up to the screen border.
How do I auto scale down a font in a Text widget to fit the max number of lines?