Flutter: Как создать отзывчивый Stack () с двумя текстовыми полями и кнопкой, которая пересекает границы обоих текстовых полей, в середине - PullRequest
Новая
       38

Flutter: Как создать отзывчивый Stack () с двумя текстовыми полями и кнопкой, которая пересекает границы обоих текстовых полей, в середине

0 голосов
/ 08 октября 2019

Я пытаюсь создать приложение для словаря. что-то вроде "https://translate.google.com/"., но я хочу, чтобы кнопка подкачки находилась между обоими полями, чтобы она пересекала границы обоих текстовых полей. Я пробовал код ниже, но в некоторых устройствах (высота: 480 против высоты: 2280) стек() дети перепрыгивают друг на друга. Как я могу сделать это отзывчивым? 

 Flexible(
                flex: 1,
                fit: FlexFit.tight,
                child: Stack(
                  children: <Widget>[
                    //first language
                    Align(
                      alignment: Alignment.topCenter,
                      child: Material(
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                             labelText: 'first language',
                              prefixIcon: const Icon(
                                 Icons.arrow_drop_down,
                                color: Colors.grey,
                              ),
                              prefixText: ' ',
                              suffixStyle: const TextStyle(color: Colors.grey)),
                        ),
                      ),
                    ),
//second language
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Material(
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              labelText: 'second language',
                              prefixIcon: const Icon(
                                Icons.arrow_drop_up,
                                color: Colors.grey,
                              ),
                              prefixText: ' ',
                              suffixStyle: const TextStyle(color: Colors.grey)),
                        ),
                      ),
                    ),
//REVERSE BUTTON in center
                    Align(

                      alignment: Alignment.center,

                      child: Flex(
                          //horizontaly
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          direction: Axis.horizontal,
                          children: <Widget>[
                            Flexible(flex: 10, child: Container()),
                            Flexible(
                              flex: 5,
                              child: Flex(
                                //vertically
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                direction: Axis.vertical,
                                children: <Widget>[
                                  Flexible(
                                      flex: 25,
                                      fit: FlexFit.tight,
                                      child: Container(

                                          )),
                                  Flexible(
                                    flex: 25,
                                    fit: FlexFit.tight,
                                    child: MaterialButton(
                                      child: ClipOval(
                                        child: Container(
                                         color: Color.fromRGBO(58, 90, 128, 1),
                                         child: Center(
                                            child: Icon(Icons.swap_vert,
                                                size: 33, color: Colors.white),
                                          ),
                                        ),
                                      ),
                                      onPressed: () {},
                                    ),
                                  ),
                                  Flexible(
                                      flex: 25,
                                      fit: FlexFit.tight,
                                      child: Container()),
                                ],
                              ),
                            ),
                            Flexible(flex: 10, child: Container()),
                          ]),
                    ),



                  ],
                )),
...