Fluxy
E-Commerce Example

State & Architecture

Core state management, routing, and repository logic.

State & Architecture

The following code handles the core state management, theming, routing, and repository patterns using Fluxy's built-in FluxController and FluxRepository.

Theme Configuration (lib/core/theme/app_theme.dart)

import 'package:flutter/material.dart';

class AppTheme {
  static ThemeData get light => ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light),
    scaffoldBackgroundColor: Colors.grey.shade50,
  );

  static ThemeData get dark => ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
    scaffoldBackgroundColor: const Color(0xFF121212),
  );
}

Home Controller (lib/features/home/home.controller.dart)

This controller manages the reactive state for the entire application, including cart, wishlist, products, and user preferences.

import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';

class Product {
  final String id;
  final String name;
  final double price;
  final String imageUrl;
  final String category;

  Product({required this.id, required this.name, required this.price, required this.imageUrl, required this.category});
}

class HomeController extends FluxController {
  final products = flux<List<Product>>([
    Product(id: '1', name: 'Premium Leather Bag', price: 120.0, imageUrl: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=500&q=80', category: 'Fashion'),
    Product(id: '2', name: 'Wireless Headphones', price: 299.99, imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&q=80', category: 'Electronics'),
    Product(id: '3', name: 'Smart Watch', price: 199.50, imageUrl: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&q=80', category: 'Electronics'),
    Product(id: '4', name: 'Minimalist Desk Lamp', price: 89.0, imageUrl: 'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=500&q=80', category: 'Home'),
  ]);

  final cart = flux<List<Product>>([]);
  final wishlist = flux<List<String>>([]);
  
  final searchQuery = flux<String>('');
  final selectedCategory = flux<String>('All');
  
  final categories = ['All', 'Fashion', 'Electronics', 'Home'];

  // User Profile State
  final userName = flux<String>('Sarah Jenkins');
  final userEmail = flux<String>('sarah.j@fluxyshop.com');
  final userAvatar = flux<String>('https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&q=80');
  final ordersCount = flux<int>(12);
  final points = flux<int>(450);
  final isDarkMode = flux<bool>(false);
  final notificationsEnabled = flux<bool>(true);
  final language = flux<String>('English');

  final currentNavIndex = flux<int>(0);

  // Reactive Design Tokens
  Color get surface => isDarkMode.value ? const Color(0xFF1E1E1E) : Colors.white;
  Color get text => isDarkMode.value ? Colors.white : Colors.black87;
  Color get textMuted => isDarkMode.value ? Colors.grey.shade400 : Colors.black54;

  void changeNavIndex(int index) {
    currentNavIndex.value = index;
  }

  void addToCart(Product p) {
    cart.value = [...cart.value, p];
  }

  void removeFromCart(Product p) {
    final newList = List<Product>.from(cart.value);
    final index = newList.indexWhere((item) => item.id == p.id);
    if (index != -1) {
      newList.removeAt(index);
      cart.value = newList;
    }
  }

  void toggleWishlist(Product p) {
    if (wishlist.value.contains(p.id)) {
      wishlist.value = wishlist.value.where((id) => id != p.id).toList();
    } else {
      wishlist.value = [...wishlist.value, p.id];
    }
  }

  late final cartTotal = fluxComputed(() => cart.value.fold(0.0, (sum, item) => sum + item.price));

  late final filteredProducts = fluxComputed(() {
    return products.value.where((p) {
      final matchesCategory = selectedCategory.value == 'All' || p.category == selectedCategory.value;
      final matchesSearch = p.name.toLowerCase().contains(searchQuery.value.toLowerCase());
      return matchesCategory && matchesSearch;
    }).toList();
  });
}

Home Repository (lib/features/home/home.repository.dart)

import 'package:fluxy/fluxy.dart';

class HomeRepository extends FluxRepository<String> {
  @override
  Future<String> fetchRemote() async {
    final response = await Fluxy.http.get('/data');
    return response.data['message'] ?? "Fluxy Engine Active";
  }

  @override
  Future<String> fetchLocal() async => "Offline Cache Ready";
  
  @override
  Future<void> saveLocal(String data) async {}
}

Routing Configuration (lib/features/home/home.routes.dart)

import 'package:fluxy/fluxy.dart';
import 'home.view.dart';
import 'home.controller.dart';

final homeRoutes = [
  FxRoute(
    path: '/home',
    controller: () => HomeController(),
    builder: (params, args) => const HomeView(),
  ),
];

Fluxy Registry (lib/core/registry/fluxy_registry.dart)

// THIS FILE IS AUTO-GENERATED BY THE FLUXY CLI.
// DO NOT EDIT MANUALLY.


void registerFluxyPlugins() {
  // No modular plugins detected in pubspec.yaml
}

On this page