phoenix_widgets 1.17.3 copy "phoenix_widgets: ^1.17.3" to clipboard
phoenix_widgets: ^1.17.3 copied to clipboard

Phoenix library collections.

phoenix_widgets #

Phoenix Widgets is widget collections.

Getting Started #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  phoenix_widgets: "^latestVersion"

Import it:

import 'package:phoenix_widgets/phoenix_widgets.dart';

PhoenixCard #

PhoenixCard is widget to create card

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 #

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


PhoenixNavigationCard #

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

PhoenixNavigationCard

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 #

Param Type isRequired Default
icon Widget No
title Widget Yes
description Widget Yes
navigationText Widget No Text('Click Me')
isVisible bool No true
width double No double.maxFinite
padding EdgeInsets No EdgeInsets.only(top: 16, bottom: 16)
callback VoidCallback No
backgroundColor Color No Color(0x10C9B47D)
borderRadius double No 4
icHeight double No 46
icWidth double No 46
icColor Color No Colors.transparent
icBtnBackgroundColor Color No Color(0x10C9B47D)
icBtnColor Color No Color(0x1AC9B47D)
icBtnSize double No 16


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 #

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

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 #

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

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,
          ),
          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
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
routeName String No


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 #

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

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 #

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

PhoenixWebview

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 -
toolbarColor Color No -
specialContainUrl List No -


PhoenixBackButton #

PhoenixBackButton is a widget to create back button

PhoenixBackButton

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

PhoenixTitle

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

PhoenixEmptyPage

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.

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 #

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

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

Available Parameters #

Param Type isRequired Default
context BuildContext Yes
title String Yes
children List Yes
margin EdgeInsets No
padding EdgeInsets No
elevation double No 0


PhoenixBottomSheetTile #

PhoenixBottomSheetTile is a widget to show bottom sheet with tiles

PhoenixBottomSheetTile

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 #

Param Type isRequired Default
context BuildContext Yes
title String Yes
style TextStyle No TextStyle(color: Color(0xFF212124), fontSize: 16,fontWeight: FontWeight.w500,)
spacing EdgeInsetsGeometry No EdgeInsets.only(bottom: 16.0)
padding EdgeInsetsGeometry No EdgeInsets.only(top: 16, bottom: 58,)
child Widget Yes


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 #

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

PhoenixSearchbar

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 #

Param Type isRequired Default
hintText String No ""
fillColor Color No Color(0xFFF9F9F9)
borderColor Color No Color(0xFFF9F9F9)
enabled bool No true
isFocus bool No true
radius double No 0
spaceBetween double No -
actionWidget Widget No -
searchIcon Widget No Icon(Icons.search, size: 24, color: Color(0xff75767A),)
textEditingController TextEditingController No TextEditingController()
hintTextStyle TextStyle No TextStyle(color: Color(0xff75767A), fontSize: 14,)
padding EdgeInsets No EdgeInsets.zero
onWidgetTap VoidCallback No -
onChanged Function(String) No -

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 #

Param Type isRequired Default
expendableData ExpendableData Yes -
margin EdgeInsetsGeometry No EdgeInsets.all(16)
padding EdgeInsetsGeometry No EdgeInsets.all(16)
titlePadding EdgeInsetsGeometry No EdgeInsets.zero
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

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 #

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

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 #

Param Type isRequired Default
groupList Map<String, List Yes -
hideLastDivider bool No false

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 #

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 -
disableTextStyle TextStyle Yes -
noErrorSpace bool Yes false
focusNode FocusNode Yes -
backgroundColor Color Yes -
hintText String Yes -

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 Yes -
onChanged Function(T?) No -

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 #

Param Type isRequired Default
context BuildContext Yes -
title String No -
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

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 #

Param Type isRequired Default
groupList Map<String, List Yes -

PhoenixTabView #

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

PhoenixExpandableList

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 #

Param Type isRequired Default
tabs Map<String, String> Yes -
builder Widget Fn(BuildContext, String) Yes -
currentIndex int No -
menuBackgroundColor Color No -
menuPadding EdgeInsets No -
onTabChange void Fn(int index) No -
indicatorColor Color No -
labelColor Color No -
unselectedLabelColor Color No -
labelStyle TextStyle No TextStyle( fontSize: 16,fontWeight: FontWeight.w500)
unselectedLabelStyle TextStyle No TextStyle( fontSize: 16,fontWeight: FontWeight.w500)
tabController TabController No -

PhoenixSearchNoContent #

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

PhoenixSearchNoContent 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 #

Param Type isRequired Default
icon Widget Yes
title Widget Yes
subtitle Widget Yes

PhoenixChip #

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

PhoenixChip 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 #

Param Type isRequired Default
title Widget Yes
items List Yes
callback Function(int index) Yes
backgroundChipColor Color No
lineChipWidth double No
outlinedChipColor Color No
chipTextPadding EdgeInsets No
chipPadding EdgeInsets No
chipSpacing double No
chipTextStyle TextStyle No

PhoenixListviewText #

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

PhoenixListviewText 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 #

Param Type isRequired Default
contents List Yes
title Widget Yes
radiusContentsBox Radius No
seperatorSpace double No
seperatorColor Color No
outlineBoxContentsColor Color No
boxContentsColor Color No
action Widget No
callback Function(int index) No

PhoenixCheckbox #

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

PhoenixCheckboxPage

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 #

Param Type isRequired Default
isChecked bool No false
onChange dynamic Function(bool) Yes
checkedIcon Widget No SvgPicture.asset('assets/images/ic_check.svg', package: 'phoenix_widgets')
uncheckedIcon Widget No SvgPicture.asset('assets/images/ic_uncheck.svg', package: 'phoenix_widgets')

PhoenixMore #

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

PhoenixMorePage

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 #

Param Type isRequired Default
title String Yes
onTap VoidCallback No
titleStyle TextStyle No TextStyle(color: Color(0xFF00B3AF), fontSize: 16, fontWeight: FontWeight.w500),

PhoenixEndOfSection #

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

PhoenixEndOfSectionPage

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 #

Param Type isRequired Default
label String Yes
logoImage Widget No SvgPicture.asset('assets/images/logo_grey.svg', package: 'phoenix_widgets');
labelStyle TextStyle No TextStyle(color: Color(0xFFE0E0E0), fontWeight: FontWeight.w300, fontSize: 12)

PhoenixTick #

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

PhoenixTickPage

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 #

Param Type isRequired Default
isTicked bool No false
tickedIcon Widget No SvgPicture.asset('assets/images/ic_ticked.svg', width: 24, height: 24, package: 'phoenix_widgets');
untickedIcon Widget No SvgPicture.asset('assets/images/ic_unticked.svg', width: 24, height: 24, package: 'phoenix_widgets');
crossFadeDuration Duration No Duration(milliseconds: 300)