GetWidget UI Kit

repository·master·Indexed 26 days ago

https://github.com/ionicfirebaseapp/getwidget

An open-source UI Kit for Flutter providing over 1,000 production-ready, themable widgets for mobile and web development. It includes components such as GFButton, GFCard, GFCarousel, GFToast, and GFAvatar, designed to be additive and compatible with standard Material and Cupertino widgets. Requires Dart SDK >=2.12.0 <4.0.0 and targets the Flutter stable channel.

Tokens
2.6K
Snippets
3
Records
20
Agent score
89%

What's inside GetWidget

  1. Overview of GetWidget UI Kit

    master
    GetWidget is an open-source Flutter UI Kit providing over 1,000 production-ready, themable widgets. It is designed to be additive, meaning you can mix GF* widgets with standard Material and Cupertino widgets in the same application. It covers common UI patterns such as buttons, cards, carousels, forms, avatars, and more, all following a consistent design language and prop convention.
  2. Customize iOS Launch Screen Assets

    master

    To customize the iOS launch screen, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a visual approach.

    Using Xcode:

    1. Open the iOS workspace using the command: open ios/Runner.xcworkspace.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog.
    open ios/Runner.xcworkspace
  3. GetWidget Compatibility and Requirements

    master

    To use GetWidget, ensure your environment meets the following requirements:

    • Dart SDK: >=2.12.0 <4.0.0 (supports null-safety).
    • Flutter: Targets the Flutter stable channel. Version v7.0.0+ is tested against Flutter 3.35.0 and newer.
    • License: MIT License (free for personal and commercial use).
  4. Available GetWidget Components

    master

    GetWidget includes a wide variety of pre-built components to speed up UI development. Key components include:

    • Buttons & Actions: GFButton (Button), GFSearchbar (Searchbar)
    • Feedback & Overlays: GFBadge (Badge), GFToast (Toast), GFAlert (Alert), GFDrawer (Drawer), GFAccordion (Accordian)
    • Layout & Containers: GFCard (Card), GFTile (Tile), GFAppbar (Appbar), GFCarousel (Carousel)
    • Media & Identity: GFAvatar (Avatar), GFImage (Image)
    • Navigation & Selection: GFTab (Tab), GFToggle (Toggle)
    • Content: GFTypography (Typography)
  5. GetWidget Widget Collection Reference

    master

    GetWidget provides a wide array of pre-composed widgets. Common categories include:

    • Buttons: GFButton, GFElevatedButton, GFRoundedButton (Pills), GFSquareButton, GFIconButton, GFSocialButton.
    • Display & Layout: GFBadge, GFAvatar, GFImage, GFCard, GFCarousel, GFTile, GFTab, GFAppBar, GFDrawer, GFBottomsheet, GFStickyHeader.
    • Input & Selection: GFSearchbar, GFDropdown, GFCheckbox, GFCheckboxListTile, GFRadio, GFRadioListTile, GFSwitchToggle.
    • Feedback & Status: GFToast (Toaster), GFLoader, GFProgressBar, GFShimmer, GFAlert, GFRating.
    • Navigation & Structure: GFAccordion, GFFloatingWidget, GFBorder, GFTypography.
  6. Retrieve selected items from GfMultiCheckboxData

    master

    The GfMultiCheckboxData class provides three methods to query the current selection state:

    • getlist(): Returns the full list of CheckboxData objects (containing both text and selected status).
    • getlistselected(): Returns a List<String> containing only the text labels of the currently selected items.
    • getlistselectedindx(): Returns a List<int> containing the indices of the currently selected items.
  7. Configure DashedType custom painter

    master

    Use the DashedType class to create custom dashed borders in Flutter. It allows you to define the thickness, dash pattern, color, and shape of the border. You can also provide a customPath using a PathBuilder function to draw non-standard shapes.

    Parameters

    • strokeWidth: The thickness of the border.
    • dashedLine: A List<double> defining the dash/gap pattern (e.g., [3, 1] means 3 units of line followed by 1 unit of gap).
    • color: The color of the border.
    • type: The shape of the border using GFBorderType (circle, rRect, rect, or oval).
    • radius: The Radius used when type is GFBorderType.rRect.
    • customPath: An optional PathBuilder function (Size) -> Path to define a custom shape.
  8. Manage multi-chip selection with GfMultiChipSelectData

    master

    The GfMultiChipSelectData class is a ChangeNotifier used to manage the state of a multi-chip selection widget. It handles the selection status of a list of string values, allows for pre-selecting specific items by index, and provides methods to retrieve the currently selected values or their indices.

    Constructor Parameters

    • values: A List<String> containing the text for each chip.
    • lableStyle: (Optional) A TextStyle for the label.
    • selectedColor: (Optional) A Color applied to selected chips.
    • unselectedColor: (Optional) A Color applied to unselected chips.
    • preselected: (Optional) A List<int> containing the indices of the chips that should be selected by default.
  9. Use GFDrawerHeader for material design drawer headers

    master

    The GFDrawerHeader is a Material Design drawer header used to identify the app's user. It requires a Material widget ancestor. It supports background decoration, account pictures, and custom child widgets.

    Key Properties:

    • decoration: The header's background. Defaults to the current theme's primaryColor if null.
    • margin: The margin around the header. Defaults to EdgeInsets.only(bottom: 8).
    • currentAccountPicture: A widget (typically a CircleAvatar) representing the current user, placed in the upper-left.
    • otherAccountsPictures: A list of up to three widgets (typically CircleAvatars) representing other accounts, arranged in the upper-right.
    • centerAlign: If true, the currentAccountPicture is center-aligned instead of bottom-left aligned.
    • child: A widget placed inside the header, inset by padding.
    • duration & curve: Controls the animation of the decoration.
    • closeButton: A custom widget to handle closing the drawer.