sf-app-platform/modules/home/lib/src/presentation/wallet_item.dart

import 'dart:ui' as ui;

import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:home/src/presentation/deposit_screen.dart';
import 'package:home/src/presentation/kid_wallet_screen.dart';
import 'package:sf_shared/sf_shared.dart';


class WalletItem extends ConsumerWidget{
  final BuildContext context;
  final Kid kid;
  final int index;

  WalletItem(this.context, this.kid, this.index);

  @override
  Widget build(BuildContext context, WidgetRef ref){
    final theme = ref.watch(themePortProvider);

    return GestureDetector(
      onTap: ()=>{Navigator.push(context, MaterialPageRoute(builder: (_)=>KidWalletScreen(kid: kid)))},
      child: SizedBox(
        height: 227,
        width: 382,
        child: Stack(
          children: [
            SizedBox(height:227, width:382, child: CustomPaint(painter: WalletPainter(ref, index))),
            Column(
              children: [
                Container(
                  padding: EdgeInsets.only(left: 24, right: 24, top: 10, bottom: 0),
                  child: Column(
                    children: [
                      Align(
                        alignment: Alignment.topLeft,
                        child: Text(kid.name,
                          style: TextStyle(
                            fontWeight: FontWeight.w500,
                            fontSize: 30,
                            color: theme.getColorFor(ThemeCode.textSecondary),
                          )
                        )
                      ),
                      Row(
                        children: [
                          SizedBox(
                            height: 100,
                            child: Align(
                              alignment: Alignment.topLeft,
                              child: SizedBox(
                                height: 70,
                                width: 70,
                                child: SvgPicture.asset("assets/images/ui/face.svg"),
                              )
                            )
                          ),
                          Spacer(),
                          Column(children: [
                            MoneyText(
                              text: "${kid.balance}€",
                              size: 50,
                              secondarySize: 30,
                              color: theme.getColorFor(ThemeCode.textSecondary),
                              height: 0
                            ),
                            Text("en su hucha", style: TextStyle(fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary), height: 0)),
                            Text("Ahorrado ${kid.savings}€", style: TextStyle(fontSize: 14, color: theme.getColorFor(ThemeCode.textSecondary), height: 0))
                          ])
                        ]
                      ),
                    ],
                  ),
                ),
                Spacer(),
                Row(children: [
                  TextButton(
                    onPressed: ()=>showModalBottomSheet<void>(
                      context: context,
                      builder: (BuildContext context) => PhotoDialog()
                    ),
                    child: Row(
                      spacing: 8,
                      children: [
                        Icon(Icons.edit_outlined, size: 24, color: theme.getColorFor(ThemeCode.textSecondary)),
                        Text("Editar", style: TextStyle(fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary)))
                      ]
                    )
                  ),
                  Spacer(),
                  SizedBox(
                    width: 169,
                    height: 60,
                    child: PrimaryButton(
                      onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
                      text: "+ Añadir dinero",
                      color: theme.getColorFor(ThemeCode.buttonSecondary),
                      radius: 12,
                    )
                    /*FilledButton(
                      onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
                      style: ButtonStyle(
                        shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          )
                        ),
                        backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary)),
                        padding: WidgetStatePropertyAll(EdgeInsets.all(0))
                      ),
                      child: Center(
                        child: Text(
                          "+ Añadir dinero",
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w500
                          )
                        )
                      )
                    )*/
                  )
                ])
              ]
            )
          ]
        )
      )
  );
  }
}

class PhotoDialog extends ConsumerWidget{

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    return Container(
      height: 247,
      width: double.infinity,
      padding: EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: theme.getColorFor(ThemeCode.backgroundPrimary),
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(16), topLeft: Radius.circular(16)
        )
      ),
      child: Column(
        spacing: 24,
        children: [
          Column(
            spacing: 16,
            children: [
              PrimaryButton(
                onPressed: ()=>{},
                text: "Cámara",
                color: theme.getColorFor(ThemeCode.buttonPrimary)
              ),
              OutlinedButton(
                onPressed: () => {},
                child: Expanded(
                  child: Center(
                    child: Text(
                      "Galería de fotos",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                        color: theme.getColorFor(
                          ThemeCode.textPrimary)
                      )
                    )
                  )
                )
              )
            ]
          ),
          TextButton(
            onPressed: () => {Navigator.pop(context)},
            child: Text(
              "Cancelar",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                fontSize: 16
              )
            )
          )
        ],
      )
    );
  }
}

class WalletPainter extends CustomPainter {

  final WidgetRef ref;
  final int index;

  WalletPainter(this.ref, this.index);

  @override
  void paint(Canvas canvas, Size size) {
    final theme = ref.watch(themePortProvider);
    final gradient = theme.getCardColorFor(index);

    final brush = Paint()
      ..shader = ui.Gradient.linear(
          Offset(0, 0),
          Offset(size.width, size.height),
          gradient,
          List<double>.generate(gradient.length, (int index){
            return index/(gradient.length-1);
          })
      )
      ..strokeWidth = 3
      ..strokeCap = StrokeCap.round;

    final double radius = 20;
    final double buttonHeight = 60;
    final double buttonWidth = 169;

    final path = Path()
      ..moveTo(radius, 0)
      ..lineTo(size.width-radius, 0)
      ..arcToPoint(Offset(size.width, radius), radius: Radius.circular(radius))
      ..lineTo(size.width, size.height-buttonHeight-1.5*radius)
      ..arcToPoint(Offset(size.width-radius, size.height-buttonHeight-0.5*radius), radius: Radius.circular(radius))
      ..lineTo(size.width-buttonWidth+0.5*radius, size.height-buttonHeight-0.5*radius)
      ..arcToPoint(Offset(size.width-buttonWidth-0.5*radius, size.height-buttonHeight+0.5*radius), radius: Radius.circular(radius), clockwise: false)
      ..lineTo(size.width-buttonWidth-0.5*radius, size.height-radius)
      ..arcToPoint(Offset(size.width-buttonWidth-1.5*radius, size.height), radius: Radius.circular(radius))
      ..lineTo(radius, size.height)
      ..arcToPoint(Offset(0, size.height-radius), radius: Radius.circular(radius))
      ..lineTo(0, radius)
      ..arcToPoint(Offset(radius, 0), radius: Radius.circular(radius))
      ..close();

    canvas.drawPath(path, brush);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}