S Packages #

A comprehensive collection of 43 Flutter packages designed to accelerate development with reusable UI components, utilities, and tools. Built for modern Flutter applications with Material Design 3 support.

S Packages Example App

If you want to see a better GIF for each of these sub packages, then find their individual package in pub.dev (eg. search for s_button and you will see it in more detail and clearer).

NOTE: this s_packages package is the grouping of all of these, as a main repo

📦 What's Included #

This unified package brings together 43 carefully crafted packages organized into 11 categories:

🎨 UI Components (20 packages) #

bubble_label - Bubble-style labels for tags and badges
s_animated_tabs - Smooth animated tab bars
s_banner - Customizable notification banners
s_button - Advanced custom buttons
s_context_menu - Right-click context menus
s_disabled - Disabled state management
s_dropdown - Feature-rich dropdowns
s_error_widget - Beautiful error displays
s_expendable_menu - Expandable hierarchical menus
s_future_button - Async operation buttons
s_ink_button - Ink ripple effect buttons
s_liquid_pull_to_refresh - Liquid-style pull-to-refresh
s_maintenance_button - Maintenance mode buttons
s_modal - Modal dialog system
s_standby - Loading state widgets
s_toggle - Toggle switches
s_widgets - Widget collection
settings_item - Settings screen items
ticker_free_circular_progress_indicator - Ticker-free progress indicators

📋 Lists & Collections #

indexscroll_listview_builder - Index-scrollable lists
s_gridview - Enhanced grid views

✨ Animations #

s_bounceable - Bounceable interactions
s_glow - Glow effects
shaker - Shake animations
soundsliced_tween_animation_builder - Custom tween builders

🧭 Navigation #

pop_overlay - Overlay management
pop_this - Navigation utilities
s_sidebar - Sidebar navigation

🌐 Networking #

s_client - HTTP client utilities
s_connectivity - Connectivity monitoring

🔄 State Management #

signals_watch - Reactive signal watching
states_rebuilder_extended - Extended state management

⌨️ Input & Interaction #

keystroke_listener - Keyboard event handling

📐 Layout #

s_offstage - Conditional rendering utilities

📱 Platform Integration #

s_webview - WebView integration

🛠️ Utilities #

post_frame - Post-frame callbacks
s_screenshot - Screenshot capture
s_time - Time utilities
soundsliced_dart_extensions - Dart extensions

📅 Calendar #

week_calendar - Week-based calendars

🚀 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  s_packages: ^1.1.2

Then run:

flutter pub get

💡 Basic Usage #

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
      // Wrap your app with Modal builder
      builder: (context, child) => Modal.appBuilder(
        context,
        child,
        backgroundColor: Colors.black54,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('S Modal Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Modal.show(
              context: context,
              builder: (context) => Container(
                padding: EdgeInsets.all(24),
                child: Text('Hello from S Modal!'),
              ),
            );
          },
          child: Text('Show Modal'),
        ),
      ),
    );
  }
}

Example 2: Using S Button #

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

class ButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SButton(
          onPressed: () {
            print('Button pressed!');
          },
          child: Text('Custom Button'),
          backgroundColor: Colors.blue,
          borderRadius: 12,
          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        ),
      ),
    );
  }
}

Example 3: Using Keystroke Listener #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:keystroke_listener/keystroke_listener.dart';

class KeyboardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeystrokeListener(
      onKeyPressed: (KeyEvent event) {
        if (event is KeyDownEvent) {
          print('Key pressed: ${event.logicalKey.keyLabel}');
        }
      },
      child: Scaffold(
        appBar: AppBar(title: Text('Keystroke Listener')),
        body: Center(
          child: Text('Press any key'),
        ),
      ),
    );
  }
}

🎯 Advanced Usage #

Example 4: Combining Multiple Packages #

import 'package:flutter/material.dart';
import 'package:s_modal/s_modal.dart';
import 'package:s_connectivity/s_connectivity.dart';
import 'package:s_future_button/s_future_button.dart';

class AdvancedExample extends StatelessWidget {
  Future<void> _submitData() async {
    // Simulate API call
    await Future.delayed(Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Advanced Example')),
      body: Column(
        children: [
          // Connectivity monitoring
          SConnectivity(
            onConnected: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Connected to internet')),
              );
            },
            onDisconnected: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('No internet connection')),
              );
            },
            child: Container(),
          ),
          
          // Future button with loading state
          SFutureButton(
            onPressed: _submitData,
            builder: (context, isLoading) {
              return ElevatedButton(
                onPressed: isLoading ? null : null,
                child: isLoading
                    ? CircularProgressIndicator()
                    : Text('Submit'),
              );
            },
          ),
        ],
      ),
    );
  }
}

Example 5: Creating Animated UI #

import 'package:flutter/material.dart';
import 'package:s_bounceable/s_bounceable.dart';
import 'package:s_glow/s_glow.dart';
import 'package:shaker/shaker.dart';

class AnimatedUIExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animations')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Bounceable widget
            SBounceable(
              onTap: () => print('Bounced!'),
              child: Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text('Tap me!'),
              ),
            ),
            
            SizedBox(height: 24),
            
            // Glow effect
            SGlow(
              color: Colors.purple,
              child: Icon(Icons.star, size: 48),
            ),
            
            SizedBox(height: 24),
            
            // Shake animation
            Shaker(
              duration: Duration(milliseconds: 500),
              child: Text('Shake on error!'),
            ),
          ],
        ),
      ),
    );
  }
}

📱 Running the Example App #

This package includes a comprehensive example app showcasing all 43 packages:

cd example
flutter pub get
flutter run

The example app features:

🔍 Search functionality to find packages
📂 Category-based organization
🎨 Material Design 3 UI
🌓 Light and dark theme support
📱 Interactive demos for each package

🏗️ Project Structure #

s_packages/
├── lib/                          # Main library exports
├── example/                      # Example application
│   ├── assets/
│   │   └── example.gif          # Demo GIF
│   └── lib/
│       ├── main.dart            # App entry point
│       ├── models/              # Data models
│       ├── screens/             # UI screens
│       └── widgets/             # Reusable widgets
├── bubble_label/                # Individual packages...
├── s_modal/
├── s_button/
└── ... (41 more packages)

🛠️ Development #

Prerequisites #

Flutter SDK >=3.0.0
Dart SDK >=3.0.0

Running Tests #

flutter test

Code Analysis #

flutter analyze

Formatting #

dart format .

📚 Documentation #

Each package includes its own documentation. Visit the individual package directories for detailed API documentation and usage examples.

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links #

✨ Features #

✅ 43 production-ready packages
✅ Material Design 3 support
✅ Light and dark theme compatibility
✅ Cross-platform (iOS, Android, Web, Desktop)
✅ Comprehensive example app
✅ Extensive documentation
✅ Active maintenance
✅ MIT licensed

📊 Package Stats #

Total Packages: 43
Categories: 11
Example Demos: 43+
Minimum Flutter Version: 3.0.0
Minimum Dart Version: 3.0.0

🙏 Acknowledgments #

Developed and maintained by SoundSliced.

Made with ❤️ for the Flutter community

s_packages 1.1.2 s_packages: ^1.1.2 copied to clipboard

Metadata