Preview:
1.




import 'package:enum_to_string/enum_to_string.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:rrispat_app/src/constants/enums.dart';
import 'package:rrispat_app/src/core/utils.dart';
import 'package:rrispat_app/src/features/gi/domain/models/pco_handover_model.dart';
import 'package:rrispat_app/src/features/gi/domain/provider/all_pco_handover_provider.dart';

import '../../../../core/components/division_card.dart';
import 'verify_details_page.dart';

class VerifyHandOverPage extends ConsumerStatefulWidget {
  const VerifyHandOverPage({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _VerifyHandOverPageState();
}

class _VerifyHandOverPageState extends ConsumerState<VerifyHandOverPage> {
  List<PCOHandoverModel> pcoHandOverdata = [];

  @override
  Widget build(BuildContext context) {
    pcoHandOverdata.clear();
    ref
        .read(giAllPcoHandOverDataProvider.notifier)
        .getAllHandOver()
        .forEach((element) {
      pcoHandOverdata.add(element);
    });
    return ListView.builder(
      itemCount: pcoHandOverdata.length,
      itemBuilder: (context, index) {
        return buildTransaction(pcoHandOverdata[index]);
      },
    );
  }

  Widget buildTransaction(PCOHandoverModel pcoHandoverModel) {
    print(pcoHandoverModel);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
      child: InkWell(
        onTap: () => context.pushNamed(VerifyDetailsPage.routeName,
            pathParameters: {'id': pcoHandoverModel.id.toString()}),
        borderRadius: BorderRadius.circular(15),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue.shade200, Colors.blue.shade50],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(15),
            boxShadow: [
              BoxShadow(
                color: Colors.blue.withOpacity(0.3),
                offset: const Offset(0, 6),
                blurRadius: 12,
              ),
            ],
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Header Row with Date, Division and Shift
                Row(
                  children: [
                    Text(
                      DateFormat.yMMMEd().format(
                        DateTime.parse(pcoHandoverModel.createdAt.toString()),
                      ),
                      style: Theme.of(context).textTheme.labelMedium?.copyWith(
                            fontWeight: FontWeight.w600,
                          ),
                    ),
                    const SizedBox(width: 10),
                    DivisionCard(
                      division: EnumToString.fromString(
                        Division.values,
                        pcoHandoverModel.division,
                      ) as Division,
                    ),
                    const Spacer(),
                    Column(
                      children: [
                        Icon(
                          (pcoHandoverModel.shift == "Day")
                              ? Icons.light_mode
                              : Icons.dark_mode,
                          size: 28,
                          color: Colors.black54,
                        ),
                        Text(
                          pcoHandoverModel.shift.toString(),
                          style: Theme.of(context)
                              .textTheme
                              .labelMedium
                              ?.copyWith(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                // Summary Row with Trail No, Items Count and Verified Count
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "TrailNo : ${pcoHandoverModel.trailNo}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge
                          ?.copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Type of Items : ${pcoHandoverModel.pcoModels.length}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge
                          ?.copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Verify Items : ${pcoHandoverModel.pcoModels.fold(0, (previousValue, element) => (element.verify == true) ? previousValue + 1 : previousValue)}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge
                          ?.copyWith(fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                const Divider(
                  height: 20,
                  thickness: 1,
                  color: Colors.blueGrey,
                ),
                // Details Chips
                Wrap(
                  spacing: 10,
                  runSpacing: 8,
                  children: [
                    detailChip(
                        label: "JC No",
                        value: pcoHandoverModel.pcoModels[0].jcNo.toString()),
                    detailChip(
                        label: "Mark No",
                        value: pcoHandoverModel.pcoModels[0].markNo.toString()),
                    detailChip(
                        label: "Section",
                        value:
                            pcoHandoverModel.pcoModels[0].section.toString()),
                    detailChip(
                        label: "Thickness",
                        value:
                            pcoHandoverModel.pcoModels[0].thickness.toString()),
                    detailChip(
                        label: "Length",
                        value: pcoHandoverModel.pcoModels[0].length.toString()),
                    detailChip(
                        label: "Quantity",
                        value:
                            pcoHandoverModel.pcoModels[0].quantity.toString()),
                    detailChip(
                        label: "Weight",
                        value: pcoHandoverModel.pcoModels[0].weight.toWeight()),
                    detailChip(
                        label: "Total Weight",
                        value: (pcoHandoverModel.pcoModels[0].quantity *
                                pcoHandoverModel.pcoModels[0].weight)
                            .toWeight()),
                    detailChip(
                        label: "Reject Qty",
                        value: pcoHandoverModel.pcoModels[0].rejectQuantity
                            .toString()),
                    detailChip(
                        label: "Reject Wt",
                        value: pcoHandoverModel.pcoModels[0].rejectWeights!
                            .toWeight()),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget detailChip({required String label, required String value}) {
    return Chip(
      label: Text(
        "$label: $value",
        style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
      ),
      backgroundColor: Colors.white.withOpacity(0.8),
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    );
  }
}






2.



import 'package:enum_to_string/enum_to_string.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:rrispat_app/src/constants/enums.dart';
import 'package:rrispat_app/src/core/utils.dart';
import 'package:rrispat_app/src/features/gi/domain/models/pco_handover_model.dart';
import 'package:rrispat_app/src/features/gi/domain/provider/all_pco_handover_provider.dart';

import '../../../../core/components/division_card.dart';
import 'verify_details_page.dart';

class VerifyHandOverPage extends ConsumerStatefulWidget {
  const VerifyHandOverPage({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _VerifyHandOverPageState();
}

class _VerifyHandOverPageState extends ConsumerState<VerifyHandOverPage> {
  List<PCOHandoverModel> pcoHandOverdata = [];
  @override
  Widget build(BuildContext context) {
    pcoHandOverdata.clear();
    ref
        .read(giAllPcoHandOverDataProvider.notifier)
        .getAllHandOver()
        .forEach((element) {
      pcoHandOverdata.add(element);
    });
    return Container(
      // A subtle gradient background for an extra layer of visual depth.
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.white, Colors.grey[200]!],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: ListView.builder(
        itemCount: pcoHandOverdata.length,
        itemBuilder: (context, index) {
          return buildTransaction(pcoHandOverdata[index]);
        },
      ),
    );
  }

  Widget buildTransaction(PCOHandoverModel pcoHandoverModel) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: GestureDetector(
        onTap: () => context.pushNamed(
          VerifyDetailsPage.routeName,
          pathParameters: {'id': pcoHandoverModel.id.toString()},
        ),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
          // A slight transform adds a subtle 3D tilt effect.
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..rotateX(0.02),
          decoration: BoxDecoration(
            color: Theme.of(context).cardColor,
            borderRadius: BorderRadius.circular(12),
            // Dual shadows simulate a raised, 3D look.
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                offset: const Offset(4, 4),
                blurRadius: 8,
              ),
              BoxShadow(
                color: Colors.white.withOpacity(0.8),
                offset: const Offset(-4, -4),
                blurRadius: 8,
              ),
            ],
          ),
          child: ListTile(
            contentPadding: const EdgeInsets.all(16),
            trailing: (pcoHandoverModel.shift == "Day")
                ? Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(
                        Icons.light_mode,
                        size: 28,
                      ),
                      Text(pcoHandoverModel.shift.toString())
                    ],
                  )
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(
                        Icons.dark_mode,
                        size: 28,
                      ),
                      Text(pcoHandoverModel.shift.toString())
                    ],
                  ),
            title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      DateFormat().add_yMMMEd().format(DateTime.parse(
                          pcoHandoverModel.createdAt.toString())),
                      style: Theme.of(context).textTheme.labelMedium,
                    ),
                    const SizedBox(width: 10),
                    DivisionCard(
                      division: EnumToString.fromString(
                              Division.values, pcoHandoverModel.division)
                          as Division,
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "TrailNo : ${pcoHandoverModel.trailNo}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Type of Items : ${pcoHandoverModel.pcoModels.length}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Verify Items : ${pcoHandoverModel.pcoModels.fold(0, (previousValue, element) => (element.verify == true) ? previousValue + 1 : previousValue)}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ],
            ),
            // Using a Wrap for subtitle texts ensures responsiveness without altering your color choices.
            subtitle: Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Wrap(
                spacing: 8,
                runSpacing: 4,
                children: [
                  Text(
                      "JC No : ${pcoHandoverModel.pcoModels[0].jcNo.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Mark No : ${pcoHandoverModel.pcoModels[0].markNo.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Section : ${pcoHandoverModel.pcoModels[0].section.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Thickness : ${pcoHandoverModel.pcoModels[0].thickness.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Length : ${pcoHandoverModel.pcoModels[0].length.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Quantity : ${pcoHandoverModel.pcoModels[0].quantity.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Weight : ${pcoHandoverModel.pcoModels[0].weight.toWeight()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Total Weight : ${(pcoHandoverModel.pcoModels[0].quantity * pcoHandoverModel.pcoModels[0].weight).toWeight()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Reject Quantity : ${pcoHandoverModel.pcoModels[0].rejectQuantity.toString()}",
                      style: Theme.of(context).textTheme.labelMedium),
                  Text(
                      "Reject Weight : ${pcoHandoverModel.pcoModels[0].rejectWeights!.toWeight()}",
                      style: Theme.of(context).textTheme.labelMedium),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}


3.




import 'package:enum_to_string/enum_to_string.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:rrispat_app/src/constants/enums.dart';
import 'package:rrispat_app/src/core/utils.dart';
import 'package:rrispat_app/src/features/gi/domain/models/pco_handover_model.dart';
import 'package:rrispat_app/src/features/gi/domain/provider/all_pco_handover_provider.dart';

import '../../../../core/components/division_card.dart';
import 'verify_details_page.dart';

class VerifyHandOverPage extends ConsumerStatefulWidget {
  const VerifyHandOverPage({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _VerifyHandOverPageState();
}

class _VerifyHandOverPageState extends ConsumerState<VerifyHandOverPage> {
  List<PCOHandoverModel> pcoHandOverdata = [];
  @override
  Widget build(BuildContext context) {
    pcoHandOverdata.clear();
    ref
        .read(giAllPcoHandOverDataProvider.notifier)
        .getAllHandOver()
        .forEach((element) {
      pcoHandOverdata.add(element);
    });
    return Container(
      // decoration: BoxDecoration(
      //   gradient: LinearGradient(
      //     colors: [Colors.white, Colors.blue.shade50], // subtle gradient
      //     begin: Alignment.topCenter,
      //     end: Alignment.bottomCenter,
      //   ),
      // ),
      child: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 10),
        itemCount: pcoHandOverdata.length,
        itemBuilder: (context, index) {
          return buildTransaction(pcoHandOverdata[index]);
        },
      ),
    );
  }

  Widget buildTransaction(PCOHandoverModel pcoHandoverModel) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: Card(
        elevation: 8,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(12),
          onTap: () => context.pushNamed(VerifyDetailsPage.routeName,
              pathParameters: {'id': pcoHandoverModel.id.toString()}),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              children: [
                // Top row: Date, Division and Shift Icon/Label
                Row(
                  children: [
                    Text(
                      DateFormat().add_yMMMEd().format(DateTime.parse(
                          pcoHandoverModel.createdAt.toString())),
                      style: Theme.of(context).textTheme.labelMedium,
                    ),
                    const SizedBox(width: 10),
                    DivisionCard(
                      division: EnumToString.fromString(
                              Division.values, pcoHandoverModel.division)
                          as Division,
                    ),
                    const Spacer(),
                    Column(
                      children: [
                        Icon(
                          pcoHandoverModel.shift == "Day"
                              ? Icons.light_mode
                              : Icons.dark_mode,
                          size: 28,
                        ),
                        Text(
                          pcoHandoverModel.shift.toString(),
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                // Middle row: TrailNo, Type of Items and Verify Items count
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "TrailNo : ${pcoHandoverModel.trailNo}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Type of Items : ${pcoHandoverModel.pcoModels.length}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Verify Items : ${pcoHandoverModel.pcoModels.fold(0, (previousValue, element) => (element.verify == true) ? previousValue + 1 : previousValue)}",
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                // Conditionally display the details only if there is at least one model
                if (pcoHandoverModel.pcoModels.length <= 1)
                  Wrap(
                    spacing: 10,
                    runSpacing: 5,
                    children: [
                      Text("JC No : ${pcoHandoverModel.pcoModels[0].jcNo}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text("Mark No : ${pcoHandoverModel.pcoModels[0].markNo}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text("Section : ${pcoHandoverModel.pcoModels[0].section}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Thickness : ${pcoHandoverModel.pcoModels[0].thickness}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text("Length : ${pcoHandoverModel.pcoModels[0].length}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Quantity : ${pcoHandoverModel.pcoModels[0].quantity}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Weight : ${pcoHandoverModel.pcoModels[0].weight.toWeight()}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Total Weight : ${(pcoHandoverModel.pcoModels[0].quantity * pcoHandoverModel.pcoModels[0].weight).toWeight()}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Reject Quantity : ${pcoHandoverModel.pcoModels[0].rejectQuantity}",
                          style: Theme.of(context).textTheme.labelMedium),
                      Text(
                          "Reject Weight : ${pcoHandoverModel.pcoModels[0].rejectWeights!.toWeight()}",
                          style: Theme.of(context).textTheme.labelMedium),
                    ],
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter