wallet_screen.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:easy_localization/easy_localization.dart';
 
import '../../core/ui/theme/color_palette.dart';
import '../../core/ui/widgets/custom_scaffold.dart';
 
class WalletScreen extends StatelessWidget {
  const WalletScreen({super.key});
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      title: "wallet.title".tr(),
      backgroundColor: ColorPalette.antiFlashWhite,
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.all(16.sp),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Balance Card
                  Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          ColorPalette.darkGreen.withValues(alpha:0.8),
                          ColorPalette.darkGreen.withValues(alpha:0.8),
                          // ColorPalette.darkGreen.withValues(alpha:0.8),
                        ],
                      ),
                      borderRadius: BorderRadius.circular(24),
                      boxShadow: [
                        BoxShadow(
                          color: ColorPalette.lightGreen.withValues(alpha:0.3),
                          blurRadius: 20,
                          offset: const Offset(0, 10),
                        ),
                      ],
                    ),
                    child: Stack(
                      children: [
                        // Background Pattern
                        Positioned(
                          right: -50.sp,
                          top: -50.sp,
                          child: Container(
                            width: 200.sp,
                            height: 200.sp,
                            decoration: BoxDecoration(
                              color: Colors.white.withValues(alpha:0.1),
                              shape: BoxShape.circle,
                            ),
                          ),
                        ),
                        // Content
                        Padding(
                          padding: EdgeInsets.all(24.sp),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                'wallet.total_balance'.tr(),
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w600,
                                  fontSize: 16,
                                ),
                              ),
                              SizedBox(height: 8.sp),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  const Text(
                                    '0',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 40,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(width: 8.sp),
                                  Padding(
                                    padding: EdgeInsets.only(bottom: 8.sp),
                                    child: Text(
                                      'wallet.currency'.tr(),
                                      style: TextStyle(
                                        color: Colors.white70,
                                        fontSize: 16,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(height: 10.sp),
                              Container(
                                padding: EdgeInsets.all(10.sp),
                                decoration: BoxDecoration(
                                  color: Colors.black.withValues(alpha:0.1),
                                  borderRadius: BorderRadius.circular(16),
                                ),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                                  children: [
                                    _TransactionSummaryItem(
                                      icon: Icons.arrow_upward,
                                      amount: '0',
                                      label: 'wallet.income'.tr(),
                                      isIncome: true,
                                    ),
                                    SizedBox(
                                      height: 40.sp,
                                      child: const VerticalDivider(
                                        color: Colors.white24,
                                        thickness: 1,
                                      ),
                                    ),
                                    _TransactionSummaryItem(
                                      icon: Icons.arrow_downward,
                                      amount: '0',
                                      label: 'wallet.expense'.tr(),
                                      isIncome: false,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 32),
                  // Recent Transactions Section
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'wallet.recent_transactions'.tr(),
                        style: TextStyle(
                          fontSize: 20.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      TextButton(
                        onPressed: () {},
                        child: Text('wallet.see_all'.tr()),
                      ),
                    ],
                  ),
                  SizedBox(height: 16.sp),
                  // Empty State
                  Container(
                    width: double.infinity,
                    padding: EdgeInsets.all(32.sp),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(24),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withValues(alpha:0.05),
                          blurRadius: 20,
                          offset: const Offset(0, 10),
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.all(16.sp),
                          decoration: BoxDecoration(
                            color: Colors.grey[100],
                            shape: BoxShape.circle,
                          ),
                          child: Icon(
                            Icons.receipt_long,
                            size: 32.sp,
                            color: Colors.grey[400],
                          ),
                        ),
                        SizedBox(height: 16.sp),
                        Text(
                          'wallet.no_transactions'.tr(),
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Colors.grey[600],
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(height: 8.sp),
                        Text(
                          'wallet.transactions_will_appear'.tr(),
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.grey[400],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
 
class _TransactionSummaryItem extends StatelessWidget {
  final IconData icon;
  final String amount;
  final String label;
  final bool isIncome;
 
  const _TransactionSummaryItem({
    required this.icon,
    required this.amount,
    required this.label,
    required this.isIncome,
  });
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(3.sp),
          decoration: BoxDecoration(
            color: isIncome ? ColorPalette.lightGreen.withValues(alpha:0.7) : ColorPalette.red.withValues(alpha:0.7),
            shape: BoxShape.circle,
          ),
          child: Icon(icon, color: ColorPalette.white, size: 18.sp),
        ),
        SizedBox(height: 5.sp),
        Row(
          children: [
            Text(
              isIncome ? '+' : '-',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              ' $amount ${isIncome ? 'wallet.currency'.tr() : 'wallet.currency'.tr()}',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        Text(
          label,
          style: TextStyle(
            color: Colors.white70,
            fontSize: 13.sp,
          ),
        ),
      ],
    );
  }
}