sf-app-platform/lib/payments/view/screens/dashboard_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';
import 'package:sf_app_platform/payments/view/screens/kid_wallet_screen.dart';

import '../../domain/entities/kid.dart';
import '../../domain/ports/theme_port.dart';

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen>{

  int currentPageIndex = 0;

  final String name = "Juan";
  final double total = 100;
  final List<Kid> kids = [
    Kid(name:"Carlos", balance:25.47),
    Kid(name:"Ana", balance:25.47),
  ];
  late final double available = double.parse(kids.fold(total, (t, e) => t - e.balance).toStringAsFixed(2));

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      bottomNavigationBar: NavigationBar(

          onDestinationSelected: (int index) {
            setState(() {
              currentPageIndex = index;
            });
          },
          selectedIndex: currentPageIndex,
          destinations: [
            NavigationDestination(icon: Icon(Icons.home_outlined), label: "Inicio"),
            NavigationDestination(icon: Icon(Icons.person_outline_outlined), label: "Mi perfil"),
            NavigationDestination(icon: Icon(Icons.watch_outlined), label: "Movimientos"),
            NavigationDestination(icon: Icon(Icons.notifications_outlined), label: "Alertas"),
          ],),
      body: <Widget>[
        SingleChildScrollView( child: Container(
          margin: EdgeInsets.all(30),
          child: Column(
            children: [
              Text.rich(
                TextSpan(
                  text: 'Hola, ',
                  style: TextStyle(),
                  children: <TextSpan>[
                    TextSpan(text: name, style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
              walletsList(context, kids),
              TextButton(onPressed: ()=>{}, child: Text("+ Añdir otro peque", style: TextStyle(fontWeight: FontWeight.bold))),
              Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Text("Wallet", style: TextStyle(fontWeight: FontWeight.bold),),
                        Spacer(),
                        Text("$total€ total")
                      ]
                    ),
                    Stack(
                      children: [
                        LinearProgressIndicator(
                          value: available/total,
                          minHeight: 70,
                          borderRadius: BorderRadius.all(Radius.circular(16)),
                        ),
                        FractionallySizedBox(
                          widthFactor: available/total,
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 20),
                            child: Center(
                              child: Text(
                                "$available€",
                                style: TextStyle(color: Colors.white, fontSize: 20)
                              )
                            )
                          )
                        ),
                      ],
                    ),
                    Center(child: Text("Disponible"))
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
                margin: EdgeInsets.only(top: 10),
                child: Column(
                  children: [
                    Text("Ingresar dinero en el wallets", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                    Row(
                      children: [
                        Expanded(
                          child: TextField(
                            decoration: InputDecoration(labelText: "Cantidad", hintText: "0€", border: OutlineInputBorder()),
                            keyboardType: TextInputType.number,
                            inputFormatters: [
                              FilteringTextInputFormatter.digitsOnly
                            ]
                          )
                        ),
                        FilledButton(onPressed: ()=>{}, child: Text("Ingresar"))
                      ],
                    ),
                    Text("Máximo que puedes añadir: ${150 - total}€"),
                  ],
                ),
              )
            ]
          ),
        )),
        Expanded(
          child: Center(
              child: Text("Perfil")
          ),
        ),
        Expanded(
          child: Center(
              child: Text("Movimientos")
          ),
        ),
        Expanded(
          child: Center(
              child: Text("Alertas")
          ),
        )
      ][currentPageIndex],
    );
  }

  Widget walletsList(BuildContext context, List<Kid> kids) {
    final theme = context.read<ThemePort>();

    return Column(
      spacing: 20,
      children: List<Widget>.generate(kids.length, (int index) {
        return
        GestureDetector(
          onTap: ()=>{Navigator.push(context, MaterialPageRoute(builder: (_)=>KidWalletScreen(kid: kids[index])))},
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(16.0)),
            child: Container(
              padding: EdgeInsets.fromLTRB(20, 20, 20, 5),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: theme.getCardColorFor(index)
                )
              ),
              child: Column(
                children: [
                  Text(kids[index].name,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 25,
                      color: Colors.white
                    )
                  ),
                  Row(
                    spacing: 10,
                    children: [
                      SizedBox(
                        height: 60,
                        width: 60,
                        child: SvgPicture.asset("assets/images/ui/face.svg"),
                      ),
                      Spacer(),
                      Text.rich(
                        TextSpan(
                          text:kids[index].balance.toString(),
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25, color: Colors.white),
                          children: [
                            TextSpan(
                                text:"€\nen su hucha",
                                style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
                            ),
                          ]
                        )
                      )
                    ]
                  ),
                  Row(
                    children: [
                      TextButton(
                        onPressed: ()=>showDialog(
                          context: context,
                          builder: (BuildContext context) => Dialog(
                            child: Container(height: 100, width: double.infinity, child: Column(
                              children: [
                                FilledButton(onPressed: ()=>{}, child: Text("Cámara")),
                                OutlinedButton(onPressed: ()=>{}, child: Text("Galería de fotos"))
                              ],
                            )),
                          )
                        ),
                        child: Row(
                          spacing: 10,
                          children: [
                            Icon(Icons.edit, color: theme.getColorFor(ThemeCode.text_secondary)),
                            Text("Editar", style: TextStyle(color: theme.getColorFor(ThemeCode.text_secondary)))
                          ]
                        )
                      ),
                      Spacer(),
                      FilledButton(
                          onPressed: ()=>{},
                          style: ButtonStyle(
                          ),
                          child: Text("+ Añadir dinero")
                      )
                    ],
                  )
                ]
              ),
            )
          )
        );
      })
    );
  }
}