Блог

Я смог создать большую часть пользовательского интерфейса, но несколько элементов по-прежнему создают для меня проблему.

Это скриншот исходного пользовательского интерфейса приложения.

Оригинальный скриншот

И это скриншот пользовательского интерфейса, который я смог создать до сих пор, используя Flutter

Скриншот пользовательского интерфейса, сделанный с помощью flutter

Теперь, пожалуйста, помогите мне, как я могу сделать так, чтобы контейнер ‘=’ перемещался в крайнее правое положение, как на оригинальном скриншоте. А также как мне выровнять первую строку на том же уровне, что и в исходном пользовательском интерфейсе.

Это код, который я создал для контейнера, содержащего все цифры.

 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,),
                    ),
                  ),
                ],
              ),
            ),
          )
 

Пожалуйста, помогите!

есть несколько способов добиться этого, в качестве кривой обучения, я рекомендую вам прочитать, как работает гибкий / расширенный

Столбец и внутри него строки, каждая строка будут содержать кнопки, используйте гибкие или расширенные, чтобы занимать всю строку, независимо от отображения.