[英]I am trying to make a replica UI of a calculator app using Flutter and I am stuck in a few things
I have been able to make a major part of the UI but few elements are still creating a problem for me.我已经能够制作 UI 的主要部分,但仍然很少有元素对我造成问题。
This is the screenshot of the original UI of the app.这是应用程序原始 UI 的屏幕截图。
And this is the screenshot of the UI that I have been able to make up till now using Flutter这是我到目前为止使用 Flutter 制作的 UI 截图
Screenshot of UI made with the help of flutter借助 flutter 制作的 UI 截图
Now can you please help me regarding how can I make that '=' container go to the extreme right just like in the original screenshot.现在你能帮我看看我怎样才能把那个“=”容器 go 放在最右边,就像在原始屏幕截图中一样。 And as well how should I align the first row on the same level as in the original UI.
以及我应该如何将第一行对齐到与原始 UI 相同的级别。
This is the code that I have made for the container having all the digits.这是我为包含所有数字的容器制作的代码。
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xFF212121),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.remove, color: Colors.grey, size: 40.0,),
Buttons(
widget1: Text('AC', style: kNumber2TextStyle,),
widget2: Icon(Icons.backspace_outlined, size: 25.0, color: Colors.white,),
widget3: Text('%', style: kNumberTextStyle,),
widget4: Text('÷', style: kButton2TextStyle,),
),
Buttons(
widget1: Text('7', style: kNumberTextStyle,),
widget2: Text('8', style: kNumberTextStyle,),
widget3: Text('9', style: kNumberTextStyle,),
widget4: Text('x', style: kButtonTextStyle,),
),
Buttons(
widget1: Text('4', style: kNumberTextStyle,),
widget2: Text('5', style: kNumberTextStyle,),
widget3: Text('6', style: kNumberTextStyle,),
widget4: Text('-', style: kButton2TextStyle,),
),
Buttons(
widget1: Text('1', style: kNumberTextStyle,),
widget2: Text('2', style: kNumberTextStyle,),
widget3: Text('3', style: kNumberTextStyle,),
widget4: Text('+', style: kButtonTextStyle,),
),
Buttons(
widget1: Text('.', style: kNumberTextStyle,),
widget2: Text('0', style: kNumberTextStyle,),
widget3: Text('( )', style: kNumberTextStyle,),
widget4: Container(
padding: EdgeInsets.all(30.0),
color: Color(0xFFFFBE00),
child: Text('=', style: kNumberTextStyle,),
),
),
],
),
),
)
Please help!请帮忙!
there are several ways to achieve this, as learning curve, I recommend you read how flexible / expanded works有几种方法可以实现这一点,作为学习曲线,我建议您阅读灵活/扩展的工作原理
Colum and inside it, rows, each row will contain the buttons, use flexible or expanded in order to occupy the entire row not matter the display.列和它里面的行,每一行都会包含按钮,使用灵活或展开以占据整行不管显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.