sapaly_store/lib/features/screens/details/details.dart

import 'package:adaptix/adaptix.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sapaly_shop/common/photo.dart';
import 'package:sapaly_shop/features/services/page_navigator.dart';
import 'package:sapaly_shop/features/widgets/sapaly_app_bar.dart';
import 'package:sapaly_shop/models/details_model.dart';
import 'package:sapaly_shop/models/settings_model.dart';
import 'package:sapaly_shop/features/services/requests.dart';
import 'package:sapaly_shop/themes/app_theme.dart';

class Details extends StatefulWidget {
  const Details({
    super.key,
    required this.id,
    required this.image,
    required this.description,
    required this.price,
  });

  final int id;
  final String image, description, price;

  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  int amount = 1;
  DetailsModel? details;

  Future<void> getData() async {
    final result = await API().getDetails(widget.id);
    if (mounted) {
      setState(() {
        details = result;
      });
    }
  }

  late String currentLanguage;
  @override
  void initState() {
    getData();
    currentLanguage = SettingsModel.of(context).currentLanguage;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.lightBackgroundColor,
      appBar: SapalyAppBar(
        hasActionButton: true,
        badge: '2',
        title: widget.description,
        actionButton: SvgPicture.asset('assets/icons/cart.svg'),
        leadingButton: const Icon(Icons.arrow_back, color: AppTheme.blackColor),
        leadingOnTap: () {
          Navigator.of(context).pop();
        },
        actionOnTap: () {},
      ),
      body: details == null
          ? const Center(child: CircularProgressIndicator())
          : Container(
              alignment: Alignment.center,
              margin: EdgeInsets.symmetric(
                horizontal: 20.adaptedPx(),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 15.adaptedPx()),
                    child: GestureDetector(
                      onTap: () {
                        PageNavigator(ctx: context)
                            .nextPage(page: PhotoScreen(widget.image));
                      },
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16.adaptedPx()),
                        child: CachedNetworkImage(
                          imageUrl: widget.image,
                          width: double.infinity,
                          errorWidget: (context, url, error) => Center(
                            child: SizedBox(
                              height: 150.adaptedPx(),
                              child: const CircularProgressIndicator(
                                color: AppTheme.lightPrimaryColor,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      widget.description,
                      style: Theme.of(context)
                          .primaryTextTheme
                          .bodyMedium
                          ?.copyWith(
                            fontWeight: FontWeight.w600,
                            fontSize: 18.adaptedPx(),
                            color: AppTheme.blackColor,
                          ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 15.adaptedPx()),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        widget.description,
                        textAlign: TextAlign.left,
                        style: Theme.of(context)
                            .primaryTextTheme
                            .bodyMedium
                            ?.copyWith(
                              fontWeight: FontWeight.w500,
                              fontSize: 13.adaptedPx(),
                              color: AppTheme.blackColor,
                            ),
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        widget.price,
                        style: Theme.of(context)
                            .primaryTextTheme
                            .bodyMedium
                            ?.copyWith(
                              fontWeight: FontWeight.w600,
                              fontSize: 18.adaptedPx(),
                              color: AppTheme.blackColor,
                            ),
                      ),
                      const Spacer(),
                      Container(
                        decoration: BoxDecoration(
                          color: AppTheme.whiteColor,
                          borderRadius: BorderRadius.circular(16.adaptedPx()),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextButton(
                              onPressed: () {
                                setState(() {
                                  amount++;
                                });
                              },
                              style: TextButton.styleFrom(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(16.adaptedPx()),
                                    bottomLeft: Radius.circular(16.adaptedPx()),
                                  ),
                                ),
                              ),
                              child: Text(
                                '+',
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .bodyMedium
                                    ?.copyWith(
                                      fontSize: 18.adaptedPx(),
                                      color: AppTheme.blackColor,
                                    ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 10.adaptedPx()),
                              child: Text(
                                amount.toString(),
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .bodyMedium
                                    ?.copyWith(
                                      fontSize: 18.adaptedPx(),
                                      color: AppTheme.blackColor,
                                    ),
                              ),
                            ),
                            TextButton(
                              onPressed: () {
                                setState(() {
                                  amount--;
                                });
                              },
                              style: TextButton.styleFrom(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(16.adaptedPx()),
                                    bottomRight:
                                        Radius.circular(16.adaptedPx()),
                                  ),
                                ),
                              ),
                              child: Text(
                                '-',
                                style: Theme.of(context)
                                    .primaryTextTheme
                                    .bodyMedium
                                    ?.copyWith(
                                      fontSize: 18.adaptedPx(),
                                      color: AppTheme.blackColor,
                                    ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  const Spacer(),
                  MaterialButton(
                    onPressed: () {
                      var snackBar = SnackBar(
                        content: Text(
                          'Added to Card',
                          style: Theme.of(context)
                              .primaryTextTheme
                              .bodyMedium
                              ?.copyWith(
                                fontSize: 15.adaptedPx(),
                              ),
                        ),
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                    height: 50.adaptedPx(),
                    color: AppTheme.lightPrimaryColor,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16.adaptedPx())),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(
                          Icons.shopping_cart,
                          color: AppTheme.whiteColor,
                        ),
                        SizedBox(width: 10.adaptedPx()),
                        Text(
                          'Add to Cart',
                          style: Theme.of(context)
                              .primaryTextTheme
                              .bodyMedium
                              ?.copyWith(
                                color: AppTheme.whiteColor,
                                fontWeight: FontWeight.w600,
                              ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 20.adaptedPx()),
                ],
              ),
            ),
    );
  }
}