CategoryItemComponent

import 'package:flutter/material.dart';
import 'package:fooddelivery/models/CategoryModel.dart';
import 'package:nb_utils/nb_utils.dart';

class CategoryItemComponent extends StatefulWidget {
  final CategoryModel? category;
  final int initialPosition;
  final int index;
  final Function(int index) onSelected;

  CategoryItemComponent({
    required this.category,
    required this.onSelected,
    this.initialPosition = 0,
    required this.index,
  });

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

class _CategoryItemComponentState extends State<CategoryItemComponent> {
  late int current;

  @override
  void initState() {
    super.initState();
    current = widget.initialPosition;
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return GestureDetector(
        onTap: () async {
          setState(() => current = widget.index);
          widget.onSelected(widget.index);
        },
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: size.height / 7,
                width: size.width / 5,
                decoration: boxDecorationWithRoundedCorners(
                  //backgroundColor: Color(0xFF71B24D),
                  backgroundColor: Colors.white,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                      height: size.height / 14,
                      //width: size.width / 5,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image:
                                Image.network(widget.category!.image.validate())
                                    .image,
                            fit: BoxFit.cover),
                        shape: BoxShape.circle,
                        color: Colors.white,
                        boxShadow: defaultBoxShadow(
                            spreadRadius: 0.0, blurRadius: 0.0),
                      ),
                    ),
                    Text(
                      widget.category!.categoryName.validate(),
                      style: primaryTextStyle(
                          color: Colors.black,
                          fontFamily: 'Comfortaa',
                          size: 12),
                      maxLines: 2,
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                    ).paddingTop(3),
                    Container(
                        height: size.height / 60,
                        width: size.width / 60,
                        decoration: new BoxDecoration(
                          color: Color(0xFF71B24D),
                          shape: BoxShape.circle,
                        )).visible(widget.index == current),
                  ],
                ).paddingOnly(top: 5, left: 5, right: 5),
              ),
            ),
          ],
        ).paddingOnly(left: 5, right: 10));
  }
}