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

class BrandListSkeleton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 10),
              color: Colors.white,
              height: MediaQuery.of(context).padding.top + 46,
              width: 200,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 10),
                  color: Colors.white,
                  height: 40,
                  width: 60,
                ),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  color: Colors.white,
                  height: 40,
                  width: 60,
                ),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  color: Colors.white,
                  height: 40,
                  width: 60,
                ),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  color: Colors.white,
                  height: 40,
                  width: 60,
                ),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  color: Colors.white,
                  height: 40,
                  width: 60,
                ),
              ],
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              color: Colors.white,
              height: MediaQuery.of(context).padding.top + 46,
              width: 200,
            ),
            _buildItem(),
            _buildItem(),
            _buildItem()
          ],
        ));
  }

  Widget _buildItem() {
    return Container(
      margin: EdgeInsets.only(top: 16, left: 16, right: 16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                width: 40,
                height: 40,
                color: Colors.white,
              ),
              SizedBox(
                width: 16,
              ),
              Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 80,
                    height: 16,
                    color: Colors.white,
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Container(
                    width: 80,
                    height: 16,
                    color: Colors.white,
                  ),
                ],
              ))
            ],
          ),
          Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(right: 10, top: 10),
                width: 101,
                height: 101,
                color: Colors.white,
              ),
              Container(
                margin: EdgeInsets.only(right: 10, top: 10),
                width: 101,
                height: 101,
                color: Colors.white,
              ),
              Container(
                margin: EdgeInsets.only(right: 10, top: 10),
                width: 101,
                height: 101,
                color: Colors.white,
              ),

            ],
          ),
        ],
      ),
    );
  }
}
