part of 'pages.dart';

final List<String> imageList = [
  'assets/images/card3.png',
  'assets/images/card2.png',
  'assets/images/image1.png',
  'assets/images/image2.png',
  'assets/images/card4.png',
];


class CarouselPage extends StatefulWidget {
  const CarouselPage({ Key? key }) : super(key: key);
  static const routeName = '/carousel_page';

  @override
  _CarouselPageState createState() => _CarouselPageState();
}

class _CarouselPageState extends State<CarouselPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            CupertinoIcons.back,
            color: LLSColors.WHITE,
          ),
        ),
        title: const Text(
          'Carousel',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          const Padding(
            padding: EdgeInsets.only(left: 15, top: 30, bottom: 15),
            child: LLSLabel(
              text: 'Full Width',
              type: LLSLabelType.typo4,
              dividerWidth: 25,
              dividerColor: LLSColors.SECONDARY,
            ),
          ),
          LLSCarousel(
            autoPlay: true,
            pagination: true,
            viewportFraction: 1.0,
            activeIndicator: LLSColors.SUCCESS,
            passiveIndicator: LLSColors.DARK,
            aspectRatio: 2,
            items: imageList
                .map(
                  (url) => LLSImageOverlay(
                    height: 200,
                    margin: const EdgeInsets.only(
                      left: 15,
                      right: 15,
                      bottom: 30,
                    ),
                    borderRadius: const BorderRadius.all(Radius.circular(4)),
                    child: Padding(
                      padding: const EdgeInsets.only(top: 30, left: 0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const <Widget>[
                          Text(
                            'Title',
                            style: TextStyle(color: LLSColors.WHITE),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 30, right: 30, top: 30),
                            child: Text(
                              'Locator Logic is a powerful and unique analytic tool, created based on Indonesian market demand. Becoming and remaining successful in a constantly changing environment, requires more and better data.',
                              textAlign: TextAlign.center,
                              style: TextStyle(color: LLSColors.LIGHT),
                            ),
                          )
                        ],
                      ),
                    ),
                    image: AssetImage(url),
                  ),
                )
                .toList(),
            onPageChanged: (index) {
              setState(() {});
            },
          ),
          const Padding(
            padding: EdgeInsets.only(left: 15, top: 30, bottom: 15),
            child: LLSLabel(
              text: 'Full Size',
              type: LLSLabelType.typo4,
              dividerWidth: 25,
              dividerColor: LLSColors.SECONDARY,
            ),
          ),
          LLSCarousel(
            autoPlay: true,
            pagination: true,
            viewportFraction: 1.0,
            activeIndicator: LLSColors.SUCCESS,
            passiveIndicator: LLSColors.WHITE,
            aspectRatio: 2,
            items: imageList
                .map(
                  (url) => LLSImageOverlay(
                    height: 200,
                    margin: const EdgeInsets.only(left: 15, right: 15),
                    borderRadius: const BorderRadius.all(Radius.circular(4)),
                    child: Padding(
                      padding: const EdgeInsets.only(top: 30, left: 0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const <Widget>[
                          Text(
                            'Title',
                            style: TextStyle(color: LLSColors.WHITE),
                          ),
                          Padding(
                            padding: EdgeInsets.only(
                              left: 30,
                              right: 30,
                              top: 30,
                            ),
                            child: Text(
                              'Locator Logic is a powerful and unique analytic tool, created based on Indonesian market demand. Becoming and remaining successful in a constantly changing environment, requires more and better data.',
                              textAlign: TextAlign.center,
                              style: TextStyle(color: LLSColors.LIGHT),
                            ),
                          )
                        ],
                      ),
                    ),
                    image: AssetImage(url),
                  ),
                )
                .toList(),
            onPageChanged: (index) {
              setState(() {});
            },
          ),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }
}