I need to change this ListView to GridView Flutter .Thanks

 @override
  Widget build(BuildContext context) {
    return Consumer<ShopCategoryModel>(
      builder: (_, model, __) => ListView.separated(
        shrinkWrap: true,
        separatorBuilder: (_, index) => const Divider(),
        itemBuilder: (_, index) => model.isGettingCategories
            ? _catLoadingItem()
            : _catItem(model.categories[index]),
        itemCount: model.isGettingCategories ? 5 : model.categories.length,
      ),
    );
  }

CodePudding user response：

I have done minor modification to show it as a grid. Though if it is not as per you, please share the design you want to achieve.

GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: MediaQuery.of(context).orientation ==
              Orientation.landscape ? 3: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
        )
        itemCount:model.isGettingCategories ? 5 : model.categories.length,
        shrinkWrap: true,
        itemBuilder: (_,index,)  => model.isGettingCategories
            ? _catLoadingItem()
            : _catItem(model.categories[index]),
      )

CodePudding user response：

Use Widget GridView for list Item and rebuild UI when change

  var _isListView = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              _isListView = !_isListView
            });
          },
          child: Text("Switch"),
        ),
        Consumer<ShopCategoryModel>(
          builder: (_, model, __) =>
              _isListView ? ListView.separated() : GridView.builder(),
        )
      ],
    );
  }