Screen Components

​

Calculator Screens

​

ScreenOne (DiscountCalculatorScreen)

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

​

Features

• Discount Type Toggle: Switch between percentage and fixed-amount discounts
• Form Validation: Validates numeric inputs and ranges
• Persistent State: Restores previous inputs from the provider
• Real-time Calculations: Updates results as discount type changes
• Results Display: Shows original price, savings, subtotal, tax, and final price
• Clear Function: Reset button to clear all inputs and results

​

Form Fields

​

Usage

import 'package:numix/features/discount_calculator/screens/discount_calculator_screen.dart';

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenOne()),
);

​

UI Components

• Form validation with inline error messages
• Card-based layout with elevation
• Currency formatting ($XX.XX)
• Color-coded results (green for savings, red for tax)
• Responsive padding and spacing
• App bar with refresh action

​

ScreenTwo (SalesPriceCalculatorScreen)

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

​

Features

• Margin Type Toggle: Switch between markup (profit on cost) and margin (profit on sales)
• Form Validation: Validates cost and profit percentage inputs
• Persistent State: Automatically restores previous calculations
• Financial Summary: Displays base price, profit amount, tax, and final selling price
• Clear Function: Reset button to start a new calculation

​

Form Fields

​

Usage

import 'package:numix/features/sales_price_calculator/screens/sales_price_calculator_screen.dart';

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenTwo()),
);

​

Margin Type Display

• “Sobre Costo” (Markup): Profit calculated as percentage of cost
• “Sobre Venta (Pro)” (Margin): Profit calculated as percentage of selling price

​

Placeholder Screens

​

ScreenThree (ProductInventoryScreen)

class ScreenThree extends StatelessWidget {
  const ScreenThree({super.key});
}

​

Current Implementation

• Large inventory icon
• Welcome message
• “Return to Home” button

​

Usage

import 'package:numix/features/product_inventory/screens/product_inventory_screen.dart';

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenThree()),
);

​

ScreenFour (SalesHistoryScreen)

class ScreenFour extends StatelessWidget {
  const ScreenFour({super.key});
}

​

Current Implementation

• Large history icon
• Welcome message
• “Return to Home” button

​

Usage

import 'package:numix/features/sales_history/screens/sales_history_screen.dart';

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenFour()),
);

​

Navigation Screens

​

MyHomePage

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
}

​

Properties

​

Features

• Responsive Layout: Adapts button width based on screen size
• Smooth Animations: Scale animation on hover using MouseRegion
• Theme Toggle: Switch between light and dark mode
• Centered Title: Displays app name in the app bar
• Menu Buttons: Four large, accessible buttons for main features

​

Menu Items

1. Calculadora de Descuentos (Discount Calculator)
   • Icon: Icons.discount
   • Navigates to ScreenOne
2. Calculadora Precios Venta (Sales Price Calculator)
   • Icon: Icons.price_change
   • Navigates to ScreenTwo
3. Inventario de Productos (Product Inventory)
   • Icon: Icons.inventory
   • Navigates to ScreenThree
4. Historial de Ventas (Sales History)
   • Icon: Icons.history
   • Navigates to ScreenFour

​

Usage

import 'package:numix/features/home/screens/home_page.dart';

// In your main app or navigation
MaterialPageRoute(
  builder: (context) => const MyHomePage(title: 'Calculadora Numix'),
)

​

Button Styling

• Adaptive width: 70% on desktop (>600px), 90% on mobile
• Minimum height: 80px
• Rounded corners with 15px radius
• Elevation: 4
• Row layout with icon, text, and arrow

​

WelcomeScreen

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

​

Features

• Fade Animation: 2-second fade-in animation for the logo and text
• Auto Navigation: Automatically navigates to MyHomePage after 3 seconds
• Centered Layout: Logo and app name centered on screen
• Smooth Transition: Uses pushReplacement to prevent back navigation

​

Implementation Details

• Uses SingleTickerProviderStateMixin for animation controller
• Animation duration: 2 seconds
• Display duration: 3 seconds total
• Fade opacity: 0 to 1

​

Usage

import 'package:numix/features/welcome/screens/welcome_screen.dart';

// Typically set as the initial route
MaterialApp(
  home: const WelcomeScreen(),
)

​

UI Components

• Large calculator icon (100px, blue color)
• “¡Numix!” title text (32px, bold)
• 20px spacing between elements

​

Common Patterns

​

Form Validation

final _formKey = GlobalKey<FormState>();

void _calculateDiscount() {
  if (_formKey.currentState!.validate()) {
    // Perform calculation
  }
}

​

Text Input Formatting

inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}')),
]

• Allows digits 0-9
• Allows one optional decimal point
• Limits to 2 decimal places

​

Currency Formatting

String _formatCurrency(double value) {
  return '\$${value.toStringAsFixed(2)}';
}

​

Provider Integration

Consumer<DiscountCalculatorProvider>(
  builder: (context, provider, child) {
    if (provider.errorMessage != null) {
      // Show error
    }
    if (provider.finalPrice != null) {
      // Show results
    }
    return const SizedBox.shrink();
  },
)

​

State Restoration

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final provider = context.read<DiscountCalculatorProvider>();
    if (provider.originalPriceInput.isNotEmpty) {
      _controller.text = provider.originalPriceInput;
    }
  });
}

​

Screen Transitions

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenOne()),
);

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Calculadora Numix')),
);