phoenix_widgets 1.11.2 
phoenix_widgets: ^1.11.2 copied to clipboard
ikhlas.comPhoenix 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(
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,
),
"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 #
// 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,
),
"Coming Soon"),
PhoenixProductItem(
"Tile 8",
Image.asset(
"assets/tab_home.png",
width: 45,
height: 45,
),
"Coming Soon"),
];
Available Parameters #
| Param | Type | isRequired | Default |
|---|---|---|---|
| context | BuildContext | Yes | |
| title | String | Yes | |
| children | List | 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",
cancelText: "Cancel",
onCancel: () => Navigator.pop(context),
onChanged: (value) {
setState(() {
result = value;
});
},
)
Available Parameters #
| Param | Type | isRequired | Default |
|---|---|---|---|
| hintText | String | No | "" |
| onChanged | Function(String)? onChanged | No | |
| fillColor | Color | No | Color(0xFFF9F9F9) |
| enable | bool | No | true |
| fontSize | double | No | 14 |
| cancelText | String | Yes | |
| onCancel | VoidCallback | Yes | |
| isFocus | bool | No | True |
PhoenixExpandableList #
PhoenixExpandableListPage is widget to show the with with expandable function
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) |
| 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 | - |
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 | - |
| 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],
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
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 | Yes | - |
| 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
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 | - |
Metadata
10
likes
0
pub points
51%
popularity
Publisher
Metadata
Phoenix library collections.
License
unknown (LICENSE)
Dependencies
cached_network_image, carousel_slider, flutter, flutter_widget_from_html_core, shimmer, webview_flutter
