save_points_screen_builder 1.0.3

A modular, configuration-driven screen generator for common Flutter application flows with Material 3 support.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:save_points_screen_builder/save_points_screen_builder.dart';
import 'package:save_points_screen_builder_example/screens/splash_example.dart';
import 'package:save_points_screen_builder_example/screens/onboarding_example.dart';
import 'package:save_points_screen_builder_example/screens/welcome_example.dart';
import 'package:save_points_screen_builder_example/screens/sign_in_example.dart';
import 'package:save_points_screen_builder_example/screens/sign_up_example.dart';
import 'package:save_points_screen_builder_example/screens/otp_example.dart';
import 'package:save_points_screen_builder_example/screens/forgot_password_example.dart';
import 'package:save_points_screen_builder_example/screens/edit_profile_example.dart';
import 'package:save_points_screen_builder_example/screens/product_list_example.dart';
import 'package:save_points_screen_builder_example/screens/settings_example.dart';
import 'package:save_points_screen_builder_example/screens/profile_example.dart';
import 'package:save_points_screen_builder_example/screens/notifications_example.dart';
import 'package:save_points_screen_builder_example/screens/cart_example.dart';
import 'package:save_points_screen_builder_example/screens/success_example.dart';
import 'package:save_points_screen_builder_example/screens/error_example.dart';
import 'package:save_points_screen_builder_example/screens/dynamic_form_example.dart';
import 'package:save_points_screen_builder_example/screens/users_list_example.dart';
import 'package:save_points_screen_builder_example/screens/filter_example.dart';

void main() {
  runApp(const ScreenBuilderExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen Builder Examples',
      debugShowCheckedModeBanner: false,
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      home: const ExampleListScreen(),
    );
  }
}

final customConfig = ScreenBuilderConfig(
  theme: AppTheme.darkTheme,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
  ),
);

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

  @override
  Widget build(BuildContext context) {
    final examples = [
      ExampleItem(
        title: 'Splash Screen',
        subtitle: 'App initialization screen',
        icon: Icons.water_drop,
        category: 'Static Screens',
        color: const Color(0xFF0066FF),
        builder: (context) => const SplashExample(),
      ),
      ExampleItem(
        title: 'Onboarding Screen',
        subtitle: 'Multi-page onboarding flow',
        icon: Icons.collections_bookmark,
        category: 'Static Screens',
        color: const Color(0xFF6750A4),
        builder: (context) => const OnboardingExample(),
      ),
      ExampleItem(
        title: 'Welcome Screen',
        subtitle: 'Welcome with action buttons',
        icon: Icons.waving_hand,
        category: 'Static Screens',
        color: const Color(0xFF00897B),
        builder: (context) => const WelcomeExample(),
      ),
      ExampleItem(
        title: 'Success Screen',
        subtitle: 'Success confirmation message',
        icon: Icons.check_circle,
        category: 'Static Screens',
        color: const Color(0xFF28A745),
        builder: (context) => const SuccessExample(),
      ),
      ExampleItem(
        title: 'Error Screen',
        subtitle: 'Error message with retry',
        icon: Icons.error,
        category: 'Static Screens',
        color: const Color(0xFFDC3545),
        builder: (context) => const ErrorExample(),
      ),
      ExampleItem(
        title: 'Sign In Screen',
        subtitle: 'Email and password login',
        icon: Icons.login,
        category: 'Form Screens',
        color: const Color(0xFF0066FF),
        builder: (context) => const SignInExample(),
      ),
      ExampleItem(
        title: 'Sign Up Screen',
        subtitle: 'User registration form',
        icon: Icons.person_add,
        category: 'Form Screens',
        color: const Color(0xFF6750A4),
        builder: (context) => const SignUpExample(),
      ),
      ExampleItem(
        title: 'OTP Screen',
        subtitle: 'Verification code input',
        icon: Icons.pin,
        category: 'Form Screens',
        color: const Color(0xFF00897B),
        builder: (context) => const OTPExample(),
      ),
      ExampleItem(
        title: 'Forgot Password',
        subtitle: 'Password reset request',
        icon: Icons.lock_reset,
        category: 'Form Screens',
        color: const Color(0xFFE91E63),
        builder: (context) => const ForgotPasswordExample(),
      ),
      ExampleItem(
        title: 'Edit Profile',
        subtitle: 'Edit user profile form',
        icon: Icons.edit,
        category: 'Form Screens',
        color: const Color(0xFFFF9800),
        builder: (context) => const EditProfileExample(),
      ),
      ExampleItem(
        title: 'Product List',
        subtitle: 'Grid of products with filters',
        icon: Icons.shopping_bag,
        category: 'List Screens',
        color: const Color(0xFF0066FF),
        builder: (context) => const ProductListExample(),
      ),
      ExampleItem(
        title: 'Users List',
        subtitle: 'Dynamic list of users',
        icon: Icons.people,
        category: 'List Screens',
        color: const Color(0xFFE91E63),
        builder: (context) => const UsersListExample(),
      ),
      // ExampleItem(
      //   title: 'Users List',
      //   subtitle: 'List of users with actions',
      //   icon: Icons.people,
      //   category: 'List Screens',
      //   color: const Color(0xFFE91E63),
      //   builder: (context) => const UsersListExample(),
      // ),
      ExampleItem(
        title: 'Settings Screen',
        subtitle: 'App settings and preferences',
        icon: Icons.settings,
        category: 'List Screens',
        color: const Color(0xFF6750A4),
        builder: (context) => const SettingsExample(),
      ),
      ExampleItem(
        title: 'Profile Screen',
        subtitle: 'User profile with stats',
        icon: Icons.person,
        category: 'List Screens',
        color: const Color(0xFF00897B),
        builder: (context) => const ProfileExample(),
      ),
      ExampleItem(
        title: 'Notifications',
        subtitle: 'Notification list with types',
        icon: Icons.notifications,
        category: 'List Screens',
        color: const Color(0xFFE91E63),
        builder: (context) => const NotificationsExample(),
      ),
      ExampleItem(
        title: 'Shopping Cart',
        subtitle: 'Cart with item management',
        icon: Icons.shopping_cart,
        category: 'List Screens',
        color: const Color(0xFFFF9800),
        builder: (context) => const CartExample(),
      ),
      ExampleItem(
        title: 'Dynamic Form',
        subtitle: 'Runtime generated form',
        icon: Icons.dynamic_form,
        category: 'Form Screens',
        color: const Color(0xFF9C27B0),
        builder: (context) => const DynamicFormExample(),
      ),
      ExampleItem(
        title: 'Filter System',
        subtitle: 'Advanced filtering with multiple types',
        icon: Icons.filter_list,
        category: 'List Screens',
        color: const Color(0xFF3F51B5),
        builder: (context) => const FilterExample(),
      ),
    ];

    final groupedExamples = <String, List<ExampleItem>>{};
    for (final example in examples) {
      groupedExamples.putIfAbsent(example.category, () => []).add(example);
    }

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar.large(
            title: const Text('Screen Builder'),
            centerTitle: false,
            floating: true,
            snap: true,
            actions: [
              IconButton(
                icon: const Icon(Icons.info_outline),
                onPressed: () {
                  showAboutDialog(
                    context: context,
                    applicationName: 'Screen Builder',
                    applicationVersion: '1.0.3',
                    applicationLegalese:
                        'A modern Flutter screen builder library',
                  );
                },
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 8, 20, 16),
              child: Text(
                'Explore beautiful, production-ready screens built with minimal code',
                style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                      color: Theme.of(context).colorScheme.onSurfaceVariant,
                    ),
              ),
            ),
          ),
          ...groupedExamples.entries.map((entry) {
            return SliverMainAxisGroup(
              slivers: [
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(20, 16, 20, 12),
                    child: Row(
                      children: [
                        Container(
                          width: 4,
                          height: 24,
                          decoration: BoxDecoration(
                            color: Theme.of(context).colorScheme.primary,
                            borderRadius: BorderRadius.circular(2),
                          ),
                        ),
                        const SizedBox(width: 12),
                        Text(
                          entry.key,
                          style:
                              Theme.of(context).textTheme.titleLarge?.copyWith(
                                    fontWeight: FontWeight.bold,
                                  ),
                        ),
                        const SizedBox(width: 8),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 8,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color:
                                Theme.of(context).colorScheme.primaryContainer,
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Text(
                            '${entry.value.length}',
                            style: Theme.of(context)
                                .textTheme
                                .labelSmall
                                ?.copyWith(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onPrimaryContainer,
                                  fontWeight: FontWeight.bold,
                                ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SliverPadding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  sliver: SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        final example = entry.value[index];
                        return _ExampleCard(
                          example: example,
                          onTap: () {
                            Navigator.push<void>(
                              context,
                              MaterialPageRoute<void>(
                                builder: example.builder,
                              ),
                            );
                          },
                        );
                      },
                      childCount: entry.value.length,
                    ),
                  ),
                ),
              ],
            );
          }),
          const SliverToBoxAdapter(
            child: SizedBox(height: 32),
          ),
        ],
      ),
    );
  }
}

class _ExampleCard extends StatelessWidget {
  final ExampleItem example;
  final VoidCallback onTap;

  const _ExampleCard({
    required this.example,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(12),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              Container(
                width: 56,
                height: 56,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      example.color,
                      example.color.withValues(alpha: 0.7),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(
                  example.icon,
                  color: Colors.white,
                  size: 28,
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      example.title,
                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
                            fontWeight: FontWeight.w600,
                          ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      example.subtitle,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            color:
                                Theme.of(context).colorScheme.onSurfaceVariant,
                          ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 8),
              Container(
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.surfaceContainerHighest,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.arrow_forward_ios,
                  size: 14,
                  color: Theme.of(context).colorScheme.onSurfaceVariant,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ExampleItem {
  final String title;
  final String subtitle;
  final IconData icon;
  final String category;
  final Color color;
  final Widget Function(BuildContext) builder;

  const ExampleItem({
    required this.title,
    required this.subtitle,
    required this.icon,
    required this.category,
    required this.color,
    required this.builder,
  });
}