phoenix_widgets 1.7.4
phoenix_widgets: ^1.7.4 copied to clipboard
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 |
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 |
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() |