Виджет Flutter GridView для небольших экранов

Question

Я пытаюсь создать GridView 2x3 в своем приложении, он отлично работает на устройствах с большим экраном, но для таких устройств, как iPhone SE (4 дюйма) GridView не масштабируется самостоятельно. Он появляется с прокруткой или переполнением снизу.

Как я могу убедиться, что все остальные виджеты размещены на своих местах, а остальное пространство используется GridView, и без прокрутки все элементы видны? Вы можете проверить код ниже или также можете проверить этот код

import 'package:flutter/material.dart';

class StatsScreen extends StatefulWidget {
 static const String id = 'stats_screen';

 StatsScreen({Key key}) : super(key: key);
 @override
 _StatsScreenState createState() => _StatsScreenState();
}

class _StatsScreenState extends State<StatsScreen> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       padding:
           EdgeInsets.only(top: 60.0, left: 20.0, right: 20.0, bottom: 0.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           Text(
             'MyText',
             style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w700),
           ),
           SizedBox(
             height: 20,
           ),
           Expanded(
             child: GridView.count(
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('He\'d have you all unravel at the'),
                   color: Colors.teal[100],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Heed not the rabble'),
                   color: Colors.teal[200],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Sound of screams but the'),
                   color: Colors.teal[300],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Who scream'),
                   color: Colors.teal[400],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution is coming...'),
                   color: Colors.teal[500],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution, they...'),
                   color: Colors.teal[600],
                 ),
               ],
             ),
           ),
           SizedBox(
             height: 30.0,
           ),
           RaisedButton(
             onPressed: () {},
             child: Text(
               'MyRaisedButton',
               style: TextStyle(
                 fontSize: 30.0,
                 color: Colors.white,
               ),
             ),
             color: Colors.red[900],
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(30.0),
             ),
           )
         ],
       ),
     ),
   );
 }
}

Answer 1

В GridView.count имеет свойство под названием childAspectRatio.

childAspectRatio - отношение поперечной оси к экстенту главной оси каждого дочернего элемента.

Вы можете настроить свойства, начиная с 0 на любое значение, соответствующее желаемым требованиям приложения.

Надеюсь, это поможет.

Обратите внимание childAspectRatio должен иметь значение больше, чем 0.

Посмотрите пример кода ниже:

GridView.count(
               childAspectRatio: 1.0,
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                  ........
                   ]
              )

Answer 2

Попробуйте обернуть тело виджетом SafeArea.