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

ParamTypeisRequiredDefault
imageWidgetNo
titleWidgetYes
descriptionWidgetYes
footerWidgetNo
widthdoubleNodouble.maxFinite
paddingEdgeInsetsNo
marginEdgeInsetsNoconst EdgeInsets.symmetric(horizontal: 16,vertical: 8)
onTapVoidCallbackNo
backgroundColorColorNoColors.white
borderRadiusdoubleNo4
footerSeparatorVisibleboolNofalse
imageHeightdoubleNo150.0
footerSeparatorWidgetNo
labelWidgetNo


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

ParamTypeisRequiredDefault
navBarItemsListYes
selectedTabColorColorNoColors.red
unselectedTabColorColorNoColors.black54
onTabChangeFunctionYes
backgroundColorColorNo
elevationDoubleNo
selectedIndexintNo0

Available Parameters for NavBarItem

ParamTypeisRequiredDefault
nameStringNo
imageWidgetYes
selectedImageWidgetNo



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

ParamTypeisRequiredDefault
contentWidgetYes
buttonMaterialStatePropertyMaterialStatePropertyNo
buttonElevationDoubleNo0.0
buttonColorColorNo
textColorColorNo
disableButtonColorColorNo
radiusDoubleNo
marginEdgeInsetsNo
paddingEdgeInsetsNo
heightDoubleNo
widthDoubleNodouble.infinity
borderSideBorderSideNo
onPressedVoidCallbackNo


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,
          ),
          "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
ParamTypeisRequiredDefault
itemsList<PhoenixProductItem>Yes
onTapFunctionYes
crossAxisCountintNo4
labelBGColorColorNonull
labelTextColorColorNonull
radiusdoubleNo20.0
PhoenixProductItem
ParamTypeisRequiredDefault
titleStringYes
iconWidgetYes
labelStringNo


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

ParamTypeisRequiredDefault
contextBuildContextYes
popUpContentWidgetWidgetYes
popUpTitleWidgetWidgetNo
ensureWidgetWidgetNoConfirm
cancelWidgetWidgetNo
typeintNo1
dismissOnOutsideTouchboolNofalse
ensureCallbackVoidCallbackNo
cancelCallbackVoidCallbackNo


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

ParamTypeisRequiredDefault
contextBuildContextYes
descriptionStringYes
titleStringNo
primaryButtonLabelStringNo
secondaryButtonLabelStringNo
typeintNo1
barrierDismissibleboolNofalse
directionPhoenixPopupDirectionNorow
spacedoubleNo16
elevationdoubleNo1.0
ensureCallbackVoidCallbackNo
cancelCallbackVoidCallbackNo


PhoenixWebview

PhoenixWebview is a widget to create a webview

PhoenixWebview

Usage Examples

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

Available Parameters

ParamTypeisRequiredDefault
urlStringYes-
titleStringYes-
isForRegistrationboolNofalse
isShowRefreshboolNo-
userAgentStringNo-
bottomNavigationBarWidgetNo-
refreshIconsWidgetNo-
customJavaScriptsStringNo-
navigationDelegateFunctionNo-
isToRunListNo-
noInternetHandlerWidgetNo-


PhoenixBackButton

PhoenixBackButton is a widget to create back button

PhoenixBackButton

Usage Examples

PhoenixBackButton();

Available Parameters

ParamTypeisRequiredDefault
colorColorNo
callbackVoidCallbackNo
sizedoubkeNo28


PhoenixTitle

PhoenixTitle is a widget to create title

PhoenixTitle

Usage Examples

PhoenixTitle(title: "Phoenix Title"));

Available Parameters

ParamTypeisRequiredDefault
titleStringYes
fontSizedoubleNo
fontWeightFontWeightNo
colorColorNo


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

ParamTypeisRequiredDefault
titleStringYes
pageImageWidgetYes
textStyleTextStyleNofontSize: 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

ParamTypeisRequiredDefault
textStringYes
styleTextStyleYes
urlsListNo
shortenButtonLabelStringYes
expandButtonLabelStringYes
maxLinesintNo6
expandableStateChangeCallbackVoidCallbackNo
textCopiedCallbackVoidCallbackNo


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,
      ),
      "Coming Soon"),
  PhoenixProductItem(
      "Tile 8",
      Image.asset(
        "assets/tab_home.png",
        width: 45,
        height: 45,
      ),
      "Coming Soon"),
];

Available Parameters

ParamTypeisRequiredDefault
contextBuildContextYes
titleStringYes
childrenListYes


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

ParamTypeisRequiredDefault
widthdoubleNodouble.infinity
heightdoubleYes
baseColorColorNoColor(0xFFE0E0E0)
shapeBorderShapeBorderNoRoundedRectangleBorder()
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

ParamTypeisRequiredDefault
listSliderListYes
onEventvoid Function(GestureEvent event, int index)No
carouselDurationMsint?No3000
activeColourColorNoColors.white
inActiveColourColorNoColors.black.withOpacity(0.25)
bannerHeightdoubleNo170.0
viewportFractiondoubleNo0.9
fitBoxFitNoBoxFit.cover
indicatorPositionIndicatorPosition {top, bottom}NoIndicatorPosition.bottom

PhoenixSearchbar

PhoenixSearcbar is widget to search

PhoenixSearchbar

Usage Examples

  PhoenixSearchbar(
     hintText: "Search",
     cancelText: "Cancel",
     onCancel: () => Navigator.pop(context),
     onChanged: (value) {
        setState(() {
          result = value;
        });
     },
  )


Available Parameters

ParamTypeisRequiredDefault
hintTextStringNo""
onChangedFunction(String)? onChangedNo
fillColorColorNoColor(0xFFF9F9F9)
enableboolNotrue
fontSizedoubleNo14
cancelTextStringYes
onCancelVoidCallbackYes
isFocusboolNoTrue

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

ParamTypeisRequiredDefault
expendableDataExpendableDataYes-
marginEdgeInsetsGeometryNoEdgeInsets.all(16)
paddingEdgeInsetsGeometryNoEdgeInsets.all(16)
expandColorColorNoColors.white
shrinkColorColorNoColors.grey
radiusdoubleNo-
shrinkImageWidgetNoIcon(Icons.add)
expandImageWidgetNoIcon(Icons.minimize)
showDataboolYesfalse
callbackVoidCallbackYes-

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

ParamTypeisRequiredDefault
warningVisibilityboolYes-
messageWidgetWidgetYes-
errorWidgetWidgetYes-
borderColorColorYes-
backgroundColorColorYes-
marginEdgeInsetsGeometryYes-
paddingEdgeInsetsGeometryYes-
radiusdoubleYes-
spacerHeightdoubleYes-

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

ParamTypeisRequiredDefault
groupListMap<String, ListYes-

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

ParamTypeisRequiredDefault
textEditingControllerTextEditingControllerYes-
validatorVoidCallbackNo-
isErrorboolNofalse
labelStringYes-
errorMessageStringYes-
suffixIconWidgetYes-
obscureTextboolYes-
enabledboolYes-
keyboardTypeTextInputTypeYes-
inputFormattersListYes-
onTapVoidCallbackYes-
autoFillHintsListYes-
descriptionStringYes-
textStyleTextStyleYes-
noErrorSpaceboolYesfalse
focusNodeFocusNodeYes-
backgroundColorColorYes-
hintTextStringYes-

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

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

ParamTypeisRequiredDefault
contextBuildContextYes-
titleStringYes-
childrenListYes-
dismissibleboolNotrue

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

ParamTypeisRequiredDefault
groupListMap<String, ListYes-

Libraries

custom_app_bar
custom_progress_bar
phoenix_back_button
phoenix_banner
phoenix_bottom_menu_uhf
phoenix_bottom_sheet
phoenix_button
phoenix_card
phoenix_dialog
phoenix_dropdown
phoenix_empty_page
phoenix_expandable_content_block
phoenix_expandable_list
phoenix_generic_popup
phoenix_list_group
phoenix_list_group_partition
phoenix_popup
phoenix_product_tiles
phoenix_shimmer
phoenix_text_field
phoenix_title
phoenix_warning
phoenix_webview
phoenix_widgets