我正在开发一个计算器 UI。我编写的代码渲染得非常好,但调试该代码后我遇到的主要问题是计算器 UI 在大多数具有低屏幕分辨率的设备(如 moto g4、galaxy s5、iphone 5 等)中不可见. 我在我的代码中使用了 MediaQuery和SafeArea小部件,但仍然无法修复它。这是我在moto g4中渲染的UI图片。这是我的计算器 UI 的代码,
import 'package:flutter/material.dart';
import 'package:gstcalculator/buttons.dart';
import 'package:gstcalculator/gstbuttons.dart';
void main(){
runApp(
MaterialApp(
home: GSTCalculatorApp()
)
);
}
class GSTCalculatorApp extends StatefulWidget {
@override
_GSTCalculatorState createState() => _GSTCalculatorState();
}
class _GSTCalculatorState extends State<GSTCalculatorApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "GST Calculator",
home: SafeArea(
child: Scaffold(
backgroundColor: Color(0xFF13131b),
appBar: AppBar(
title: Center(child: Text('GST Calculator')),
backgroundColor: Colors.black54,
),
body: Container(
width: MediaQuery.of(context).size.width *1.0,
height: MediaQuery.of(context).size.height *0.5 ,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(right: 15),
child: Text('41 x 3', style: TextStyle(fontSize: 30,color: Colors.white54),),
alignment: Alignment(1.0, 1.0),
),
Container(
padding: EdgeInsets.all(15),
child: Text('123',style: TextStyle(color: Colors.white,fontSize: 70),),
alignment: Alignment(1.0, 1.0),
),
Container(
// height: 80,
// width: 1000,
color: Color(0xFF0f0f0f),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Gstbutton(gstbtntext: 'CHECK ➞',),
Gstbutton(gstbtntext: 'CORRECT ☒',),
Gstbutton(gstbtntext: 'CHANGE GST %',),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '3%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '5%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '8%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '18%',btntextsize: 18,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '28%',btntextsize: 18,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '-3%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '-5%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '-8%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '-18%',btntextsize: 15.9,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
Button(btntext: '-28%',btntextsize: 15.9,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '7',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '8',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '9',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: 'C',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '⌫',btntextsize:30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '4',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '5',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '6',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: 'X',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
Button(btntext: '/',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '1',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '2',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '3',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '+',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
Button(btntext: '-',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Button(btntext: '0',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '00',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '.',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
Button(btntext: '=',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
Button(btntext: '%',btntextsize: 35,btncolor: 0xFF0d0d0d, btntextcolor: 0xFFD2353B,),
],
),
],
),
),
),
),
);
}
}