I have been able to make a major part of the UI but few elements are still creating a problem for me.
This is the screenshot of the original UI of the app.
And this is the screenshot of the UI that I have been able to make up till now using Flutter
Screenshot of UI made with the help of flutter
Now can you please help me regarding how can I make that '=' container go to the extreme right just like in the original screenshot. And as well how should I align the first row on the same level as in the original 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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.