phoenix_widgets 1.11.4

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

---

---

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	-