syncrow-web/lib/pages/device_managment/gateway/view/gateway_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/device_managment/gateway/bloc/gate_way_bloc.dart';
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

class GateWayControlsView extends StatelessWidget with HelperResponsiveLayout {
  const GateWayControlsView({super.key, required this.gatewayId});

  final String gatewayId;

  @override
  Widget build(BuildContext context) {
    final isExtraLarge = isExtraLargeScreenSize(context);
    final isLarge = isLargeScreenSize(context);
    final isMedium = isMediumScreenSize(context);

    return BlocProvider(
      create: (context) => GateWayBloc()..add(GatWayById(gatewayId)),
      child: BlocBuilder<GateWayBloc, GateWayState>(
        builder: (context, state) {
          if (state is GatewayLoadingState) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is UpdateGatewayState) {
            return GridView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: isLarge || isExtraLarge
                    ? 3
                    : isMedium
                        ? 2
                        : 1,
                mainAxisExtent: 140,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
              ),
              itemCount: state.list.length,
              itemBuilder: (context, index) {
                final device = state.list[index];
                return _DeviceItem(device: device);
              },
            );
          } else {
            return const Center(child: Text('Error fetching status'));
          }
        },
      ),
    );
  }
}

class _DeviceItem extends StatelessWidget {
  const _DeviceItem({
    required this.device,
  });

  final DeviceModel device;

  @override
  Widget build(BuildContext context) {
    return DeviceControlsContainer(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              color: ColorsManager.whiteColors,
            ),
            margin: const EdgeInsets.symmetric(horizontal: 4),
            padding: const EdgeInsets.all(4),
            child: ClipOval(
              child: SvgPicture.asset(
                device.icon,
                fit: BoxFit.fill,
              ),
            ),
          ),
          const Spacer(),
          Text(
            device.name ?? 'Unknown Device',
            textAlign: TextAlign.start,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}