Блог

У меня есть представление сетки(3 элемента в строке) с динамическим количеством элементов. Я хочу, чтобы элемент GridView был внизу, означает, что если есть 3 элемента, то одна строка внизу экрана, если есть 6 элементов, то две строки внизу. Таким образом, динамическое заполнение сверху в зависимости от количества элементов и размера экрана. Моя структура кода выглядит следующим образом

 class className extends StatelessWidget {  @override  Widget build(BuildContext context) {  return Scaffold(  body: SafeArea(  child: Stack(  children: [  ImageFiltered(  //code here  ),  Container(  width: MediaQuery.of(context).size.width,  height: MediaQuery.of(context).size.height,  color: Colors.black38,  ),  GridView.builder(  primary: false,  reverse: false,  padding: const EdgeInsets.symmetric(  horizontal: 10,  vertical: 30,  ),  itemBuilder: (context, index) {    return InkWell(  onTap: () {  //code  },  child: CustomWidget(  title: toolkitStore.getLabel(toolKit),  icon: ImageIcon(  AssetImage(  'assets/images/abcd.png'),  size: 48,  color: kWhiteColor,  ),  ),  );  },  itemCount: getCount().length,  gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),  ),  ],  ),  ),  );  } }  

Теперь у меня есть это

but I want this

Заранее спасибо.

**Попробуйте вот это: **

 import 'package:flutter/material.dart';  class ClassName extends StatelessWidget {  @override  Widget build(BuildContext context) {  return Scaffold(  body: SafeArea(  child: Stack(  children: [  Container(height: 100,width: 200,color: Colors.green,),//lt;----Your any widget  Align(  alignment: Alignment.bottomCenter,  child: GridView.builder(  primary: false,  reverse: true,  padding: const EdgeInsets.symmetric(  horizontal: 10,  vertical: 30,  ),  itemBuilder: (context, index) {   return InkWell(  onTap: () {  //code  },  child: const Icon(Icons.person,size: 50,color: Colors.green,),  );  },  itemCount: 5,  gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),  ),  ),  Container(height: 100,width: 100,color: Colors.red,),//lt;----Your any widget  ],  ),  ),  );  } }  

Оберните свой GridView.builder Align виджет с помощью предоставленного alignment: Alignment.bottomCenter,

 Align(  alignment: Alignment.bottomCenter,  child: GridView.builder(  primary: false,  reverse: false,  

При использовании Stack используйте позиционный виджет( Positioned , Align ,…) для размещения детей в пользовательском интерфейсе.

Спасибо вам всем.

Я решил свою проблему с помощью виджета и настройки shrinkWrap: true , моя структура кода

 new Positioned(  left: 0.0,  bottom: 0.0,  width: MediaQuery.of(context).size.width,  child: GridView.builder(  shrinkWrap: true, //this is most important ))