s_design 0.3.0

Schrift SDesign UI component library of Flutter, responsive and suitable for use in mobile projects.

✨ sDesign

A comprehensive Flutter UI component library offering customizable widgets to build consistent and professional user interfaces.

🎖 Installing

dependencies:
  s_design: ^0.3.0

⚡️ Import

import 'package:s_design/s_design.dart';

🎮 How To Use

Here are some examples to get started:

Example: Using SButton

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('sDesign Example'),
        ),
        body: Center(
          child: SButton(
            onPressed: () {
              print('Button Pressed');
            },
            label: 'Click Me',
            variant: SButtonVariant.primary,
          ),
        ),
      ),
    );
  }
}

Example: Using Sonner and Toaster

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myOverlays = [
      OverlayEntry(
        builder: (overlayContext) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            final overlay = Overlay.of(overlayContext);

            SSonner.instance.initialize(overlay);

            /// You can initialize other instance here as well
            SToast.initialize(overlay);
          });
          return const SizedBox.shrink();
        },
      ),
      // You could add more overlay entries here, if needed:
      // OverlayEntry(builder: ...),
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('sDesign Example'),
        ),
      builder: sOverlayBuilder(overlays: myOverlays),
        home:  body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              // Success Sonner Button
              SButton(
                onPressed: () {
                  // Show a success Sonner
                  SSonner.instance.show(
                    message: 'The operation was successful!',
                    type: SSonnerType.success,
                  );
                },
                child: const Text('Show Success Sonner'),
              ),
              const SizedBox(height: 20),
            SButton(
                onPressed: () {
                  // Show a Default Toast
                  SToast.show(
                    title: 'Default!',
                    description: 'This is a default toast.',
                  );
                },
                child: const Text('Show Default Toast'),
              ),
            ],
          ),
        ),
      ),

      ),
    );
  }
}

Example: Displaying a Success Modal

SModal.showSuccess(
  context,
  message: 'Operation completed successfully!',
  actions: [
    SButton(
      onPressed: () => Navigator.pop(context),
      label: 'OK',
      variant: SButtonVariant.primary,
    ),
  ],
);

For more usage examples, refer to the example folder in the repository.

🚀 Showcase

Sample view

SButton

SModal

SCard

🐛 Bugs/Requests

If you encounter any problems, feel free to open an issue. If you think a feature is missing, please raise a ticket on GitHub, and we'll look into it. Pull requests are also welcome.

❗️ Note

For help getting started with Flutter, check the Flutter documentation.

☀️ Authors

⭐️ License

MIT License