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"

Import it:

import 'package:phoenix_widgets/phoenix_widgets.dart';

---

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: () {},
  ),

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,
),
),

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);
    });
    },
)

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,
),

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")
  ]
)

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");
    },
);

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");
  },
);

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");

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();

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"));

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),
    ),
)

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]"
)

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"),
];

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"),

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,
)

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');
      }
    },
 )

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;
            });
        },
    ),

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;
            });
        },
    )

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)

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),
  ]

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),
          ]
        ],
      ),
    );
  }

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);
      }

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,
      )),
];

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),
  ]

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]!));
        },
      ),

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),),
          ),
        ],
      )
  );
}

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,
      ),
    );
  }
}

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)),
        ],
      )
  );
}

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'),
              )
            ],
          ),
        ],
      ),
    );
  }
}

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')
            ],
          ),
        ],
      )
    );
  }
}

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'),
              ),
            ],
          ),
        ],
      )
    );
  }
}

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,
              )
            ],
          ),
        ],
      )
    );
  }
}

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),
      ),
    );
  }
}

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),
      ),
    );
  }
}

Available Parameters

Param	Type	isRequired	Default
content	String	yes	``

Libraries

custom_widget/custom_app_bar

custom_widget/custom_progress_bar

phoenix_back_button

phoenix_banner

phoenix_bottom_menu_uhf

phoenix_bottom_sheet

phoenix_bottom_sheet_tile

phoenix_button

phoenix_card

phoenix_checkbox

phoenix_chip

phoenix_dialog

phoenix_dropdown

phoenix_empty_page

phoenix_end_of_section

phoenix_expandable_content_block

phoenix_expandable_list

phoenix_generic_popup

phoenix_image_ease_out_fade

phoenix_list_group

phoenix_list_group_partition

phoenix_listview

phoenix_more

phoenix_navigation_card

phoenix_popup

phoenix_product_tiles

phoenix_rich_text_handler

phoenix_search_no_content

phoenix_searchbar

phoenix_shimmer

phoenix_tab_view

phoenix_text_field

phoenix_tick

phoenix_title

phoenix_warning

phoenix_webview

phoenix_widgets