I installed my app on 2 different devices, the problem is both devices show different widget sizes. Both devices have different screen sizes.
- The expected result -> image1 from Moto One Fusion+

- image2 from OnePlus 6pro

main.dart code ->
void main() {
runApp(BmiApp());
}
class BmiApp extends StatelessWidget {
const BmiApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/input': (context) => InputPage(),
'/calculate': (context) => CalculatedResult(),
},
theme: ThemeData.dark().copyWith(
appBarTheme: AppBarTheme(
color: Color(0xFF0A1234),
),
scaffoldBackgroundColor: Color(0xFF0A1234),
),
initialRoute: '/input',
);
}
}
input_page.dart code ->
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
@override
State<InputPage> createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('BMI Calculator'),
centerTitle: true,
),
body:Column(),
),
);
}
}
Inside column I have stacked all the widgets. Github link for complete code