new_page.dart

import 'package:flutter/material.dart';

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

  @override
  _NewPageState createState() => _NewPageState();
}

class _NewPageState extends State<NewPage> {
  int _currentIndex = 0;
  List<Widget> _pages = [
    Container(child: Text("PAGE 1")),
    Container(child: Text("PAGE 2")),
    Container(child: Text("PAGE 3")),
    Container(child: Text("PAGE 4")),
  ];
  List _menu = [
    
        // You can add other propetie or create a meun class

    {"icon": Icon(Icons.ac_unit_outlined)},
    {"icon": Icon(Icons.padding)},
    {"icon": Icon(Icons.grade)},
    {"icon": Icon(Icons.hail)},
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            children: [
              Container(
                height: 70,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 4,
                    itemBuilder: (_, index) {
                      return GestureDetector(
                        onTap: () {
                          _currentIndex = index;
                          setState(() {});
                        },
                        child: Container(
                          padding: EdgeInsets.all(15),
                          margin: EdgeInsets.all(5),
                          color: _currentIndex == index ? Colors.blue : Colors.grey,
                          child: Center(child: _menu[index]['icon']),
                        ),
                      );
                    }),
              ),
              Expanded(child: _pages[_currentIndex])
            ],
          ),
        ),
      ),
    );
  }
}