SmartUIComponents Widget

The SmartUIComponents A Flutter package for efficient UI state management, handling loading, empty views, content display, caching, and pull-to-refresh with customizable widgets.

Repo stars Last Commit Repo PRs Repo issues License

Table of Contents

Features

  • Displays loading indicator when data is being fetched.
  • Shows a custom or default empty screen when there is no data.
  • Wraps the main content in a pull-to-refresh functionality.

Installation

To use the MainScreen widget in your Flutter project, follow these steps:

  1. Add the following to your pubspec.yaml:
dependencies:
  main_widgets: <latest_version>
  1. to handle responsive
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // this very important
    MainWidgetsUtil.init(
      context,
      designSize: const Size(375, 812),
      minTextAdapt: true,
    );
    return MaterialApp(
      home: const HomeScreen(),
    );
  }
}

Widgets Usage

Here is an example demonstrating how to use these parameters in the MainScreen widget:

SmartScreen

    SmartScreen(
      isLoading: true, // Data is being loaded
      isEmpty: false, // Data is available
      child: YourMainContentWidget(), // Main content to display
      onRefresh: () async {
      // Logic for refreshing data
      },
      emptyWidget: CustomEmptyWidget(
        message: "No data available",
      ), // Optional empty widget
      message: "Please check back later.", // Optional message for empty state
    );

SmartCachedImages

  SmartCachedImages(
    imageUrl: 'https://example.com/image.jpg',
  ),

SmartEmptyWidget

  SmartEmptyWidget(
     message: 'The message of EmptyWidget',
  ),

SmartLoadingWidget

    const SmartLoadingWidget()
Example Code 
 SmartLoadingWidget(
    path: 'assets/animation.gif',
    loadingType: LoadingType.gif,
  )

  const SmartLoadingWidget(
    path: 'assets/animation1.json',
    loadingType: LoadingType.lottie,
  )

SmartTagWidget

  SmartTagWidget(
    text: 'Tag Text',
    backgroundColor: Colors.red,
    textColor: Colors.white,
  )

SmartStatusWidget

   const Card(
        child: SmartStatusWidget(
          text: '30%',
          backgroundColor: Colors.red,
          textColor: Colors.white,
            child: SizedBox(
            height: 200,
            width: 120,
              child: Column(
                children: [
                  SmartCachedImages(
                  imageUrl: '',
                  height: 120,
                  ),
                  Text('title'),
                  Text('subtitle'),
                ],
              ),
            ),
        ),
),

Functions Usage

Here is an example demonstrating how to use these parameters in the Functions :

ShowToast

Example Code 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return StyledToast(
      backgroundColor: Colors.red,
      textStyle: const TextStyle(
        color: Colors.black,
        fontSize: 16,
      ),
      locale: const Locale('en', 'US'),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: false,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('home'),
      ),
      body: Column(
        children: [
          TextButton(
            onPressed: () => showToastError(msg: 'show Toast Error'),
            child: const Text('show Toast Error'),
          ),
          TextButton(
            onPressed: () => showToastSuccess(msg: 'show Toast Success'),
            child: const Text('Show Toast Success'),
          ),
        ],
      ),
    );
  }
}

HexColor

Example Code 
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return StyledToast(
      backgroundColor: Colors.red,
      textStyle: const TextStyle(
        color: Colors.black,
        fontSize: 16,
      ),
      locale: const Locale('en', 'US'),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: false,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('home'),
      ),
      body: Column(
        children: [
          TextButton(
            onPressed: () => showToastError(msg: 'show Toast Error'),
            child: const Text('show Toast Error'),
          ),
          TextButton(
            onPressed: () => showToastSuccess(msg: 'show Toast Success'),
            child: const Text('Show Toast Success'),
          ),
        ],
      ),
    );
  }
}

Extensions Usage

Here is an example demonstrating how to use these parameters in the Extensions :

Extensions

  Text(
   context.isArabic? 'isArabic':'isEnglish',
    style: context.bodySmall.copyWith(
        color:context.isDark? Colors.white: Colors.black,
    ),
  ),

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

Made with contrib.rocks.

Libraries

main_widgets