getSkeletonView method

  1. @protected
Widget getSkeletonView(
  1. BuildContext context,
  2. T controller
)

Implementation

@protected
Widget getSkeletonView(BuildContext context, T controller) {
  String skeleton = isComponent ? 'component' : 'view';
  Get.log(
    '${toString()} build skeleton $skeleton',
    isError: false,
  );
  //show waiting view when is not component
  if (!isComponent) {
    return getWaitingView(context);
  }
  return Material(
    child: SafeArea(
      child: LayoutBuilder(
        builder: (context, constraints) {
          double heightItem = 150;
          final double height = constraints.maxHeight != double.infinity
              ? constraints.maxHeight
              : heightItem;
          final double width = constraints.maxWidth;
          if (heightItem > height) {
            heightItem = height;
          }
          final int count = height ~/ heightItem;
          return ListView.separated(
            shrinkWrap: true,
            padding: const EdgeInsets.all(16),
            physics: const NeverScrollableScrollPhysics(),
            separatorBuilder: (_, __) => const SizedBox(height: 16),
            itemCount: count,
            itemBuilder: (_, __) => SizedBox(
              height: heightItem,
              width: width,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          flex: 2,
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.grey[100],
                            ),
                          ),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          flex: 1,
                          child: Column(
                            children: [
                              Expanded(
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Colors.grey[100],
                                  ),
                                ),
                              ),
                              const SizedBox(height: 8),
                              Expanded(
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Colors.grey[100],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    height: 20,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.grey[100],
                    ),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    height: 20,
                    width: MediaQuery.of(context).size.width / 1.5,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.grey[100],
                    ),
                  )
                ],
              ),
            ),
          );
        },
      ),
    ),
  );
}