zhiying_comm/lib/pages/login_page/login_page_sk.dart

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

///
/// 登陆页面的骨架屏
///
class LoginPageSkeleton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        width: double.infinity,
        height: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 230,
              child: Column(
                children: <Widget>[
                  /// logn
                  Padding(padding: const EdgeInsets.only(top: 60), child: _logo()),

                  /// appName
                  Padding(padding: const EdgeInsets.only(top: 12), child: _appName()),
                ],
              ),
            ),

            /// btn
            Padding(padding: const EdgeInsets.only(top: 50, left: 28, right: 28), child: _shimmerWidget(width: 320, height: 40, radius: 20)),
            Padding(padding: const EdgeInsets.only(top: 8, left: 28, right: 28), child: _shimmerWidget(width: 320, height: 40, radius: 20)),

            /// 协议
            Padding(padding: const EdgeInsets.only(top: 9, left: 28, right: 28), child: _shimmerWidget(width: 250, height: 14, radius: 0)),

            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Padding(padding: const EdgeInsets.only(bottom: 18), child: _shimmerWidget(width: 78, height: 18, radius: 0)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _logo() {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        height: 80,
        width: 80,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), color: Colors.white),
      ),
    );
  }

  Widget _appName() {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        width: 90,
        height: 22.5,
        color: Colors.white,
      ),
    );
  }

  Widget _shimmerWidget({double width, double height, double radius = 0}) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(radius)),
      ),
    );
  }
}