Webstore (Web App)
Feature: Home
Source code for the Home feature, including the cinematic hero and trending products.
Home Feature Source
The Home feature demonstrates high-fidelity web design using FxWeb.hero and the Supreme Video Modal.
import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';
import 'home.controller.dart';
import '../shared/web_layout.dart';
class HomeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final controller = Fluxy.find<HomeController>();
return WebLayout(
child: Fx.scroll(
child: FxWeb.container(
maxWidth: 1200,
child: Fx.col(
children: [
Fx.gap(100),
_buildHeroSection(context),
Fx.gap(100),
_buildTrendingSection(context, controller),
// ... footer
],
),
),
),
);
}
Widget _buildHeroSection(BuildContext context) {
return FxWeb.hero(
title: Fx.text('Define Your Framework.').tw('text-6xl font-black'),
subtitle: Fx.text('Discover premium minimalist aesthetics.').tw('text-xl text-slate-500'),
media: Fx.box(
onTap: () => _showVideo(context),
child: Fx.image('assets/hero.jpg', height: 550, radius: 32),
),
);
}
void _showVideo(BuildContext context) {
Fx.modal(
context,
child: Fx.video(
url: 'https://example.com/video.mp4',
autoPlay: true,
showControls: true,
),
);
}
}import 'package:fluxy/fluxy.dart';
class HomeController extends FluxController {
final isCartOpen = flux(false);
final isMobileMenuOpen = flux(false);
final cartItems = flux(<Map<String, dynamic>>[]);
final products = flux(<Map<String, dynamic>>[]);
final isLoading = flux(true);
@override
void onInit() async {
super.onInit();
// Fetch products...
isLoading.value = false;
}
void addToCart(Map<String, dynamic> product) {
cartItems.value = [...cartItems.value, product];
Fx.toast.success('${product['name']} added to cart');
}
void toggleCart() => isCartOpen.value = !isCartOpen.value;
void toggleMobileMenu() => isMobileMenuOpen.value = !isMobileMenuOpen.value;
}import 'package:fluxy/fluxy.dart';
import 'home.view.dart';
import 'home.controller.dart';
final homeRoutes = [
FxRoute(
path: '/',
builder: (context, args) => const HomeView(),
binding: () => Fluxy.put(HomeController()),
),
];