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
Property | Type | Default | Description |
---|---|---|---|
text | String | required | The text to display |
style | TextStyle? | null | Text styling options |
textAlign | TextAlign? | null | How to align the text horizontally |
overflow | TextOverflow? | null | How to handle text overflow |
maxLines | int? | null | Maximum number of lines |
isSelectable | bool | false | Whether text can be selected |
isResponsive | bool | false | Enable responsive text sizing |
gradient | Gradient? | null | Gradient effect for text |
shadows | List<Shadow>? | null | Text 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
Property | Type | Default | Description |
---|---|---|---|
child | Widget? | null | The widget below this widget in the tree |
color | Color? | null | Background color |
width | double? | null | Width of the container |
height | double? | null | Height of the container |
padding | EdgeInsetsGeometry? | null | Internal padding |
margin | EdgeInsetsGeometry? | null | External margin |
borderRadius | double? | null | Border radius for all corners |
border | Border? | null | Border decoration |
boxShadow | List<BoxShadow>? | null | Shadow effects |
gradient | Gradient? | null | Gradient background |
onTap | VoidCallback? | null | Tap callback |
isInteractive | bool | false | Enable interaction effects |
elevation | double? | null | Material 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
Property | Type | Default | Description |
---|---|---|---|
controller | TextEditingController? | null | Controls the text being edited |
label | String? | null | Label text |
hintText | String? | null | Placeholder text |
validator | String? Function(String?)? | null | Validation function |
isRequired | bool | false | Whether field is required |
keyboardType | TextInputType? | null | Type of keyboard to show |
obscureText | bool | false | Whether to hide text (for passwords) |
maxLines | int? | 1 | Maximum number of lines |
maxLength | int? | null | Maximum character length |
borderRadius | double? | null | Border radius |
filled | bool | false | Whether to fill background |
enabled | bool? | null | Whether 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
Property | Type | Default | Description |
---|---|---|---|
controller | TextEditingController? | null | Controls the text being edited |
suggestions | List<String>? | null | Static list of suggestions |
onSearch | Future<List<String>> Function(String)? | null | Async search function |
maxSuggestions | int | 5 | Maximum suggestions to show |
debounceDelay | Duration | 300ms | Delay before triggering search |
showClearButton | bool | true | Show clear button when text exists |
caseSensitive | bool | false | Whether search is case sensitive |
Example
SearchableTextFieldAppi(
hintText: 'Search products...',
suggestions: ['iPhone', 'iPad', 'MacBook', 'Apple Watch'],
onSuggestionSelected: (suggestion) {
print('Selected: $suggestion');
},
showClearButton: true,
maxSuggestions: 3,
)
Dropdown & Selection Components
DropDownMenuAppi
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
Property | Type | Default | Description |
---|---|---|---|
items | List<String> | required | List of dropdown items |
value | String? | null | Currently selected value |
hint | String? | null | Hint text when no selection |
onChanged | ValueChanged<String?>? | null | Selection change callback |
searchable | bool | false | Enable search functionality |
multiSelect | bool | false | Allow multiple selections |
isExpanded | bool | false | Expand to fill width |
elevation | int | 8 | Dropdown 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
Property | Type | Default | Description |
---|---|---|---|
data | List<PieChartData> | required | Chart data points |
radius | double | 100 | Outer radius of the pie |
innerRadius | double | 0 | Inner radius (for donut chart) |
showLabels | bool | true | Show data labels |
showLegend | bool | false | Show legend |
enableInteraction | bool | true | Enable tap/hover interactions |
animateOnLoad | bool | true | Animate 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
Property | Type | Default | Description |
---|---|---|---|
size | double | 24 | Size of the loader |
color | Color? | null | Primary color |
strokeWidth | double | 4 | Width of the progress line |
value | double? | null | Progress value (0.0 to 1.0) |
showPercentage | bool | false | Show 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
Property | Type | Default | Description |
---|---|---|---|
label | String | required | Chip label text |
isSelected | bool | false | Whether chip is selected |
onTap | VoidCallback? | null | Tap callback |
onDeleted | VoidCallback? | null | Delete callback |
avatar | Widget? | null | Leading avatar widget |
selectedColor | Color? | null | Background color when selected |
outlined | bool | false | Use 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
Property | Type | Default | Description |
---|---|---|---|
imageUrl | String | required | URL of the image |
radius | double | 25 | Radius of the circle |
placeholder | Widget? | null | Widget shown while loading |
errorWidget | Widget? | null | Widget shown on error |
fit | BoxFit | BoxFit.cover | How 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
Property | Type | Default | Description |
---|---|---|---|
initialValue | T | required | Initial state value |
builder | Widget Function(...) | required | Builder function |
onChanged | void Function(T)? | null | State 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
- TextAppi:
fontSize
property moved tostyle.fontSize
- BoxAppi:
borderRadius
now acceptsBorderRadius
instead ofdouble
- 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.