how to make swapping home screen grid view in flutter

Question

How to create a Home Screen grid view menu so that it is swappable and also gridview in flutter, like an example screenshot below.

Answer 1

you can use PageView or PageView.builder PageView accepts children, so wrap with it your gridView widgets, set the scrollDirection to Axis.vertical like :

PageView(
          scrollDirection: Axis.vertical,
          children: [
            YourFirstGridView(),
            YourSecondGridView(),
            YourThirdGridView(),
          ],
        ),

for the indicators you can wrap that PageView with a Stack widget and and add your indicator widget that will be controller by a PageController

Hope it helps

Answer 2

use scrollDirection: Axis.horizontal, in gridview

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class GridViewDemo extends StatefulWidget {
  const GridViewDemo({Key? key}) : super(key: key);

  @override
  State<GridViewDemo> createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  @override
  Widget build(BuildContext context) {
  return   Scaffold(
      appBar: AppBar(
        title: Text("Flutter GridView Demo"),
        backgroundColor: Colors.red,
      ),
      body: Container(
          padding: EdgeInsets.all(12.0),
          child: GridView.builder(
            itemCount: 50,
            scrollDirection: Axis.horizontal,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0
            ),
            itemBuilder: (BuildContext context, int index){
              return Image.network("");
            },
          )),
    );
  }
}