smart_dev_widgets 0.0.6

A collection of reusable Flutter widgets for common UI components by SmartDev.

SmartDevWidgets

A collection of reusable, customizable Flutter widgets designed to simplify and accelerate UI development. Built by SmartDev, this package provides battle-tested widgets for common UI components with consistent styling, responsive design, and global configuration support.

---

✨ Features

Widget	Description
SmartColumn	Column with native spacing, padding, tap handling, SafeArea, and Expanded support
SmartRow	Row with native spacing, alignment, decoration, and tap handling
SmartText	Text / AutoSizeText with color, weight, padding, and Expanded/Flexible support
SmartTextField	Fully customizable text field with password toggle, search variant, and built-in error states
SmartButton	Full-featured button with bounce animation, loading state, prefix/suffix icons, white variant
SmartCheckbox	Checkbox and radial variants with custom color and label styling
SmartRadioButton	Customizable radio button with toggling support
SmartDropDown	Modal bottom sheet dropdown with search filtering and custom items
SmartSingleChildScrollView	Scroll view with pull-to-refresh, keyboard dismiss, and ClampingScrollPhysics default
SmartImage	Universal image viewer (asset, file, SVG, network, Lottie) with 4 animated loading styles
SmartExpansionTile	Animated expansion tile with custom icons and PageStorage control
SmartTabBar	Self-contained TabBar with views, page control, and custom indicators
SmartAppBar	Highly customizable AppBar with leading/action icons and skip mode
SmartCommonAppBar	Streamlined AppBar with profile headers and simplified back/close states
SmartStepper	Animated vertical stepper with dashed lines and state-based icons
SmartCircularProgressIndicator	Configurable circular progress indicator
SmartNoDataFound	Unified empty state widget with image, messaging, and retry actions
SmartImagePickDialogSheet	Elegant custom bottom sheet for Camera / Gallery source selection
SmartDashedDivider & Gradient	Decorative dashed dividers and gradient fade lines
SmartDevWidgetsConfig	Singleton for setting global defaults across all widgets

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  smart_dev_widgets: ^0.0.6

Run:

flutter pub get

Peer dependencies

These are included automatically but listed here for reference:

dependencies:
  flutter_screenutil: ^5.9.3
  auto_size_text: ^3.0.0
  cached_network_image: ^3.4.1
  flutter_svg: ^2.2.4
  shimmer: ^3.0.0
  lottie: ^3.3.3

Requires Flutter ≥ 3.27.0 for native Column.spacing / Row.spacing support.

---

⚙️ Setup

Initialize SmartDevWidgetsConfig once in main() and wrap your app with ScreenUtilInit:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_dev_widgets/smart_dev_widgets.dart';

void main() {
  SmartDevWidgetsConfig().initialize(
    // SmartColumn defaults
    columnSpacing: 8.0,
    columnCrossAxisAlignment: CrossAxisAlignment.start,
    // SmartText defaults
    textStyle: TextStyle(fontSize: 14, color: Colors.black87),
    // SmartButton defaults
    buttonActiveBackgroundColor: Colors.blue,
    buttonHeight: 48.0,
    // SmartImage defaults
    imageHeight: 100.0,
    imageWidth: 100.0,
    imageLoadingAnimationType: LoadingAnimationType.shimmer,
    // ... (see full Config Reference below)
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      builder: (context, child) => MaterialApp(home: child),
      child: const HomePage(),
    );
  }
}

---

🧩 Widget Usage

SmartColumn

A Column with built-in native spacing, padding, margin, tap handling, and SafeArea.

SmartColumn(
  spacing: 12.0,           // native Column.spacing (no manual SizedBox needed)
  padding: EdgeInsets.all(16),
  crossAxisAlignment: CrossAxisAlignment.start,
  isSafeArea: true,
  onTap: () => print('tapped'),
  isInkwell: true,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

---

SmartRow

A Row with native spacing, alignment, decoration, and tap handling.

SmartRow(
  spacing: 8.0,            // native Row.spacing (Flutter 3.27+)
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  alignment: Alignment.center,
  padding: EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  children: [
    Icon(Icons.star),
    Text('Rating'),
    Text('4.5'),
  ],
)

---

SmartText

Enhanced Text or AutoSizeText with color/weight overrides, optional padding, and layout helpers.

SmartText(
  'Hello World',
  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
  color: Colors.blue,
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
  optionalPadding: EdgeInsets.symmetric(vertical: 4),
  isAutoSizeText: true,
  onTap: () => print('text tapped'),
)

// Inside a Row — use expanded or flexible
SmartText('Label', expanded: true)
SmartText('Value', flexible: true, flex: 2)

---

SmartButton

Full-featured button with bounce animation, loading state, prefix/suffix image support.

// Default button
SmartButton(
  title: 'Submit',
  onTap: () => print('submitted'),
  isLoading: false,
  isEnabled: true,
  activeBackgroundColor: Colors.blue,
  prefixImage: 'assets/icons/send.svg',
  height: 52.0,
  borderRadius: BorderRadius.circular(12),
)

// White outlined variant
SmartButton.white(
  title: 'Cancel',
  onTap: () {},
  borderColor: Colors.blue,
)

Parameters:

Parameter	Type	Description
title	String	Button label
onTap	VoidCallback	Tap callback
isLoading	bool	Shows SmartCircularProgressIndicator
isEnabled	bool	Disables tap and applies disable style
isShadow	bool	Adds colored drop shadow
isWhite	bool	White background with colored border
prefixImage	String?	Path to prefix icon (any SmartImage type)
suffixImage	String?	Path to suffix icon
height / width	double?	Button dimensions
activeBackgroundColor	Color?	Active state background
disableBackgroundColor	Color?	Disabled state background
borderRadius	BorderRadiusGeometry?	Corner radius
titleStyle	TextStyle?	Active title style (merged with config)
boxShadow	BoxShadow?	Custom shadow

---

SmartSingleChildScrollView

Scroll view with pull-to-refresh, automatic keyboard dismiss, and SafeArea support.

SmartSingleChildScrollView(
  safeArea: true,
  padding: EdgeInsets.all(16),
  onRefresh: () async {
    await loadData();
  },
  child: Column(
    children: [...],
  ),
)

---

SmartImage

Universal image loader — supports assets, files, network, SVG, and Lottie with 4 animated loading styles.

// Asset image
SmartImage(path: 'assets/images/banner.png', width: 200, height: 120)

// Network image with shimmer loading
SmartImage(
  path: 'https://example.com/photo.jpg',
  size: 80,                     // sets both height & width
  imageBorderRadius: BorderRadius.circular(40),
  animationType: LoadingAnimationType.shimmer,
  showLoadingAnimation: true,
  onTap: () => openPhoto(),
)

// SVG (auto-detected by .svg extension)
SmartImage(path: 'assets/icons/logo.svg', color: Colors.white)

// Network SVG
SmartImage(path: 'https://example.com/icon.svg', size: 32)

// Lottie animation (auto-detected by .json extension)
SmartImage(path: 'assets/animations/success.json', size: 120)

// Custom decoration
SmartImage(
  path: 'https://example.com/cover.jpg',
  height: 200,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    boxShadow: [BoxShadow(blurRadius: 8, color: Colors.black26)],
  ),
  fit: BoxFit.cover,
)

New parameters in v0.0.4:

Parameter	Type	Default	Description
size	double?	–	Shortcut: sets both height and width
clipBehavior	Clip	Clip.none	Container clip behavior
decoration	Decoration?	–	Overrides default BoxDecoration
alignment	AlignmentGeometry?	–	Child alignment within container
animationType	LoadingAnimationType	shimmer	Shimmer / pulse / skeleton / wave
showLoadingAnimation	bool	true	Toggle animated vs. static placeholder

Loading animation types:

Type	Description
shimmer	Horizontal shimmer sweep (default)
pulse	Fade in/out pulsing effect
skeleton	Card-shaped skeleton blocks
wave	Diagonal gradient wave

---

SmartExpansionTile

Animated expand/collapse tile with configurable trailing icons and PageStorage control.

SmartExpansionTile(
  title: SmartText('FAQ Item', style: TextStyle(fontWeight: FontWeight.w600)),
  initiallyExpanded: false,
  isDisablePageStorage: true,   // always starts collapsed (no state persistence)
  trailingCollapsedIconVisible: true,
  onExpansionChanged: (expanded) => print('expanded: $expanded'),
  children: [
    Padding(
      padding: EdgeInsets.all(12),
      child: SmartText('Answer content here...'),
    ),
  ],
)

New in v0.0.4:

Parameter	Type	Default	Description
isDisablePageStorage	bool	false	Disables PageStorage — tile always uses initiallyExpanded

---

SmartCircularProgressIndicator

Configurable circular progress indicator — used internally by SmartButton.

SmartCircularProgressIndicator(
  size: 32,
  color: Colors.white,
  strokeWidth: 3,
  padding: EdgeInsets.all(8),
)

---

🛠 Global Configuration

SmartDevWidgetsConfig is a singleton — call initialize() once at startup.

Full Config Reference

SmartDevWidgetsConfig().initialize(
  // ── SmartColumn ─────────────────────────────────────────────
  columnMainAxisAlignment: MainAxisAlignment.start,
  columnCrossAxisAlignment: CrossAxisAlignment.center,
  columnSpacing: 0,
  columnPadding: null,
  columnMargin: null,
  columnIsInkwell: false,
  columnIsSafeArea: false,
  columnDecoration: null,

  // ── SmartRow ─────────────────────────────────────────────────
  rowMainAxisAlignment: MainAxisAlignment.start,
  rowCrossAxisAlignment: CrossAxisAlignment.center,
  rowSpacing: 0,                    // new in 0.0.4
  rowPadding: null,
  rowMargin: null,
  rowDecoration: null,

  // ── SmartText ────────────────────────────────────────────────
  textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
  textColor: null,
  textFontWeight: null,
  textOptionalPadding: null,        // renamed from textOptionalPaddings
  textOverflow: null,
  textAlign: null,
  textMaxLines: null,
  textIsAutoSizeText: false,

  // ── SmartButton ──────────────────────────────────────────────
  buttonHeight: 48.0,
  buttonActiveBackgroundColor: Colors.blue,
  buttonDisableBackgroundColor: Colors.grey,
  buttonBorderRadius: BorderRadius.circular(8),
  buttonTitleStyle: TextStyle(fontSize: 16, color: Colors.white),
  buttonIsShadow: false,
  buttonIsWhite: false,
  buttonImageSize: 24.0,

  // ── SmartSingleChildScrollView ───────────────────────────────
  scrollViewSafeArea: false,
  scrollViewPadding: null,
  scrollViewKeyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,

  // ── SmartImage ───────────────────────────────────────────────
  imageHeight: 100.0,
  imageWidth: 100.0,
  imageFit: BoxFit.cover,
  imagePlaceholderPath: 'assets/images/placeholder.png',
  imageLoadingColor: Colors.blue,
  imageLoadingAnimationType: LoadingAnimationType.shimmer,  // new in 0.0.4
  imageShowLoadingAnimation: true,                          // new in 0.0.4
  imageShape: BoxShape.rectangle,
  imageIsMemCacheEnabled: true,

  // ── SmartExpansionTile ───────────────────────────────────────
  expansionTileAnimationDuration: Duration(milliseconds: 200),
  expansionTileAnimationCurve: Curves.easeInOut,
  expansionTileTrailingExpandedIconPath: 'assets/images/arrow_up.svg',
  expansionTileTrailingCollapsedIconPath: 'assets/images/arrow_down.svg',
  expansionTileTrailingCollapsedIconVisible: true,
  expansionTileUsePageStorage: true,

  // ── SmartTextField ──────────────────────────────────────────
  textFieldStyle: TextStyle(fontSize: 14, color: Colors.black87),
  textFieldHintStyle: TextStyle(fontSize: 14, color: Colors.grey),
  textFieldLabelStyle: TextStyle(fontSize: 12, color: Colors.grey),
  textFieldErrorStyle: TextStyle(fontSize: 12, color: Colors.red),
  textFieldFillColor: Color(0xFFF5F5F5),
  textFieldEnabledBorderColor: Color(0xFFDDDDDD),
  textFieldFocusedBorderColor: Colors.blue,
  textFieldDisabledBorderColor: Color(0xFFEEEEEE),
  textFieldErrorBorderColor: Colors.red,
  textFieldCursorColor: Colors.black87,

  // ── SmartCheckbox ───────────────────────────────────────────
  checkboxActiveColor: Colors.blue,
  checkboxCheckColor: Colors.white,
  checkboxBorderColor: Colors.grey,
  checkboxLabelStyle: TextStyle(fontSize: 14, color: Colors.black87),

  // ── SmartRadioButton ────────────────────────────────────────
  radioButtonActiveColor: Colors.blue,
  radioButtonInactiveColor: Colors.grey,
  radioButtonTextStyle: TextStyle(fontSize: 14, color: Colors.black87),

  // ── SmartDropDown ───────────────────────────────────────────
  dropdownBackgroundColor: Colors.white,

  // ── SmartAppBar / SmartCommonAppBar ─────────────────────────
  appBarBackgroundColor: Colors.white,
  appBarTitleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.black87),

  // ── SmartStepper ────────────────────────────────────────────
  stepperActiveColor: Colors.blue,
  stepperCompletedColor: Colors.green,
  stepperUpcomingColor: Colors.grey,

  // ── SmartTabBar ─────────────────────────────────────────────
  tabBarDividerColor: null,
  tabBarUnselectedLabelColor: null,
  tabBarLabelStyle: null,
  tabBarUnselectedLabelStyle: null,

  // ── SmartNoDataFound ────────────────────────────────────────
  noDataFoundImagePath: 'assets/images/placeholder.png',
  noDataFoundText: 'No data found',
  noDataFoundRetryText: 'Retry',
);

---

🗂 Asset Setup

Add image assets to your app's pubspec.yaml:

flutter:
  assets:
    - assets/images/
    - assets/icons/
    - assets/animations/   # for Lottie .json files

---

🧪 Testing

cd smart_dev_widgets
flutter test

---

📋 Changelog

See CHANGELOG.md for full version history.

---

🐛 Issues

Report bugs or request features on the GitHub Issues page.

---

📄 License

MIT License — see LICENSE for details.

---

📬 Contact

For support: [e-mail]

---

Built with ❤️ by SmartDev