siopas-istw-mobile/lib/widget/loading_shimmer_show.dart

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

class ShimmerShow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        elevation: 5,
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300]!,
          highlightColor: Colors.grey[100]!,
          child: Column(
            children: [
              Card(
                shape: RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(15.0)),
                ),
                elevation: 0,
                margin: EdgeInsets.all(0),
                color: Colors.grey[300],
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.article, size: 30, color: Colors.white),
                          SizedBox(width: 10),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'ID:',
                                style: TextStyle(
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                ),
                              ),
                              SizedBox(height: 5),
                              Text(
                                '-',
                                style: TextStyle(
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 10),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              Divider(thickness: 1),
              _buildShimmerDetailItem(),
              // ... tambahkan shimmer item lainnya sesuai kebutuhan
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildShimmerDetailItem() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: 80,
            height: 12,
            color: Colors.grey[300],
          ),
          Container(
            width: 120,
            height: 12,
            color: Colors.grey[300],
          ),
        ],
      ),
    );
  }
}

class ShimmerLoadingAssetStatusCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          elevation: 0.0,
          shape: RoundedRectangleBorder(
            side: BorderSide(color: Colors.grey, width: 1.0),
            // borderRadius: BorderRadius.circular(10),
          ),
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300]!,
            highlightColor: Colors.grey[100]!,
            child: Padding(
              padding: const EdgeInsets.only(
                top: 8.0,
                bottom: 8.0,
                left: 16.0,
                right: 16.0,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildAvatarAndIndex(),
                  Divider(),
                  _buildInfoRow('Nama Peminjam:', '', 'PIC:', '', 11.5),
                  _buildInfoRow('Tanggal Peminjaman:', '',
                      'Estimasi Pengembalian:', '', 11.5),
                  _buildInfoRow('Asal Gudang:', '', 'Tujuan Gudang:', '', 11.5),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildAvatarAndIndex() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildAvatar(),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(
              left: 8.0,
              top: 8.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Text(
                //   '',
                //   style: TextStyle(
                //     fontWeight: FontWeight.bold,
                //     fontSize: 11.5,
                //   ),
                // ),
                lineDivider(),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget lineDivider() {
    return Container(
      height: 13,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.grey[500],
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(6), // Adjust top radius as needed
          bottom: Radius.circular(6), // Adjust bottom radius as needed
        ),
      ),
    );
  }

  Widget _buildAvatar() {
    return Container(
      child: CircleAvatar(
        radius: 11,
        backgroundColor: Colors.indigo,
      ),
    );
  }

  Widget _buildInfoRow(String title1, String content1, String title2,
      String content2, double fontSize) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title1,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: fontSize,
                ),
              ),
              SizedBox(height: 3),
              lineDivider(),
              // Text(
              //   content1,
              //   style: TextStyle(
              //     fontSize: fontSize - 0.5,
              //   ),
              // ),
            ],
          ),
        ),
        SizedBox(width: 10),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // lineDivider(),
              Text(
                title2,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: fontSize,
                ),
              ),
              SizedBox(height: 3),
              lineDivider()
              // Text(
              //   content2,
              //   style: TextStyle(
              //     fontSize: fontSize - 0.5,
              //   ),
              // ),
            ],
          ),
        ),
      ],
    );
  }
}

Widget shimmerSearch() {
  return Container(
    margin: EdgeInsets.only(top: 8, bottom: 8),
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.grey, width: 1.0),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              children: [
                Icon(Icons.search),
                SizedBox(width: 8),
                Expanded(
                  child: Container(
                    height: 16, // Match the font size in the original search
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}