import 'dart:async';

import 'package:flutter/material.dart';

class LoadingScreen6 extends StatefulWidget {
  const LoadingScreen6({super.key});

  @override
  State<LoadingScreen6> createState() => _LoadingScreen6State();
}

class _LoadingScreen6State extends State<LoadingScreen6> with TickerProviderStateMixin {
 late final AnimationController _controller=AnimationController(
     vsync: this,
    duration: const Duration(seconds: 2),
 )..repeat();

 @override
 void dispose() {
   _controller.dispose();
   super.dispose();
 }
  @override
  Widget build(BuildContext context) {
    Size scrSize=MediaQuery.of(context).size;
    Color myColor=Colors.grey.shade300;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.symmetric(vertical: 10),
              // color: Colors.blue,
              height: 55,
              width: scrSize.width,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                  itemCount: 5,
                  itemBuilder: (context,index){
                    return Stack(
                      children: [
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15),
                          height: 50,
                          width: 50,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: myColor
                          ),
                        ),
                        AnimatedBuilder(
                          animation: _controller,
                          child: Container(
                            width: 5,height:50 ,
                            transform: Matrix4.skew(-.3, 0),
                            decoration: BoxDecoration(
                                color: Colors.white.withOpacity(.4),
                                boxShadow: [BoxShadow(
                                    color: Colors.white.withOpacity(.7),
                                    spreadRadius: 15,
                                    blurRadius: 15
                                )]
                            ),
                          ),
                          builder: (context,child){
                            return Transform.translate(
                              offset: Offset(_controller.value*100, 0),
                              child: child,
                            );
                          },
                        ),

                      ],
                    );
                  }),
            ),

               Column(
                 children: [
                   ListView.builder(
                     shrinkWrap: true,
                     scrollDirection: Axis.vertical,
                       itemCount: 2,
                       itemBuilder: (context,index){
                         return Stack(
                           children: [
                             Padding(
                               padding: const EdgeInsets.only(left: 20,right: 20),
                               child: Column(
                                 mainAxisAlignment: MainAxisAlignment.start,
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   Container(
                                     margin: EdgeInsets.only(bottom: 15),
                                     height: scrSize.height/3.3,width: scrSize.width-15,
                                     decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(15),
                                       color: myColor
                                     ),
                                   ),
                                   Container(
                                     margin: const EdgeInsets.only(top: 5),
                                     height: 10,width: scrSize.width*.9,
                                     decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(15),
                                       color: myColor
                                     ),
                                   ),
                                   Container(
                                     margin: const EdgeInsets.only(top: 10),
                                     height: 10,width: scrSize.width*.8,
                                     decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(15),
                                       color: myColor
                                     ),
                                   ),
                                   if(index==0)
                                     SizedBox(height: 40,)
                                 ],
                               ),
                             ),
                             Column(
                               children: [
                                 AnimatedBuilder(
                                   animation: _controller,
                                   child: Container(
                                     width: 20,height:280 ,
                                     transform: Matrix4.skew(-.3, 0),
                                     decoration: BoxDecoration(
                                         color: Colors.white.withOpacity(.4),
                                         boxShadow: [BoxShadow(
                                             color: Colors.white.withOpacity(.7),
                                             spreadRadius: 30,
                                             blurRadius: 30
                                         )]
                                     ),
                                   ),
                                   builder: (context,child){
                                     return Transform.translate(
                                       offset: Offset(_controller.value*600, 0),
                                       child: child,
                                     );
                                   },
                                 ),
                                 AnimatedBuilder(
                                   animation: _controller,
                                   child: Container(
                                     margin: EdgeInsets.only(top: 10),
                                     width: 10,height:30 ,
                                     transform: Matrix4.skew(-.3, 0),
                                     decoration: BoxDecoration(
                                         color: Colors.white.withOpacity(.4),
                                         boxShadow: [BoxShadow(
                                             color: Colors.white.withOpacity(.7),
                                             spreadRadius: 15,
                                             blurRadius: 15
                                         )]
                                     ),
                                   ),
                                   builder: (context,child){
                                     return Transform.translate(
                                       offset: Offset(_controller.value*600, 0),
                                       child: child,
                                     );
                                   },
                                 ),
                               ],
                             ),
                           ],
                         );
                       })

                   // Stack(
                   //   children: [
                   //     Container(
                   //       alignment: Alignment.centerLeft,
                   //       height: 360,
                   //       width: scrSize.width,
                   //       child: Padding(
                   //         padding: const EdgeInsets.only(top: 10.0,left: 15),
                   //         child: Column(
                   //           mainAxisAlignment: MainAxisAlignment.start,
                   //           crossAxisAlignment: CrossAxisAlignment.start,
                   //           children: [
                   //             Container(
                   //               margin: EdgeInsets.only(bottom: 15),
                   //               height: 300,width: scrSize.width-15,color:myColor),
                   //             Container(
                   //               margin: const EdgeInsets.only(left: 10,top: 5),
                   //               height: 10,width: scrSize.width*.9,color: myColor),
                   //             Container(
                   //               margin: const EdgeInsets.only(left: 10,top: 10),
                   //               height: 10,width: scrSize.width*.8,color: myColor),
                   //           ],
                   //         ),
                   //       ),
                   //     ),
                   //     Column(
                   //       children: [
                   //         AnimatedBuilder(
                   //           animation: _controller,
                   //           child: Container(
                   //             width: 20,height:310 ,
                   //             transform: Matrix4.skew(-.3, 0),
                   //             decoration: BoxDecoration(
                   //                 color: Colors.white.withOpacity(.4),
                   //                 boxShadow: [BoxShadow(
                   //                     color: Colors.white.withOpacity(.7),
                   //                     spreadRadius: 30,
                   //                     blurRadius: 30
                   //                 )]
                   //             ),
                   //           ),
                   //           builder: (context,child){
                   //             return Transform.translate(
                   //               offset: Offset(_controller.value*600, 0),
                   //               child: child,
                   //             );
                   //           },
                   //         ),
                   //         AnimatedBuilder(
                   //           animation: _controller,
                   //           child: Container(
                   //             margin: EdgeInsets.only(top: 20),
                   //             width: 20,height:25 ,
                   //             transform: Matrix4.skew(-.3, 0),
                   //             decoration: BoxDecoration(
                   //                 color: Colors.white.withOpacity(.4),
                   //                 boxShadow: [BoxShadow(
                   //                     color: Colors.white.withOpacity(.7),
                   //                     spreadRadius: 20,
                   //                     blurRadius: 20
                   //                 )]
                   //             ),
                   //           ),
                   //           builder: (context,child){
                   //             return Transform.translate(
                   //               offset: Offset(_controller.value*600, 0),
                   //               child: child,
                   //             );
                   //           },
                   //         ),
                   //       ],
                   //     ),
                   //   ],
                   // ),
                 ],
               ),

          ],
        )
      ),
    );
  }
}