phoenix_widgets

Description:

phoenix widgets

phoenix_widgets #
Phoenix Widgets is widget collections.
Getting Started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
phoenix_widgets: "^latestVersion"
copied to clipboard
Import it:
import 'package:phoenix_widgets/phoenix_widgets.dart';
copied to clipboard

PhoenixCard #
PhoenixCard is widget to create card

Usage Examples #
PhoenixCard(
title: Text(
"Title with Image",
style: Theme.of(context).textTheme.headline6,
),
description: Text(
"Description",
style: Theme.of(context).textTheme.bodyText2,
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const CircleAvatar(backgroundColor: Colors.red),
const SizedBox(width: 8),
Text(
"Footer",
style: Theme.of(context).textTheme.headline6,
)
],
),
image: Image.network(
"https://images.contentstack.io/v3/assets/blt2a130c768c36b9df/blt5f384c7eb51e7cff/5f7d972ddf178b0ea98488e1/banner_sadaqah.jpg?auto=webp",
fit: BoxFit.cover,
),
onTap: () {},
),

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




image
Widget
No



title
Widget
Yes



description
Widget
Yes



footer
Widget
No



width
double
No
double.maxFinite


padding
EdgeInsets
No



margin
EdgeInsets
No
const EdgeInsets.symmetric(horizontal: 16,vertical: 8)


onTap
VoidCallback
No



backgroundColor
Color
No
Colors.white


borderRadius
double
No
4


footerSeparatorVisible
bool
No
false


imageHeight
double
No
150.0


footerSeparator
Widget
No



label
Widget
No



enableShadow
bool
No
true


borderColor
Color
No
Colors.transparent


borderWidth
double
No
1





PhoenixNavigationCard #
PhoenixNavigationCard is a widget to create a card that has a navigation button

Usage Examples #

PhoenixNavigationCard(
isVisible: false,
icon: SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
),
title: Text(
"Title",
style: Theme.of(context).textTheme.headline6,
),
description: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elite!",
style: Theme.of(context).textTheme.bodyText2,
),
callback: () {},
navigationText: Text(
"Click Here",
style: Theme.of(context).textTheme.bodyText2,
),
),

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




icon
Widget
No



title
Widget
Yes



description
Widget
Yes



navigationText
Widget
No
Text('Click Me')


isVisible
bool
No
true


width
double
No
double.maxFinite


padding
EdgeInsets
No
EdgeInsets.only(top: 16, bottom: 16)


callback
VoidCallback
No



backgroundColor
Color
No
Color(0x10C9B47D)


borderRadius
double
No
4


icHeight
double
No
46


icWidth
double
No
46


icColor
Color
No
Colors.transparent


icBtnBackgroundColor
Color
No
Color(0x10C9B47D)


icBtnColor
Color
No
Color(0x1AC9B47D)


icBtnSize
double
No
16





PhoenixBottomMenu #
PhoenixBottomMenu is widget to create navigation bar

Usage Examples #
import 'package:flutter_svg/svg.dart';

PhoenixBottomMenuUHF(
selectedIndex: selectedIndex,
navBarItems: [
NavBarItem(
name: "Home",
image: SvgPicture.asset('assets/tab/home_default.svg'),
selectedImage: SvgPicture.asset('assets/tab/home_selected.svg'),
),
NavBarItem(
name: "Feed",
image: SvgPicture.asset('assets/tab/feed_default.svg'),
selectedImage: SvgPicture.asset('assets/tab/feed_selected.svg'),
),
NavBarItem(
name: "Community",
image: SvgPicture.asset('assets/tab/community_default.svg'),
selectedImage: SvgPicture.asset('assets/tab/community_selected.svg'),
),
NavBarItem(
name: "Account",
image: SvgPicture.asset('assets/tab/account_default.svg'),
selectedImage: SvgPicture.asset('assets/tab/account_selected.svg'),
),
],
selectedTabColor: Colors.red, ///optional
unselectedTabColor: Colors.black54, ///optional
onTabChange: (index) {
setState(() {
selectedIndex = index;
_tabController!.jumpToPage(index);
});
},
)

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




navBarItems
List
Yes



selectedTabColor
Color
No
Colors.red


unselectedTabColor
Color
No
Colors.black54


onTabChange
Function
Yes



backgroundColor
Color
No



elevation
Double
No



selectedIndex
int
No
0



Available Parameters for NavBarItem #



Param
Type
isRequired
Default




name
String
No



image
Widget
Yes



selectedImage
Widget
No







PhoenixButton #
PhoenixButton is widget to create button

Usage Examples #
PhoenixButton(
content: const Text(
"Normal Button",
),
margin: const EdgeInsets.only(
left: 16,
top: 16,
right: 16,
),
buttonElevation: 2,
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Normal Button Clicked"),
),
);
},
radius: 10,
),

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




content
Widget
Yes



buttonMaterialStateProperty
MaterialStateProperty
No



buttonElevation
Double
No
0.0


buttonColor
Color
No



textColor
Color
No



disableButtonColor
Color
No



radius
Double
No



margin
EdgeInsets
No



padding
EdgeInsets
No



height
Double
No



width
Double
No
double.infinity


borderSide
BorderSide
No



onPressed
VoidCallback
No






PhoenixProductTiles #
PhoenixProductTiles is a widget to create product tiles

Usage Examples #
PhoenixProductTiles(
onTap: (index) {},
items: [
PhoenixProductItem(
"Tile 1",
Image.asset(
"assets/tile_1.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 2",
SvgPicture.asset(
"assets/tile_2.svg",
width: 45,
height: 45,
),
label: "Coming Soon")
]
)

to use on non sliver parent:

PhoenixProductTiles.box(
onTap: (index) {},
items: [
PhoenixProductItem(
"Tile 1",
Image.asset(
"assets/tile_1.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 2",
SvgPicture.asset(
"assets/tile_2.svg",
width: 45,
height: 45,
),
label: "Coming Soon")
]
)

copied to clipboard
Available Parameters #
PhoenixProductTiles



Param
Type
isRequired
Default




items
List<PhoenixProductItem>
Yes



onTap
Function
Yes



crossAxisCount
int
No
4


labelBGColor
Color
No
null


labelTextColor
Color
No
null


radius
double
No
20.0



PhoenixProductItem



Param
Type
isRequired
Default




title
String
Yes



icon
Widget
Yes



label
String
No



routeName
String
No






PhoenixGenericPopUp #
PhoenixGenericPopUp is a function to show popup dialog with two or one button

Usage Examples #
phoenixGenericPopUp(
///required
context: context,
popUpTitleWidget: Text(
'Pop Up Two Button Title',
),
popUpContentWidget: Text(
"This is Pop Up One Button Message, Lorem ipsum dolor sit amet, consectetur adipiscing elit",
),

///optional
ensureWidget: Text(
"Confirm",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
cancelWidget: Text(
"Cancel",
style: TextStyle(
color: Colors.red,
),
),
//if type != 1 the popup will not dismiss when click confirm button
type: 1,
dismissOnOutsideTouch: false,
ensureCallback: () {
showSnackBar("Confirm Button Clicked");
},
cancelCallback: () {
showSnackBar("Cancel Button Clicked");
},
);

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




context
BuildContext
Yes



popUpContentWidget
Widget
Yes



popUpTitleWidget
Widget
No



ensureWidget
Widget
No
Confirm


cancelWidget
Widget
No



type
int
No
1


dismissOnOutsideTouch
bool
No
false


ensureCallback
VoidCallback
No



cancelCallback
VoidCallback
No






PhoenixPopUp #
PhoenixPopUp is a function to show popup dialog with two or one button

Usage Examples #
phoenixPopUp(
context: context,
title: 'Pop Up Two Button Title',
description:
"This is Pop Up One Button Message, Lorem ipsum dolor sit amet, consectetur adipiscing elit",
primaryButtonLabel: 'Confirm',
secondayButtonLabel: 'Cancel',
type: 1,
barrierDismissible: true,
ensureCallback: () {
showSnackBar("Confirm Button Clicked");
},
cancelCallback: () {
showSnackBar("Cancel Button Clicked");
},
);

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




context
BuildContext
Yes



description
String
Yes



title
String
No



primaryButtonLabel
String
No



secondaryButtonLabel
String
No



type
int
No
1


barrierDismissible
bool
No
false


direction
PhoenixPopupDirection
No
row


space
double
No
16


elevation
double
No
1.0


ensureCallback
VoidCallback
No



cancelCallback
VoidCallback
No






PhoenixWebview #
PhoenixWebview is a widget to create a webview, for special specialContainUrl,
it will use android custom_tabs or safari view controller for ios to handle if url changes contain
webpage that is needed to open in native view

Usage Examples #
PhoenixWebview(url: "https://flutter.dev/", title: "Flutter Dev");

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




url
String
Yes
-


title
String
Yes
-


isForRegistration
bool
No
false


isShowRefresh
bool
No
-


userAgent
String
No
-


bottomNavigationBar
Widget
No
-


refreshIcons
Widget
No
-


customJavaScripts
String
No
-


navigationDelegate
Function
No
-


isToRun
List
No
-


noInternetHandler
Widget
No
-


toolbarColor
Color
No
-


specialContainUrl
List
No
-


enableClearCacheInitDispose
bool
No
false





PhoenixBackButton #
PhoenixBackButton is a widget to create back button

Usage Examples #
PhoenixBackButton();

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




color
Color
No



callback
VoidCallback
No



size
doubke
No
28





PhoenixTitle #
PhoenixTitle is a widget to create title

Usage Examples #
PhoenixTitle(title: "Phoenix Title"));

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




title
String
Yes



fontSize
double
No



fontWeight
FontWeight
No



color
Color
No






PhoenixEmptyPage #
PhoenixEmptyPage is a widget to create empty pages

Usage Examples #
PhoenixEmptyPage(
title: "No Data",
pageImage: Image.asset(
"assets/illustration.png",
),
textStyle: const TextStyle(
fontSize: 16.0,
color: Color(0xff212124),
),
)

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




title
String
Yes



pageImage
Widget
Yes



textStyle
TextStyle
No
fontSize: 16.0





color: Color(0xff212124)





PhoenixExpandableContentBlock #
PhoenixExpandableContentBlock is a widget to create expandable content block. Url inside the text
content can be clickable and text inside the content can be copied by long press.

Usage Examples #
PhoenixExpandableContentBlock(
text: "Flutter is Google’s portable UI toolkit. Visit https://flutter.dev to learn more.",
style: Theme.of(context).textTheme.bodyText2,
urls: [Url("https://flutter.dev", [47, 66])],
shortenButtonLabel: "[See less]",
expandButtonLabel: "[See more]"
)

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




text
String
Yes



style
TextStyle
Yes



urls
List
No



shortenButtonLabel
String
Yes



expandButtonLabel
String
Yes



maxLines
int
No
6


expandableStateChangeCallback
VoidCallback
No



textCopiedCallback
VoidCallback
No






PhoenixBottomSheet #
PhoenixBottomSheet is a widget to show bottom sheet

Usage Examples #

// Wrap with the statefulWidget
final PhoenixBottomSheet _bottomSheetHowItWorks = PhoenixBottomSheet();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Bottom Sheet Sample'),
),
body: Center(
child: ElevatedButton(
child: const Text("Show All Products"),
onPressed: () {
_bottomSheetHowItWorks(
context,
title: 'Title of bottom Sheet',
children: [
for (final item in _items)
Padding(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 20,
),
child: Row(
children: [
item.icon,
const SizedBox(height: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
Text(
'Description ${item.title}',
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
)
],
),
)
],
);
},
)));
}

// Sample of data to pass
final List<PhoenixProductItem> _items = [
PhoenixProductItem(
"Tile 1",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 2",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 3",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 4",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 5",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 6",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 7",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
),
label: "Coming Soon"),
PhoenixProductItem(
"Tile 8",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
),
label: "Coming Soon"),
];
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




context
BuildContext
Yes



title
String
Yes



children
List
Yes



margin
EdgeInsets
No



padding
EdgeInsets
No



elevation
double
No
0





PhoenixBottomSheetTile #
PhoenixBottomSheetTile is a widget to show bottom sheet with tiles

Usage Examples #

// Wrap with the statefulWidget
final PhoenixBottomSheetTile _bottomSheetHowItWorks =
PhoenixBottomSheetTile();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Bottom Sheet Tile Sample'),
),
body: Center(
child: ElevatedButton(
child: const Text("Show All Products"),
onPressed: () {
_bottomSheetHowItWorks(
context,
spacing: const EdgeInsets.only(bottom: 16.0),
padding: const EdgeInsets.only(
top: 16,
bottom: 58,
),
title: 'Title of bottom sheet',
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 16,
fontWeight: FontWeight.w500,
),
child: CustomScrollView(
shrinkWrap: true,
slivers: [
PhoenixProductTiles(
onTap: (index) {},
items: _items,
)
],
),
);
},
)));
}

// Sample of data to pass
final List<PhoenixProductItem> _items = [
PhoenixProductItem(
"Tile 1",
SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
)),
PhoenixProductItem(
"Tile 2",
SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
)),
PhoenixProductItem(
"Tile 3",
SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
),
label: "Coming Soon"),
PhoenixProductItem(
"Tile 4",
SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
),
label: "Coming Soon"),
PhoenixProductItem(
"Tile 5",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 6",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 7",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
),
label: "Coming Soon"),
PhoenixProductItem(
"Tile 8",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
),
label: "Coming Soon"),

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




context
BuildContext
Yes



title
String
Yes



style
TextStyle
No
TextStyle(color: Color(0xFF212124), fontSize: 16,fontWeight: FontWeight.w500,)


spacing
EdgeInsetsGeometry
No
EdgeInsets.only(bottom: 16.0)


padding
EdgeInsetsGeometry
No
EdgeInsets.only(top: 16, bottom: 58,)


child
Widget
Yes






PhoenixShimmer #
PhoenixShimmer is widget to show a loading widget effect

Usage Examples #
ShimmerWidget.rectangular(
height: 10,
width: 100,
baseColor: Colors.red,
)

ShimmerWidget.circular(
height: 100,
width: 100,
baseColor: Colors.red,
)

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




width
double
No
double.infinity


height
double
Yes



baseColor
Color
No
Color(0xFFE0E0E0)


shapeBorder
ShapeBorder
No
RoundedRectangleBorder()





CircleBorder()





PhoenixBanner #
PhoenixBanner is widget to show carousel of banners
Usage Examples #
PhoenixBanner(
listSlider: [
'https://picsum.photos/820/360'),
'https://picsum.photos/820/360'),
'https://picsum.photos/820/360'),
'https://picsum.photos/820/360')
],
onEvent: (GestureEvent event, index) {
if (event == GestureEvent.onSwipe) {
print('onSwipe');
} else {
print('onTap');
}
},
)

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




listSlider
List
Yes



onEvent
void Function(GestureEvent event, int index)
No



carouselDurationMs
int?
No
3000


activeColour
Color
No
Colors.white


inActiveColour
Color
No
Colors.black.withOpacity(0.25)


bannerHeight
double
No
170.0


viewportFraction
double
No
0.9


fit
BoxFit
No
BoxFit.cover


indicatorPosition
IndicatorPosition {top, bottom}
No
IndicatorPosition.bottom




PhoenixSearchbar #
PhoenixSearcbar is widget to search

Usage Examples #
PhoenixSearchbar(
hintText: "Search",
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
enabled: true,
actionWidget: TextButton(
onPressed: () {
showSnackBar("Cancel");
},
child: const Text(
"Cancel",
style: TextStyle(
color: Color(0xFF67C1BF),
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
radius: 24,
onChanged: (value) {
setState(() {
result = value;
});
},
),


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




hintText
String
No
""


fillColor
Color
No
Color(0xFFF9F9F9)


borderColor
Color
No
Color(0xFFF9F9F9)


enabled
bool
No
true


isFocus
bool
No
true


radius
double
No
0


spaceBetween
double
No
-


actionWidget
Widget
No
-


searchIcon
Widget
No
Icon(Icons.search, size: 24, color: Color(0xff75767A),)


textEditingController
TextEditingController
No
TextEditingController()


hintTextStyle
TextStyle
No
TextStyle(color: Color(0xff75767A), fontSize: 14,)


padding
EdgeInsets
No
EdgeInsets.zero


onWidgetTap
VoidCallback
No
-


onChanged
Function(String)
No
-




PhoenixExpandableList #
PhoenixExpandableListPage is widget to show the with with expandable function

Usage Examples #

PhoenixExpandableList(
expendableData: expendableData[i],
margin: contentMargin ?? const EdgeInsets.only(top: 8, bottom: 16),
contentMargin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
expandColor: Colors.white,
shrinkColor: const Color(0xffF9F9F9),
radius: 5,
shrinkImage: SvgPicture.asset("assets/ic_minus.svg"),
expandImage: SvgPicture.asset("assets/ic_plus.svg"),
showData: expendableData[i].show,
callback: () {
setState(() {
expendableData[i].show = !expendableData[i].show;
});
},
)


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




expendableData
ExpendableData
Yes
-


margin
EdgeInsetsGeometry
No
EdgeInsets.all(16)


contentMargin
EdgeInsetsGeometry
No
EdgeInsets.only(top: 8, bottom: 16)


padding
EdgeInsetsGeometry
No
EdgeInsets.all(16)


titlePadding
EdgeInsetsGeometry
No
EdgeInsets.zero


expandColor
Color
No
Colors.white


shrinkColor
Color
No
Colors.grey


radius
double
No
-


shrinkImage
Widget
No
Icon(Icons.add)


expandImage
Widget
No
Icon(Icons.minimize)


showData
bool
Yes
false


callback
VoidCallback
Yes
-




PhoenixWarning #
PhoenixWarning is widget to show any warning

Usage Examples #

PhoenixWarning(
warningVisibility: true,
messageWidget: const Text(
"This is example of warning. Put any text here",
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontWeight: FontWeight.normal,
),
),
errorWidget: const Icon(Icons.error_outline, color: Colors.black),
borderColor: Colors.red.withOpacity(.8),
backgroundColor: Colors.red.withOpacity(.6),
margin: const EdgeInsets.only(top: 8),
padding: const EdgeInsets.all(8),
radius: 5,
spacerHeight: 100)


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




warningVisibility
bool
Yes
-


messageWidget
Widget
Yes
-


errorWidget
Widget
Yes
-


borderColor
Color
Yes
-


backgroundColor
Color
Yes
-


margin
EdgeInsetsGeometry
Yes
-


padding
EdgeInsetsGeometry
Yes
-


radius
double
Yes
-


spacerHeight
double
Yes
-




PhoenixListGroup #
PhoenixListGroup is widget generate a list of menu with a submenu inside

Usage Examples #

PhoenixListGroup(
groupList: _sampleGrouping,
),

// Sample of data to pass
Map<String, List<DataHelper>> _sampleGrouping = {
'Data 1': [
DataHelper(
title: 'Title Data 2.1',
desc: 'Description Data 2.1',
isSelected: true,
isVisible: false),
DataHelper(
title: 'Title Data 2.2',
desc: 'Description Data 2.2',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.3',
desc: 'Description Data 2.3',
isSelected: true,
isVisible: true),
],
'Data 2': [
DataHelper(
title: 'Title Data 2.1',
desc: 'Description Data 2.1',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.2',
desc: 'Description Data 2.2',
isSelected: true,
isVisible: false),
DataHelper(
title: 'Title Data 2.3',
desc: 'Description Data 2.3',
isSelected: true,
isVisible: true),
]
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




groupList
Map<String, List
Yes
-


hideLastDivider
bool
No
false


titlePadding
EdgeInsets
No
EdgeInsets.all(8)




PhoenixTextField #
PhoenixTextField is to create a Text Field

Usage Examples #

// Need to wrap with statefulWidget
late FocusNode _fn;
bool _isFocus = false;

@override
void initState() {
super.initState();
_fn = widget.focusNode ?? FocusNode();
_fn.addListener(() {
setState(() {
_isFocus = _fn.hasFocus;

/// Check if focus changed
if (!_isFocus) {
widget.validator?.call();
}
});
});
}

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: widget.onTap,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
width: double.maxFinite,
height: 50,
decoration: BoxDecoration(
color: widget.backgroundColor,
border: Border.all(
color: widget.isError
? const Color(0xffDC3224)
: const Color(0xffD9DBE0),
),
borderRadius: BorderRadius.circular(4),
),
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(bottom: 4),
),
Positioned(
top: (widget.textEditingController.text.isNotEmpty || _isFocus)
? 5
: 0,
left: 0,
right: 0,
bottom: 4,
child: TextFormField(
autofillHints: widget.autoFillHints,
textInputAction: widget.textInputAction,
onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
enabled: widget.enabled ?? true,
inputFormatters: widget.inputFormatters,
keyboardType: widget.keyboardType,
controller: widget.textEditingController,
obscureText: widget.obscureText ?? false,
focusNode: _fn,
onTap: widget.onTap,
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.only(
left: 16,
right: 0,
bottom: (widget.textEditingController.text.isNotEmpty ||
_isFocus)
? 4
: 14,
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
border: InputBorder.none,
errorBorder: InputBorder.none,
suffixIcon: widget.suffixIcon,
label: Container(
margin: const EdgeInsets.only(
top: 6,
),
child: Text(
widget.label,
style: (widget.textStyle ??
const TextStyle(
color: Color(0xFF212124),
fontSize: 14,
fontWeight: FontWeight.normal,
).copyWith(
color: widget.isError
? const Color(0xffDC3224)
: const Color(0xff75767A),
overflow: TextOverflow.ellipsis,
)),
),
),
alignLabelWithHint: true,
hintText: widget.hintText,
floatingLabelBehavior: widget.hintText != null
? FloatingLabelBehavior.always
: null,
hintStyle: const TextStyle(
color: Color(0xFF212124),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
onChanged: (_) {
widget.validator?.call();
},
),
),
],
),
if (widget.description != null && !widget.isError)
Container(
margin: const EdgeInsets.only(top: 5),
child: Text(
widget.description!,
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 12,
fontWeight: FontWeight.normal,
).copyWith(
color: widget.isError
? const Color(0xffDC3224)
: const Color(0xff75767A),
),
),
),
if (!widget.noErrorSpace) ...[
const SizedBox(height: 4),
Visibility(
visible: widget.isError,
child: Text(
widget.errorMessage ?? "",
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 12,
fontWeight: FontWeight.normal,
).copyWith(color: const Color(0xffDC3224)),
),
),
const SizedBox(height: 8),
]
],
),
);
}


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




textEditingController
TextEditingController
Yes
-


validator
VoidCallback
No
-


isError
bool
No
false


label
String
Yes
-


errorMessage
String
Yes
-


suffixIcon
Widget
Yes
-


obscureText
bool
Yes
-


enabled
bool
Yes
-


keyboardType
TextInputType
Yes
-


inputFormatters
List
Yes
-


onTap
VoidCallback
Yes
-


autoFillHints
List
Yes
-


description
String
Yes
-


textStyle
TextStyle
Yes
-


disableTextStyle
TextStyle
Yes
-


noErrorSpace
bool
Yes
false


focusNode
FocusNode
Yes
-


backgroundColor
Color
Yes
-


hintText
String
Yes
-




PhoenixDropdown #
PhoenixDropdown is widget to dynamically create a dropdown

Usage Examples #

PhoenixDropdown<SampleData>(
label: 'Title',
value: sampleDataList[0],
errorMessage: 'Error choose',
errorTextStyle: TextStyle(fontSize: 12),
onChanged: (body) {},
items: sampleDataList.map((body) {
return DropdownMenuItem(
alignment: Alignment.centerLeft,
value: body,
child: Text(body.dataTitle!),
);
}).toList(),
)

// Sample of data to pass
final sampleDataList = [
SampleData('one', [1, 2, 3]),
SampleData('two', [1, 2, 3]),
SampleData('three', [1, 2, 3])
];

class SampleData {
String? dataTitle;
List? sampleList = [];

SampleData(this.dataTitle, this.sampleList);
}


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




isError
bool
No
false


label
String
No
-


suffixIcon
Widget
No
-


onTap
VoidCallback
No
-


value
T
Yes
-


items
List<DropdownMenuItem
Yes
-


onChanged
Function(T?)
No
-


errorMessage
String
No
-


errorTextStyle
TextStyle
No
-




PhoenixDialog #
PhoenixDialog is widget to show a dialog

Usage Examples #

// Wrap with statefulWidget
final PhoenixDialog _bottomSheetHowItWorks = PhoenixDialog();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Dialog Sample'),
),
body: Center(
child: ElevatedButton(
child: const Text("Show Dialog"),
onPressed: () {
_bottomSheetHowItWorks(
context,
title: 'Title of Dialog',
padding: EdgeInsets.zero,
children: [
for (final item in _items)
Padding(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 20,
),
child: Row(
children: [
item.icon,
const SizedBox(height: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
Text(
'Description ${item.title}',
style: const TextStyle(
color: Color(0xFF212124),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
)
],
),
)
],
);
},
)));
}

// Sample of data to pass
final List<PhoenixProductItem> _items = [
PhoenixProductItem(
"Tile 1",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 2",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
PhoenixProductItem(
"Tile 3",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
)),
];


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




context
BuildContext
Yes
-


title
String
No
-


children
List
Yes
-


dismissible
bool
No
true


padding
EdgeInsets
No
-




PhoenixListGroupPartition #
PhoenixListGroupPartition is widget generate a list of menu with a submenu inside and with a dedicated container

Usage Examples #

PhoenixListGroupPartition(
groupList: _sampleGrouping,
),

// Example of data to pass
Map<String, List<DataHelper>> _sampleGrouping = {
'Data 1': [
DataHelper(
title: 'Title Data 2.1',
desc: 'Description Data 2.1',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.2',
desc: 'Description Data 2.2',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.3',
desc: 'Description Data 2.3',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.4',
desc: 'Description Data 2.4',
isSelected: true,
isVisible: true),
],
'Data 2': [
DataHelper(
title: 'Title Data 2.1',
desc: 'Description Data 2.1',
isSelected: true,
isVisible: true),
DataHelper(
title: 'Title Data 2.2',
desc: 'Description Data 2.2',
isSelected: true,
isVisible: false),
DataHelper(
title: 'Title Data 2.3',
desc: 'Description Data 2.3',
isSelected: true,
isVisible: true),
]
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




groupList
Map<String, List
Yes
-



PhoenixTabView #
PhoenixTabView is widget to display tabs menu active label on the center

Usage Examples #
final _tabs = {
'tab1': 'Tab1',
'tab2': 'Tab2',
'tab3': 'Tab3',
'tab4': 'Tab4'
};
PhoenixTabView(
tabs: _tabs,
builder: (BuildContext context, String id) {
return Center(child: Text(_tabs[id]!));
},
),
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




tabs
Map<String, String>
Yes
-


builder
Widget Fn(BuildContext, String)
Yes
-


currentIndex
int
No
-


menuBackgroundColor
Color
No
-


menuPadding
EdgeInsets
No
-


onTabChange
void Fn(int index)
No
-


indicatorColor
Color
No
-


labelColor
Color
No
-


unselectedLabelColor
Color
No
-


labelStyle
TextStyle
No
TextStyle( fontSize: 16,fontWeight: FontWeight.w500)


unselectedLabelStyle
TextStyle
No
TextStyle( fontSize: 16,fontWeight: FontWeight.w500)


tabController
TabController
No
-




PhoenixSearchNoContent #
PhoenixSearchNoContent is a widget to create a card that show searched is don't have any content

S
Usage Examples #

@override
Widget build(BuildContext context){
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Search No Content Sample App'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PhoenixSearchNoContent(
title:const Text('Start Searching',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),),
icon: SvgPicture.asset(
"assets/umrah_guide.svg",
),
subtitle: const Text('using relevant keywords',style: TextStyle(fontSize: 14,fontWeight: FontWeight.w400),),
),
],
)
);
}

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




icon
Widget
Yes



title
Widget
Yes



subtitle
Widget
Yes




PhoenixChip #
PhoenixChip is a widget to create a card that show suggestion chip when click on the search bar

S
Usage Examples #

class _PhoenixButtonPage extends State<PhoenixChipPage> {
final PhoenixDialog _bottomSheetHowItWorks = PhoenixDialog();
final List<String> _items = [
"Ihram",
"Before Ihram",
"During Ihram",
"After Ihram"
];

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Chip Sample'),
),
body: PhoenixChip(
title: const Padding(
padding: EdgeInsets.only(top: 16, left: 16),
child: Text(
'Discover',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
),
items: _items,
callback: (int index) {
_bottomSheetHowItWorks(
context,
title: _items[index],
children: []);
},
chipTextStyle: const TextStyle(fontSize: 14,fontWeight: FontWeight.w400),
outlineChipColor: Colors.grey,
backgroundChipColor: Colors.white,
lineChipWidth: 1,
chipTextPadding:
const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
chipPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
chipSpacing: 8,
),
);
}
}

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




title
Widget
Yes



items
List
Yes



callback
Function(int index)
Yes



backgroundChipColor
Color
No



lineChipWidth
double
No



outlinedChipColor
Color
No



chipTextPadding
EdgeInsets
No



chipPadding
EdgeInsets
No



chipSpacing
double
No



chipTextStyle
TextStyle
No




PhoenixListviewText #
PhoenixSearchNoContent is a widget to create a card that show listview Text when search

S
Usage Examples #

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Listview Text Sample'),
),
body: const PhoenixListviewText(
title: Text('Suggestion',
style: TextStyle(fontWeight: FontWeight.w400,
fontSize: 16),
),
contents: [Text('Ihram',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400),),
Text("Before Ihram",style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400)),
Text("After Ihram",style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400)),
],
)
);
}


copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




contents
List
Yes



title
Widget
Yes



radiusContentsBox
Radius
No



seperatorSpace
double
No



seperatorColor
Color
No



outlineBoxContentsColor
Color
No



boxContentsColor
Color
No



action
Widget
No



callback
Function(int index)
No




PhoenixCheckbox #
PhoenixCheckbox is a widget for showing a checkbox that can be checked and unchecked.

Usage Example #
class Page extends State<Page> {
bool isCheckboxChecked = false;

void onCheckboxChange(bool value) {
setState(() {
isCheckboxChecked = value;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PhoenixCheckbox(
isChecked: isCheckboxChecked,
onChange: onCheckboxChange,
checkedIcon: SvgPicture.asset('assets/ic_check.svg'),
uncheckedIcon: SvgPicture.asset('assets/ic_uncheck.svg'),
)
],
),
],
),
);
}
}

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




isChecked
bool
No
false


onChange
dynamic Function(bool)
Yes



checkedIcon
Widget
No
SvgPicture.asset('assets/images/ic_check.svg', package: 'phoenix_widgets')


uncheckedIcon
Widget
No
SvgPicture.asset('assets/images/ic_uncheck.svg', package: 'phoenix_widgets')



PhoenixMore #
PhoenixMore is a labelled button that tells the user that there is more to be done or seen after tapping the button.

Usage Example #
class Page extends StatelessWidget {
Page({ super.key })

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
PhoenixMore(title: 'Read more')
],
),
],
)
);
}
}
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




title
String
Yes



onTap
VoidCallback
No



titleStyle
TextStyle
No
TextStyle(color: Color(0xFF00B3AF), fontSize: 16, fontWeight: FontWeight.w500),



PhoenixEndOfSection #
PhoenixEndOfSection is a widget to let the user know that they have reached the end of a section.

Usage Example #
class Page extends StatelessWidget {
Page({ super.key })

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
PhoenixEndOfSection(
label: 'End of the section',
logoImage: SvgPicture.asset('assets/logo.svg'),
),
],
),
],
)
);
}
}
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




label
String
Yes



logoImage
Widget
No
SvgPicture.asset('assets/images/logo_grey.svg', package: 'phoenix_widgets');


labelStyle
TextStyle
No
TextStyle(color: Color(0xFFE0E0E0), fontWeight: FontWeight.w300, fontSize: 12)



PhoenixTick #
PhoenixTick is a tick that can be shown as ticked or unticked.

Usage Example #
class Page extends StatelessWidget {
Page({ super.key })

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
PhoenixTick(
isTicked: true,
)
],
),
],
)
);
}
}
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




isTicked
bool
No
false


tickedIcon
Widget
No
SvgPicture.asset('assets/images/ic_ticked.svg', width: 24, height: 24, package: 'phoenix_widgets');


untickedIcon
Widget
No
SvgPicture.asset('assets/images/ic_unticked.svg', width: 24, height: 24, package: 'phoenix_widgets');


crossFadeDuration
Duration
No
Duration(milliseconds: 300)



PhoenixImageEaseOutFade #
PhoenixImageEaseOutFade is a widget that show two image with ease in and fade out animation

Usage Example #
class PhoenixImageEaseOutPage extends StatelessWidget {
const PhoenixImageEaseOutPage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Image Ease Out Fade'),
),
body: const PhoenixImageEaseOutFade(
imageListCollection: [
"https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_twitter-128.png",
"https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/387_Xbox_logo-512.png",
"https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/272/Google_2015_logo-512.png",
"https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png",
"https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/395_Youtube_logo-512.png",
"https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-512.png",
"https://cdn2.iconfinder.com/data/icons/social-media-2421/512/TikTok-512.png",
],
durationMiliseconds: 1500,
imagePadding: EdgeInsets.all(16),
),
);
}
}

copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




imageListCollection
List<String>
yes
``


durationMiliseconds
int
yes
``


imageHeight
double
No
((MediaQuery.of(context).size.width / 16 * 9) / 2)


imagePadding
EdgeInsets
No
EdgeInsets.zero



PhoenixRichTextHandler #
PhoenixRichTextHandler is a widget that designed to display and render HTML content or rich text.

Usage Example #
class PhoenixRichTextHandlerPage extends StatelessWidget {
const PhoenixRichTextHandlerPage({super.key});

@override
Widget build(BuildContext context) {
String? htmlContent = '''
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <hr /> <p>Image Banner</p> <a href="https://ikhlas.com/umrah/ms/my/" target="_blank" ><img src="https://images.contentstack.io/v3/assets/blt2a130c768c36b9df/blt172035f00f6ae58a/657985e9a794f21a9f4af11a/Panduan_Melaksanakan_Ibadah_Umrah.jpg" width="100%" height="auto" style="text-align: left" /></a> <br /><p> Text - Participate in our contest <i> for an opportunity to embark on an <u>Umrah</u> journey</i> with <strong> ikhlas.com</strong> </p> <p> Text with inline logo - 📣 Don't miss the chance to win Umrah 🕋 </p> <hr /> <p>Quote</p> <blockquote cite="https://www.huxley.net/bnw/four.html" style="text-align: center" > <p style="text-align: center"> The Closest Of People To Me On Judgment Day, Will Be Those Who Sent Most Salawat (Blessings) Upon Me </p> <footer>— Muhammad SAW</footer> </blockquote> <hr /> <div class="outer-container"> <div class="item"> Webview for iframe elements <div class="container"> <iframe class="responsive-iframe" src="https://www.instagram.com/p/CwnNVaOqudj/embed" ></iframe> </div> </div> </div>
''';
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Phoenix Rich Text Handler'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(16, 40, 16, 40),
child: RichTextHandler(content: htmlContent),
),
);
}
}
copied to clipboard
Available Parameters #



Param
Type
isRequired
Default




content
String
yes
``