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

PhoenixCard

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

PhoenixNavigationCard #

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

PhoenixNavigationCard

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

PhoenixBottomMenuUHF

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
name	String	No
image	Widget	Yes
selectedImage	Widget	No

PhoenixButton #

PhoenixButton is widget to create button

PhoenixButton

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

PhoenixProductTiles

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

PhoenixGenericPopUp

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

PhoenixPopUp

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

PhoenixWebview

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	-

PhoenixBackButton #

PhoenixBackButton is a widget to create back button

PhoenixBackButton

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

PhoenixTitle

Usage Examples #

PhoenixTitle(title: "Phoenix Title"));

Available Parameters #

Param	Type	isRequired
title	String	Yes
fontSize	double	No
fontWeight	FontWeight	No
color	Color	No

PhoenixEmptyPage #

PhoenixEmptyPage is a widget to create empty pages

PhoenixEmptyPage

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.

PhoenixExpandableContentBlock

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

PhoenixBottomSheet

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

PhoenixBottomSheetTile

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

PhoenixShimmer

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

PhoenixSearchbar

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

PhoenixExpandableList

Usage Examples #


    PhoenixExpandableList(
        expendableData: expendableData[i],
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        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)
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

PhoenixExpandableList

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

PhoenixExpandableList

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

PhoenixTextField #

PhoenixTextField is to create a Text Field

PhoenixExpandableList

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

PhoenixExpandableList

Usage Examples #


    PhoenixDropdown<SampleData>(
        label: 'Title',
        value: sampleDataList[0],
        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	-

PhoenixDialog #

PhoenixDialog is widget to show a dialog

PhoenixExpandableList

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

PhoenixListGroupPartition #

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

PhoenixExpandableList

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

PhoenixExpandableList

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

PhoenixSearchNoContent 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
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

PhoenixChip 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
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

PhoenixListviewText 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
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.

PhoenixCheckboxPage

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.

PhoenixMorePage

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.

PhoenixEndOfSectionPage

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.

PhoenixTickPage

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

phoenix_widgets 1.17.3 phoenix_widgets: ^1.17.3 copied to clipboard

Metadata

phoenix_widgets #

Getting Started #

PhoenixCard #

Usage Examples #

Available Parameters #

PhoenixNavigationCard #

Usage Examples #

Available Parameters #

PhoenixBottomMenu #

Usage Examples #

Available Parameters #

Available Parameters for NavBarItem #

PhoenixButton #

Usage Examples #

Available Parameters #

PhoenixProductTiles #

Usage Examples #

Available Parameters #

PhoenixProductTiles

PhoenixProductItem

PhoenixGenericPopUp #

Usage Examples #

Available Parameters #

PhoenixPopUp #

Usage Examples #

Available Parameters #

PhoenixWebview #

Usage Examples #

Available Parameters #

PhoenixBackButton #

Usage Examples #

Available Parameters #

PhoenixTitle #

Usage Examples #

Available Parameters #

PhoenixEmptyPage #

Usage Examples #

Available Parameters #

PhoenixExpandableContentBlock #

Usage Examples #

Available Parameters #

PhoenixBottomSheet #

Usage Examples #

Available Parameters #

PhoenixBottomSheetTile #

Usage Examples #

Available Parameters #

PhoenixShimmer #

Usage Examples #

Available Parameters #

PhoenixBanner #

Usage Examples #

Available Parameters #

PhoenixSearchbar #

Usage Examples #

Available Parameters #

PhoenixExpandableList #

Usage Examples #

Available Parameters #

PhoenixWarning #

Usage Examples #

Available Parameters #

PhoenixListGroup #

Usage Examples #

Available Parameters #

PhoenixTextField #

Usage Examples #

Available Parameters #

PhoenixDropdown #

Usage Examples #

Available Parameters #

PhoenixDialog #

Usage Examples #

Available Parameters #

PhoenixListGroupPartition #

Usage Examples #

Available Parameters #

PhoenixTabView #

phoenix_widgets 1.17.3
phoenix_widgets: ^1.17.3 copied to clipboard