Блог

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

Я бы хотел, Screen A чтобы это выглядело как Screen B независимо от размера устройства.

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

 
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;

    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Gestion de flota'),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.exit_to_app,
            ),
            onPressed: () async {
              _signOut().whenComplete(() =>
                  navigatorKey.currentState.pushReplacementNamed('/login'));
            },
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Form(
          key: _formKey,
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  GridView.count(
                    childAspectRatio: (10 / 4),
                    crossAxisCount: 2,
                    shrinkWrap: true,
                    children: [
                      _getHourStart(),
                      _getHourEnd(),
                      _getDateStart(),
                      _getDateEnd(),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 10),
              Column(
                children: <Widget>[
                  GridView.count(
                    childAspectRatio: (3 / 0.7),
                    crossAxisCount: 1,
                    shrinkWrap: true,
                    children: [
                      _getHourStart(),

                    ],
                  ),
                ],
              ),
              SizedBox(height: 10),
              GridView.count(
                crossAxisCount: 2,
                childAspectRatio: (3 / 2),
                shrinkWrap: true,
                children: [
                  Card(
                    child: _uploadPic(Foto.primera, picList[0]),
                  ),
                  Card(
                    child: _uploadPic(Foto.segunda, picList[1]),
                  ),
                  Card(
                    child: _uploadPic(Foto.tercera, picList[2]),
                  ),
                  Card(
                    child: _uploadPic(Foto.cuarta, picList[3]),
                  ),
                ],
              ),
              SizedBox(height: 20),
              InkWell(
                onTap: () async { // more code... }
                child: SubmitButton(context, 'Enviar datos'),
              ),
              Container(
                padding: EdgeInsets.symmetric(vertical: 10),
                alignment: Alignment.centerRight,
              ),
              SizedBox(height: height * .14),
            ],
          ),
        ),
      ),
    );
  }
}
 

вы можете использовать MediaQuery

вы получаете размер мобильного экрана с помощью:

конечная высота = MediaQuery.of(context).size.height

конечная ширина = MediaQuery.of(context).size.width

Одним из решений этой проблемы является добавление Expanded ко всем дочерним элементам в Column виджете.

Другой и предпочтительный :

сделайте свой Container рост высотой вашего экрана.

   body: Container(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
 

затем добавьте свойство mainAxisAlignment к обоим Column виджетам.

  child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
]