phoenix_widgets 1.8.0

Phoenix library collections.

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

---

---

PhoenixBottomMenu

PhoenixBottomMenu is widget to create navigation bar

Usage Examples

import 'package:flutter_svg/svg.dart';

PhoenixBottomMenuUHF(
    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(() {});
    _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

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

---

---

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

Usage Examples

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

Available Parameters

Param	Type	isRequired	Default
url	String	Yes
title	String	Yes

---

---

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

showPhoenixBottomSheet(context, "Bottom Sheet Title", Text("Bottom Sheet Content"));

Available Parameters

Param	Type	isRequired	Default
context	BuildContext	Yes
title	String	Yes
child	Widget	Yes
style	TextStyle	No	Weight: 500, Style: Normal, Size; 16px

---

---

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

---