class _MyMobileBodyState extends State<MyMobileBody> {
  static const List<String> posts = [
    'assets/img/background/image-5.png',
    'assets/img/background/image-4.jpg',
    'assets/img/background/image-3.jpg',
    'assets/img/map/avatar-1.png',
    'assets/img/map/avatar-3.png',
    'assets/img/map/avatar-5.png',
  ];

  dynamic _selectProduct = {};
  bool isSelectd = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.8,
            width: MediaQuery.of(context).size.width,
            child: CarouselSlider(
              options: CarouselOptions(
                height: 450,
                aspectRatio: 16 / 9,
                viewportFraction: 0.7,
                enlargeCenterPage: true,
              ),
              items: posts.map((item) {
                return Builder(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                        setState(() {
                          if (_selectProduct == item) {
                            _selectProduct = {};
                            isSelectd = false;
                          } else {
                            _selectProduct = item;
                            isSelectd = true;
                            print(_selectProduct);
                          }
                        });
                      },
                      child: AnimatedContainer(
                        width: double.infinity,
                        duration: const Duration(milliseconds: 250),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                          border: _selectProduct == item
                              ? Border.all(
                                  color: Colors.blue.shade500,
                                  width: 3,
                                )
                              : null,
                          boxShadow: _selectProduct == item
                              ? [
                                  BoxShadow(
                                    color: Colors.blue.shade100,
                                    blurRadius: 30,
                                    offset: const Offset(0, 10),
                                  ),
                                ]
                              : [
                                  BoxShadow(
                                    color: Colors.grey.withOpacity(0.2),
                                    blurRadius: 20,
                                    offset: const Offset(0, 5),
                                  ),
                                ],
                        ),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              Hero(
                                transitionOnUserGestures: true,
                                tag: item.split('/').last,
                                child: Container(
                                  height: 320,
                                  clipBehavior: Clip.hardEdge,
                                  margin: const EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  child: Image.asset(item, fit: BoxFit.cover),
                                ),
                              ),
                              const SizedBox(height: 10),
                              const Text(
                                'Test Page',
                                style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              const SizedBox(height: 10),
                              Text(
                                'welcome to geecoders.com',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.grey.shade600),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ),
            AnimatedContainer(
              duration: const Duration(milliseconds: 250),
              height: isSelectd ? 40 : 0,
              width: isSelectd ? 300 : 0,
              child: MaterialButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                color: Colors.blue.shade500,
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) =>
                    ProductViewPage(img: _selectProduct,hero: _selectProduct.split('/').last),
                  ));
                },
                child: const Text(
                  'Add to cart',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}