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

PhoenixNavigationCard

PhoenixNavigationCard is a widget to create a card that has a navigation button

Usage Examples

PhoenixNavigationCard(
isVisible: false,
icon: SvgPicture.asset(
"assets/education.svg",
width: 46,
height: 46,
),
title: Text(
"Title",
style: Theme.of(context).textTheme.headline6,
),
description: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elite!",
style: Theme.of(context).textTheme.bodyText2,
),
callback: () {},
navigationText: Text(
"Click Here",
style: Theme.of(context).textTheme.bodyText2,
),
),

Available Parameters

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

Available Parameters for NavBarItem

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

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,
          ),
          label: "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,
        ),
        label: "Coming Soon")
  ]
)

Available Parameters

PhoenixProductTiles

PhoenixProductItem

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

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

PhoenixWebview

PhoenixWebview is a widget to create a webview, for special specialContainUrl, it will use android custom_tabs or safari view controller for ios to handle if url changes contain webpage that is needed to open in native view

Usage Examples

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

Available Parameters

PhoenixBackButton

PhoenixBackButton is a widget to create back button

Usage Examples

PhoenixBackButton();

Available Parameters

PhoenixTitle

PhoenixTitle is a widget to create title

Usage Examples

PhoenixTitle(title: "Phoenix Title"));

Available Parameters

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

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

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

Available Parameters

PhoenixBottomSheetTile

PhoenixBottomSheetTile is a widget to show bottom sheet with tiles

Usage Examples

// Wrap with the statefulWidget
final PhoenixBottomSheetTile _bottomSheetHowItWorks =
PhoenixBottomSheetTile();

@override
Widget build(BuildContext context) {
  return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Bottom Sheet Tile Sample'),
      ),
      body: Center(
          child: ElevatedButton(
            child: const Text("Show All Products"),
            onPressed: () {
              _bottomSheetHowItWorks(
                context,
                spacing: const EdgeInsets.only(bottom: 16.0),
                padding: const EdgeInsets.only(
                  top: 16,
                  bottom: 58,
                ),
                title: 'Title of bottom sheet',
                style: const TextStyle(
                  color: Color(0xFF212124),
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
                child: CustomScrollView(
                  shrinkWrap: true,
                  slivers: [
                    PhoenixProductTiles(
                      onTap: (index) {},
                      items: _items,
                    )
                  ],
                ),
              );
            },
          )));
}

  // Sample of data to pass
  final List<PhoenixProductItem> _items = [
  PhoenixProductItem(
      "Tile 1",
      SvgPicture.asset(
        "assets/education.svg",
        width: 46,
        height: 46,
      )),
  PhoenixProductItem(
  "Tile 2",
  SvgPicture.asset(
  "assets/education.svg",
  width: 46,
  height: 46,
  )),
  PhoenixProductItem(
  "Tile 3",
  SvgPicture.asset(
  "assets/education.svg",
  width: 46,
  height: 46,
  ),
  label: "Coming Soon"),
  PhoenixProductItem(
  "Tile 4",
  SvgPicture.asset(
  "assets/education.svg",
  width: 46,
  height: 46,
  ),
  label: "Coming Soon"),
  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,
  ),
  label: "Coming Soon"),
  PhoenixProductItem(
  "Tile 8",
  Image.asset(
  "assets/tab_home.png",
  width: 45,
  height: 45,
  ),
  label: "Coming Soon"),

Available Parameters

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

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

PhoenixSearchbar

PhoenixSearcbar is widget to search

Usage Examples

    PhoenixSearchbar(
        hintText: "Search",
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        enabled: true,
        actionWidget: TextButton(
        onPressed: () {
          showSnackBar("Cancel");
        },
        child: const Text(
            "Cancel",
                style: TextStyle(
                    color: Color(0xFF67C1BF),
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                ),
            ),
        ),
        radius: 24,
        onChanged: (value) {
            setState(() {
                result = value;
            });
        },
    ),

Available Parameters

PhoenixExpandableList

PhoenixExpandableListPage is widget to show the with with expandable function

Usage Examples

    PhoenixExpandableList(
        expendableData: expendableData[i],
        margin: contentMargin ?? const EdgeInsets.only(top: 8, bottom: 16),
        contentMargin: const EdgeInsets.all(16),
        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

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

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

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

PhoenixDropdown

PhoenixDropdown is widget to dynamically create a dropdown

Usage Examples

    PhoenixDropdown<SampleData>(
        label: 'Title',
        value: sampleDataList[0],
        errorMessage: 'Error choose',
        errorTextStyle: TextStyle(fontSize: 12),
    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

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',
              padding: EdgeInsets.zero,
              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

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

PhoenixTabView

PhoenixTabView is widget to display tabs menu active label on the center

Usage Examples

      final _tabs = {
  'tab1': 'Tab1',
  'tab2': 'Tab2',
  'tab3': 'Tab3',
  'tab4': 'Tab4'
};
      PhoenixTabView(
        tabs: _tabs,
        builder: (BuildContext context, String id) {
          return Center(child: Text(_tabs[id]!));
        },
      ),

Available Parameters

PhoenixSearchNoContent

PhoenixSearchNoContent is a widget to create a card that show searched is don't have any content

S

Usage Examples

@override
Widget build(BuildContext context){
  return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Search No Content Sample App'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          PhoenixSearchNoContent(
            title:const Text('Start Searching',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),),
            icon: SvgPicture.asset(
              "assets/umrah_guide.svg",
            ),
            subtitle: const Text('using relevant keywords',style: TextStyle(fontSize: 14,fontWeight: FontWeight.w400),),
          ),
        ],
      )
  );
}

Available Parameters

PhoenixChip

PhoenixChip is a widget to create a card that show suggestion chip when click on the search bar

S

Usage Examples

class _PhoenixButtonPage extends State<PhoenixChipPage> {
  final PhoenixDialog _bottomSheetHowItWorks = PhoenixDialog();
  final List<String> _items = [
    "Ihram",
    "Before Ihram",
    "During Ihram",
    "After Ihram"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Chip Sample'),
      ),
      body: PhoenixChip(
        title: const Padding(
          padding: EdgeInsets.only(top: 16, left: 16),
          child: Text(
            'Discover',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
          ),
        ),
        items: _items,
        callback: (int index) {
          _bottomSheetHowItWorks(
              context,
              title: _items[index],
              children: []);
        },
        chipTextStyle: const TextStyle(fontSize: 14,fontWeight: FontWeight.w400),
        outlineChipColor: Colors.grey,
        backgroundChipColor: Colors.white,
        lineChipWidth: 1,
        chipTextPadding:
        const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
        chipPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        chipSpacing: 8,
      ),
    );
  }
}

Available Parameters

PhoenixListviewText

PhoenixSearchNoContent is a widget to create a card that show listview Text when search

S

Usage Examples

@override
Widget build(BuildContext context) {
  return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Listview Text Sample'),
      ),
      body: const PhoenixListviewText(
        title: Text('Suggestion',
          style: TextStyle(fontWeight: FontWeight.w400,
              fontSize: 16),
        ),
        contents: [Text('Ihram',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400),),
          Text("Before Ihram",style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400)),
          Text("After Ihram",style: TextStyle(fontSize: 16,fontWeight: FontWeight.w400)),
        ],
      )
  );
}

Available Parameters

PhoenixCheckbox

PhoenixCheckbox is a widget for showing a checkbox that can be checked and unchecked.

Usage Example

class Page extends State<Page> {
  bool isCheckboxChecked = false;

  void onCheckboxChange(bool value) {
    setState(() {
      isCheckboxChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PhoenixCheckbox(
                isChecked: isCheckboxChecked,
                onChange: onCheckboxChange,
                checkedIcon: SvgPicture.asset('assets/ic_check.svg'),
                uncheckedIcon: SvgPicture.asset('assets/ic_uncheck.svg'),
              )
            ],
          ),
        ],
      ),
    );
  }
}

Available Parameters

PhoenixMore

PhoenixMore is a labelled button that tells the user that there is more to be done or seen after tapping the button.

Usage Example

class Page extends StatelessWidget {
  Page({ super.key })

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              PhoenixMore(title: 'Read more')
            ],
          ),
        ],
      )
    );
  }
}

Available Parameters

PhoenixEndOfSection

PhoenixEndOfSection is a widget to let the user know that they have reached the end of a section.

Usage Example

class Page extends StatelessWidget {
  Page({ super.key })

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              PhoenixEndOfSection(
                label: 'End of the section',
                logoImage: SvgPicture.asset('assets/logo.svg'),
              ),
            ],
          ),
        ],
      )
    );
  }
}

Available Parameters

PhoenixTick

PhoenixTick is a tick that can be shown as ticked or unticked.

Usage Example

class Page extends StatelessWidget {
  Page({ super.key })

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              PhoenixTick(
                isTicked: true,
              )
            ],
          ),
        ],
      )
    );
  }
}

Available Parameters

PhoenixImageEaseOutFade

PhoenixImageEaseOutFade is a widget that show two image with ease in and fade out animation

Usage Example

class PhoenixImageEaseOutPage extends StatelessWidget {
  const PhoenixImageEaseOutPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Image Ease Out Fade'),
      ),
      body: const PhoenixImageEaseOutFade(
        imageListCollection: [
          "https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_twitter-128.png",
          "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/387_Xbox_logo-512.png",
          "https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/272/Google_2015_logo-512.png",
          "https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png",
          "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/395_Youtube_logo-512.png",
          "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-512.png",
          "https://cdn2.iconfinder.com/data/icons/social-media-2421/512/TikTok-512.png",
        ],
        durationMiliseconds: 1500,
        imagePadding: EdgeInsets.all(16),
      ),
    );
  }
}

Available Parameters

PhoenixRichTextHandler

PhoenixRichTextHandler is a widget that designed to display and render HTML content or rich text.

Usage Example

class PhoenixRichTextHandlerPage extends StatelessWidget {
  const PhoenixRichTextHandlerPage({super.key});

  @override
  Widget build(BuildContext context) {
    String? htmlContent = '''
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <hr /> <p>Image Banner</p> <a href="https://ikhlas.com/umrah/ms/my/" target="_blank" ><img src="https://images.contentstack.io/v3/assets/blt2a130c768c36b9df/blt172035f00f6ae58a/657985e9a794f21a9f4af11a/Panduan_Melaksanakan_Ibadah_Umrah.jpg" width="100%" height="auto" style="text-align: left" /></a> <br /><p> Text - Participate in our contest <i>  for an opportunity  to embark on an <u>Umrah</u> journey</i> with <strong> ikhlas.com</strong> </p> <p> Text with inline logo - 📣 Don't miss the chance to win Umrah 🕋 </p> <hr /> <p>Quote</p> <blockquote cite="https://www.huxley.net/bnw/four.html" style="text-align: center" > <p style="text-align: center"> The Closest Of People To Me On Judgment Day, Will Be Those Who Sent Most Salawat (Blessings) Upon Me </p> <footer>— Muhammad SAW</footer> </blockquote>  <hr /> <div class="outer-container"> <div class="item"> Webview for iframe elements <div class="container"> <iframe class="responsive-iframe" src="https://www.instagram.com/p/CwnNVaOqudj/embed" ></iframe> </div> </div> </div>
  ''';
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Phoenix Rich Text Handler'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.fromLTRB(16, 40, 16, 40),
        child: RichTextHandler(content: htmlContent),
      ),
    );
  }
}

Available Parameters

PhoenixPdf

PhoenixPdf is a widget for displaying PDF files from both URLs and local file paths. It supports sharing capabilities and provides a customizable viewing experience.

Usage Examples

PhoenixPdf(
  url: "https://example.com/sample.pdf", // URL to PDF file
)

// Or with local file path
PhoenixPdf(
  url: "/path/to/local/file.pdf",
)

Available Parameters

Features:

• Supports both remote URLs and local file paths
• Built-in sharing capability
• Automatic handling of PDF loading states
• Error handling and display
• Custom view options (fit policy, page fling, etc.)
• Responsive layout