Проблема с пикселями переполнения флаттера - PullRequest
0 голосов
/ 26 мая 2020

Это от London App Brewery, завершившего проект Flutter "BMI Calculator": https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.git

Я не уверен, вызвано ли это моим устаревшим телефоном android или android экран слишком маленький, но я получаю Bottom Overflow Pixels Например, две верхние карты имеют сообщение об ошибке Bottom Overflow by 19 Pixels, центральная карта имеет ошибку Bottom Overflowed by 60 pixels, а две нижние карты имеют ошибку Bottom Overflowed by 56 pixels.

Кроме того, если я поверну телефон на 90 градусов, размер изображения карточки резко уменьшится, как вы можете видеть на втором изображении.

Пожалуйста, помогите мне это исправить.

Спасибо

image

 class _InputPageState extends State<InputPage {
    @override   
    Widget build(BuildContext context) {
     return Scaffold(
       resizeToAvoidBottomPadding: false,
       appBar: AppBar(
         title: Text('BMI CALCULATOR'),
       ),
       body: Column(
        children: <Widget[
           Expanded(
               child: Row(
             children: <Widget[
               Expanded(
                 child: ReusableCard(
                   colour: colorCode,
                   cardChild: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget[
                       Icon(
                         FontAwesomeIcons.mars,
                         size: 20.0,
                       ),
                       SizedBox(
                         height: 5.0,
                       ),
                       Text(
                         'MALE',
                         style: TextStyle(
                           fontSize: 10.0,
                           color: Color(0xFF8D8E98),
                         ),
                       )
                     ],
                   ),
                 ),
               )]),),
        ]));
    }
}

1 Ответ

0 голосов
/ 26 мая 2020

Это происходит потому, что ваш пользовательский интерфейс занимает слишком много места для вашего телефона! У вас есть два варианта решения этой проблемы.

Либо вы оборачиваете свои переполненные виджеты в виджет с прокруткой, например SingleChildScrollView, это позволит вам прокручивать виджет, если он слишком велик.

Или вы рассчитываете размер виджета на основе по размеру устройства. Вы можете сделать это с помощью класса MediaQuery:

MediaQuery.of(context).size.height Может использоваться, например, для получения высоты устройства. Прочтите эту статью, если хотите пройти go по этому пути. https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6

Конечно, вы также можете просто уменьшить размер своих виджетов, чтобы они соответствовали вашему устройству. Это хорошо для учебных целей, но если вы действительно хотите опубликовать sh приложение, go с подходом MediaQuery.

Удачи!

...