Skip to main content

API Reference

Complete API documentation for all Appikorn Madix Widgets components.

Overview

This page provides comprehensive API documentation for all widgets in the Appikorn Madix Widgets library. Each widget includes detailed property descriptions, method signatures, and usage examples.

Core UI Components

TextAppi

A powerful text widget with advanced styling and accessibility features.

Constructor

TextAppi({
Key? key,
required String text,
TextStyle? style,
TextAlign? textAlign,
TextDirection? textDirection,
Locale? locale,
bool? softWrap,
TextOverflow? overflow,
double? textScaleFactor,
int? maxLines,
String? semanticsLabel,
TextWidthBasis? textWidthBasis,
TextHeightBehavior? textHeightBehavior,
Color? selectionColor,
bool isSelectable,
bool isResponsive,
Map<String, TextStyle>? responsiveStyles,
Gradient? gradient,
List<Shadow>? shadows,
double? letterSpacing,
double? wordSpacing,
TextBaseline? textBaseline,
double? height,
Paint? foreground,
Paint? background,
List<ui.FontFeature>? fontFeatures,
TextDecoration? decoration,
Color? decorationColor,
TextDecorationStyle? decorationStyle,
double? decorationThickness,
})

Properties

PropertyTypeDefaultDescription
textStringrequiredThe text to display
styleTextStyle?nullText styling options
textAlignTextAlign?nullHow to align the text horizontally
overflowTextOverflow?nullHow to handle text overflow
maxLinesint?nullMaximum number of lines
isSelectableboolfalseWhether text can be selected
isResponsiveboolfalseEnable responsive text sizing
gradientGradient?nullGradient effect for text
shadowsList<Shadow>?nullText shadow effects

Methods

// Get effective text style
TextStyle getEffectiveStyle(BuildContext context)

// Check if text is responsive
bool get isResponsiveEnabled

// Get responsive style for breakpoint
TextStyle? getResponsiveStyle(String breakpoint)

Example

TextAppi(
text: 'Hello World',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
isResponsive: true,
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
)

BoxAppi

A versatile container widget with advanced styling capabilities.

Constructor

BoxAppi({
Key? key,
Widget? child,
AlignmentGeometry? alignment,
EdgeInsetsGeometry? padding,
Color? color,
Decoration? decoration,
Decoration? foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
EdgeInsetsGeometry? margin,
Matrix4? transform,
AlignmentGeometry? transformAlignment,
Clip clipBehavior,
VoidCallback? onTap,
VoidCallback? onDoubleTap,
VoidCallback? onLongPress,
ValueChanged<bool>? onHover,
ValueChanged<bool>? onFocusChange,
bool autofocus,
FocusNode? focusNode,
bool canRequestFocus,
String? semanticLabel,
bool excludeFromSemantics,
// Custom BoxAppi properties
double? borderRadius,
Border? border,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape,
DecorationImage? image,
bool isInteractive,
Duration? animationDuration,
Curve? animationCurve,
double? elevation,
Color? shadowColor,
bool enableFeedback,
})

Properties

PropertyTypeDefaultDescription
childWidget?nullThe widget below this widget in the tree
colorColor?nullBackground color
widthdouble?nullWidth of the container
heightdouble?nullHeight of the container
paddingEdgeInsetsGeometry?nullInternal padding
marginEdgeInsetsGeometry?nullExternal margin
borderRadiusdouble?nullBorder radius for all corners
borderBorder?nullBorder decoration
boxShadowList<BoxShadow>?nullShadow effects
gradientGradient?nullGradient background
onTapVoidCallback?nullTap callback
isInteractiveboolfalseEnable interaction effects
elevationdouble?nullMaterial elevation

Methods

// Get effective decoration
Decoration? getEffectiveDecoration()

// Check if container is interactive
bool get hasInteraction

// Get animation duration
Duration get effectiveAnimationDuration

Example

BoxAppi(
width: 200,
height: 100,
color: Colors.blue,
borderRadius: 12,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 8,
offset: Offset(0, 2),
),
],
onTap: () => print('Tapped!'),
child: Center(
child: TextAppi(
text: 'Click Me',
style: TextStyle(color: Colors.white),
),
),
)

Form & Input Components

TextFieldAppi

An advanced text input field with validation and styling options.

Constructor

TextFieldAppi({
Key? key,
TextEditingController? controller,
String? initialValue,
FocusNode? focusNode,
InputDecoration? decoration,
TextInputType? keyboardType,
TextCapitalization textCapitalization,
TextInputAction? textInputAction,
TextStyle? style,
StrutStyle? strutStyle,
TextDirection? textDirection,
TextAlign textAlign,
TextAlignVertical? textAlignVertical,
bool autofocus,
bool readOnly,
bool? showCursor,
String obscuringCharacter,
bool obscureText,
bool autocorrect,
SmartDashesType? smartDashesType,
SmartQuotesType? smartQuotesType,
bool enableSuggestions,
int? maxLines,
int? minLines,
bool expands,
int? maxLength,
MaxLengthEnforcement? maxLengthEnforcement,
ValueChanged<String>? onChanged,
VoidCallback? onEditingComplete,
ValueChanged<String>? onSubmitted,
AppPrivateCommandCallback? onAppPrivateCommand,
List<TextInputFormatter>? inputFormatters,
bool? enabled,
double cursorWidth,
double? cursorHeight,
Radius? cursorRadius,
Color? cursorColor,
Brightness? keyboardAppearance,
EdgeInsets scrollPadding,
bool? enableInteractiveSelection,
TextSelectionControls? selectionControls,
DragStartBehavior dragStartBehavior,
GestureTapCallback? onTap,
MouseCursor? mouseCursor,
InputCounterWidgetBuilder? buildCounter,
ScrollController? scrollController,
ScrollPhysics? scrollPhysics,
Iterable<String>? autofillHints,
ContentInsertionConfiguration? contentInsertionConfiguration,
Clip clipBehavior,
String? restorationId,
bool scribbleEnabled,
bool enableIMEPersonalizedLearning,
// Custom TextFieldAppi properties
String? label,
String? hintText,
String? helperText,
String? errorText,
Widget? prefixIcon,
Widget? suffixIcon,
String? Function(String?)? validator,
bool isRequired,
bool showRequiredIndicator,
Color? borderColor,
Color? focusedBorderColor,
Color? errorBorderColor,
double? borderRadius,
double? borderWidth,
bool filled,
Color? fillColor,
EdgeInsetsGeometry? contentPadding,
bool isDense,
bool isCollapsed,
FloatingLabelBehavior? floatingLabelBehavior,
bool enableBorderAnimation,
Duration? animationDuration,
bool showCharacterCount,
TextStyle? labelStyle,
TextStyle? hintStyle,
TextStyle? helperStyle,
TextStyle? errorStyle,
})

Properties

PropertyTypeDefaultDescription
controllerTextEditingController?nullControls the text being edited
labelString?nullLabel text
hintTextString?nullPlaceholder text
validatorString? Function(String?)?nullValidation function
isRequiredboolfalseWhether field is required
keyboardTypeTextInputType?nullType of keyboard to show
obscureTextboolfalseWhether to hide text (for passwords)
maxLinesint?1Maximum number of lines
maxLengthint?nullMaximum character length
borderRadiusdouble?nullBorder radius
filledboolfalseWhether to fill background
enabledbool?nullWhether field is enabled

Methods

// Validate the field
String? validate()

// Clear the field
void clear()

// Focus the field
void focus()

// Unfocus the field
void unfocus()

// Get current value
String get value

// Check if field has error
bool get hasError

// Check if field is valid
bool get isValid

Example

TextFieldAppi(
label: 'Email Address',
hintText: 'Enter your email',
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Email is required';
}
if (!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
prefixIcon: Icon(Icons.email),
borderRadius: 8,
filled: true,
fillColor: Colors.grey[100],
)

SearchableTextFieldAppi

A text field with built-in search functionality and suggestions.

Constructor

SearchableTextFieldAppi({
Key? key,
TextEditingController? controller,
String? hintText,
List<String>? suggestions,
Future<List<String>> Function(String)? onSearch,
ValueChanged<String>? onChanged,
ValueChanged<String>? onSubmitted,
ValueChanged<String>? onSuggestionSelected,
Widget? prefixIcon,
Widget? suffixIcon,
bool showClearButton,
bool showSearchIcon,
int maxSuggestions,
Duration debounceDelay,
bool caseSensitive,
TextStyle? style,
TextStyle? suggestionStyle,
Color? backgroundColor,
Color? suggestionBackgroundColor,
double? borderRadius,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? suggestionPadding,
double? suggestionItemHeight,
bool enabled,
bool autofocus,
FocusNode? focusNode,
})

Properties

PropertyTypeDefaultDescription
controllerTextEditingController?nullControls the text being edited
suggestionsList<String>?nullStatic list of suggestions
onSearchFuture<List<String>> Function(String)?nullAsync search function
maxSuggestionsint5Maximum suggestions to show
debounceDelayDuration300msDelay before triggering search
showClearButtonbooltrueShow clear button when text exists
caseSensitiveboolfalseWhether search is case sensitive

Example

SearchableTextFieldAppi(
hintText: 'Search products...',
suggestions: ['iPhone', 'iPad', 'MacBook', 'Apple Watch'],
onSuggestionSelected: (suggestion) {
print('Selected: $suggestion');
},
showClearButton: true,
maxSuggestions: 3,
)

A customizable dropdown menu with advanced features.

Constructor

DropDownMenuAppi({
Key? key,
required List<String> items,
String? value,
String? hint,
String? label,
ValueChanged<String?>? onChanged,
DropdownButtonBuilder? selectedItemBuilder,
Widget? disabledHint,
VoidCallback? onTap,
int elevation,
TextStyle? style,
Widget? underline,
Widget? icon,
Color? iconDisabledColor,
Color? iconEnabledColor,
double iconSize,
bool isDense,
bool isExpanded,
double? itemHeight,
Color? focusColor,
FocusNode? focusNode,
bool autofocus,
Color? dropdownColor,
double? menuMaxHeight,
bool? enableFeedback,
AlignmentGeometry alignment,
BorderRadius? borderRadius,
// Custom DropDownMenuAppi properties
bool searchable,
String? searchHint,
bool multiSelect,
List<String>? selectedValues,
ValueChanged<List<String>>? onMultiSelectionChanged,
Widget? prefixIcon,
Widget? suffixIcon,
Color? borderColor,
Color? focusedBorderColor,
double? borderWidth,
bool filled,
Color? fillColor,
EdgeInsetsGeometry? contentPadding,
TextStyle? labelStyle,
TextStyle? hintStyle,
bool showRequiredIndicator,
bool isRequired,
String? Function(String?)? validator,
})

Properties

PropertyTypeDefaultDescription
itemsList<String>requiredList of dropdown items
valueString?nullCurrently selected value
hintString?nullHint text when no selection
onChangedValueChanged<String?>?nullSelection change callback
searchableboolfalseEnable search functionality
multiSelectboolfalseAllow multiple selections
isExpandedboolfalseExpand to fill width
elevationint8Dropdown elevation

Example

DropDownMenuAppi(
label: 'Country',
hint: 'Select a country',
items: ['USA', 'Canada', 'UK', 'Australia'],
value: selectedCountry,
onChanged: (value) {
setState(() {
selectedCountry = value;
});
},
searchable: true,
isExpanded: true,
prefixIcon: Icon(Icons.public),
)

Chart Components

PieChartAppi

An interactive pie chart widget with customization options.

Constructor

PieChartAppi({
Key? key,
required List<PieChartData> data,
double? width,
double? height,
double radius,
double innerRadius,
double startAngle,
bool showLabels,
bool showValues,
bool showPercentages,
bool showLegend,
LegendPosition legendPosition,
TextStyle? labelStyle,
TextStyle? valueStyle,
TextStyle? legendStyle,
Color? backgroundColor,
List<Color>? colorPalette,
bool enableInteraction,
ValueChanged<PieChartData>? onTap,
ValueChanged<PieChartData>? onHover,
bool animateOnLoad,
Duration animationDuration,
Curve animationCurve,
double strokeWidth,
Color? strokeColor,
bool showTooltip,
Widget Function(PieChartData)? tooltipBuilder,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
})

Data Model

class PieChartData {
final String label;
final double value;
final Color? color;
final String? tooltip;
final Map<String, dynamic>? metadata;

const PieChartData({
required this.label,
required this.value,
this.color,
this.tooltip,
this.metadata,
});
}

Properties

PropertyTypeDefaultDescription
dataList<PieChartData>requiredChart data points
radiusdouble100Outer radius of the pie
innerRadiusdouble0Inner radius (for donut chart)
showLabelsbooltrueShow data labels
showLegendboolfalseShow legend
enableInteractionbooltrueEnable tap/hover interactions
animateOnLoadbooltrueAnimate when first displayed

Example

PieChartAppi(
data: [
PieChartData(label: 'Mobile', value: 45, color: Colors.blue),
PieChartData(label: 'Desktop', value: 35, color: Colors.green),
PieChartData(label: 'Tablet', value: 20, color: Colors.orange),
],
height: 300,
showLegend: true,
legendPosition: LegendPosition.bottom,
onTap: (data) => print('Tapped: ${data.label}'),
)

LineChartAppi

A line chart widget for displaying trends and time series data.

Constructor

LineChartAppi({
Key? key,
required List<LineChartData> data,
double? width,
double? height,
Color? lineColor,
double lineWidth,
bool showPoints,
double pointRadius,
Color? pointColor,
bool showGrid,
Color? gridColor,
double gridStrokeWidth,
bool showXAxis,
bool showYAxis,
TextStyle? axisLabelStyle,
String? xAxisLabel,
String? yAxisLabel,
bool enableInteraction,
ValueChanged<LineChartData>? onPointTap,
bool animateOnLoad,
Duration animationDuration,
Curve animationCurve,
bool showTooltip,
Widget Function(LineChartData)? tooltipBuilder,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
double? minY,
double? maxY,
bool autoScale,
List<Color>? gradientColors,
bool fillArea,
Color? fillColor,
})

Data Model

class LineChartData {
final String x;
final double y;
final String? tooltip;
final Map<String, dynamic>? metadata;

const LineChartData({
required this.x,
required this.y,
this.tooltip,
this.metadata,
});
}

Example

LineChartAppi(
data: [
LineChartData(x: 'Jan', y: 30),
LineChartData(x: 'Feb', y: 45),
LineChartData(x: 'Mar', y: 35),
LineChartData(x: 'Apr', y: 60),
],
height: 250,
lineColor: Colors.blue,
showPoints: true,
showGrid: true,
fillArea: true,
fillColor: Colors.blue.withOpacity(0.2),
)

Progress & Loading Components

CircleLoaderAppi

A customizable circular loading indicator.

Constructor

CircleLoaderAppi({
Key? key,
double size,
Color? color,
double strokeWidth,
String? semanticsLabel,
String? semanticsValue,
Animation<Color?>? valueColor,
double? value,
Color? backgroundColor,
bool showPercentage,
TextStyle? percentageStyle,
Duration? animationDuration,
Widget? child,
AlignmentGeometry? alignment,
})

Properties

PropertyTypeDefaultDescription
sizedouble24Size of the loader
colorColor?nullPrimary color
strokeWidthdouble4Width of the progress line
valuedouble?nullProgress value (0.0 to 1.0)
showPercentageboolfalseShow percentage text

Example

CircleLoaderAppi(
size: 50,
color: Colors.blue,
strokeWidth: 6,
value: 0.7, // 70% complete
showPercentage: true,
)

ProgressBarAppi

A linear progress bar with customization options.

Constructor

ProgressBarAppi({
Key? key,
double? value,
Color? backgroundColor,
Color? valueColor,
double? minHeight,
String? semanticsLabel,
String? semanticsValue,
double? width,
BorderRadius? borderRadius,
bool showPercentage,
TextStyle? percentageStyle,
bool showLabel,
String? label,
TextStyle? labelStyle,
bool animated,
Duration? animationDuration,
Curve? animationCurve,
Gradient? gradient,
List<BoxShadow>? boxShadow,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
})

Example

ProgressBarAppi(
value: 0.6,
width: 300,
minHeight: 8,
backgroundColor: Colors.grey[300],
valueColor: Colors.green,
borderRadius: BorderRadius.circular(4),
showPercentage: true,
showLabel: true,
label: 'Upload Progress',
)

Chip & Tag Components

ChipAppi

A material design chip widget with selection and deletion capabilities.

Constructor

ChipAppi({
Key? key,
required String label,
Widget? avatar,
TextStyle? labelStyle,
EdgeInsetsGeometry? labelPadding,
Widget? deleteIcon,
VoidCallback? onDeleted,
Color? deleteIconColor,
String? deleteButtonTooltipMessage,
BorderSide? side,
OutlinedBorder? shape,
Clip clipBehavior,
FocusNode? focusNode,
bool autofocus,
Color? backgroundColor,
EdgeInsetsGeometry? padding,
VisualDensity? visualDensity,
MaterialTapTargetSize? materialTapTargetSize,
double? elevation,
Color? shadowColor,
Color? surfaceTintColor,
IconThemeData? iconTheme,
// Custom ChipAppi properties
bool isSelected,
VoidCallback? onTap,
Color? selectedColor,
Color? selectedTextColor,
bool showCheckmark,
Widget? selectedIcon,
bool disabled,
Color? disabledColor,
double? borderRadius,
double? borderWidth,
Color? borderColor,
bool outlined,
Size? size,
})

Properties

PropertyTypeDefaultDescription
labelStringrequiredChip label text
isSelectedboolfalseWhether chip is selected
onTapVoidCallback?nullTap callback
onDeletedVoidCallback?nullDelete callback
avatarWidget?nullLeading avatar widget
selectedColorColor?nullBackground color when selected
outlinedboolfalseUse outlined style

Example

ChipAppi(
label: 'Flutter',
isSelected: true,
selectedColor: Colors.blue,
onTap: () => print('Chip tapped'),
avatar: Icon(Icons.code),
onDeleted: () => print('Chip deleted'),
)

Media & Image Components

CircleWebImageAppi

A circular image widget that loads images from URLs with caching.

Constructor

CircleWebImageAppi({
Key? key,
required String imageUrl,
double radius,
Widget? placeholder,
Widget? errorWidget,
BoxFit fit,
Color? backgroundColor,
Border? border,
List<BoxShadow>? boxShadow,
bool enableMemoryCache,
bool enableDiskCache,
Duration? cacheDuration,
Map<String, String>? headers,
VoidCallback? onTap,
String? semanticLabel,
bool excludeFromSemantics,
})

Properties

PropertyTypeDefaultDescription
imageUrlStringrequiredURL of the image
radiusdouble25Radius of the circle
placeholderWidget?nullWidget shown while loading
errorWidgetWidget?nullWidget shown on error
fitBoxFitBoxFit.coverHow image should fit

Example

CircleWebImageAppi(
imageUrl: 'https://example.com/avatar.jpg',
radius: 30,
placeholder: CircularProgressIndicator(),
errorWidget: Icon(Icons.error),
border: Border.all(color: Colors.grey, width: 2),
)

Utility & State Management

StateManagerAppi

A simple state management solution for widget-level state.

Constructor

StateManagerAppi<T>({
Key? key,
required T initialValue,
required Widget Function(BuildContext, T, void Function(T)) builder,
void Function(T)? onChanged,
bool Function(T, T)? shouldRebuild,
String? debugLabel,
})

Properties

PropertyTypeDefaultDescription
initialValueTrequiredInitial state value
builderWidget Function(...)requiredBuilder function
onChangedvoid Function(T)?nullState change callback

Example

StateManagerAppi<int>(
initialValue: 0,
builder: (context, count, setState) {
return Column(
children: [
TextAppi(text: 'Count: $count'),
ElevatedButton(
onPressed: () => setState(count + 1),
child: Text('Increment'),
),
],
);
},
)

Common Enums and Types

LegendPosition

enum LegendPosition {
top,
bottom,
left,
right,
}

ChartAnimationType

enum ChartAnimationType {
none,
fadeIn,
slideIn,
scaleIn,
elastic,
}

ResponsiveBreakpoint

enum ResponsiveBreakpoint {
mobile, // < 600px
tablet, // 600px - 1024px
desktop, // > 1024px
}

ValidationResult

class ValidationResult {
final bool isValid;
final String? errorMessage;

const ValidationResult({
required this.isValid,
this.errorMessage,
});
}

Global Configuration

AppiTheme

Configure global theme settings for all Appikorn widgets.

class AppiTheme {
static void configure({
ColorScheme? colorScheme,
TextTheme? textTheme,
Duration? defaultAnimationDuration,
Curve? defaultAnimationCurve,
double? defaultBorderRadius,
EdgeInsetsGeometry? defaultPadding,
bool enableAnimations = true,
bool enableHapticFeedback = true,
}) {
// Configure global theme
}

static ColorScheme get colorScheme;
static TextTheme get textTheme;
static Duration get animationDuration;
// ... other getters
}

Usage

void main() {
AppiTheme.configure(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
defaultAnimationDuration: Duration(milliseconds: 200),
defaultBorderRadius: 8.0,
);

runApp(MyApp());
}

Migration Guide

From Version 1.x to 2.x

Breaking Changes

  1. TextAppi: fontSize property moved to style.fontSize
  2. BoxAppi: borderRadius now accepts BorderRadius instead of double
  3. ChartAppi: Data models restructured for better type safety

Migration Steps

// Old (v1.x)
TextAppi(
text: 'Hello',
fontSize: 16,
)

// New (v2.x)
TextAppi(
text: 'Hello',
style: TextStyle(fontSize: 16),
)

This API reference provides comprehensive documentation for all Appikorn Madix Widgets. For more examples and tutorials, visit our Examples page.