GF Flutter Widgets Features

GF Flutter Widgets Feature List

button

Flutter Buttons Widgets 

Flutter Button widgets is a clickable UI widget that is triggered and does the action of routing to the desired page. In GF Flutter Buttons we have more than 20 variants that you can use in any flutter app development.

  • Flutter Solid Button.
  • Flutter Icon Button
  • Flutter Social Button
  • Flutter Outline and their 2X variant button.
  • Flutter Transparent button.
  • Flutter Flat button.
  • Custom size properties (small , normal, large).
  • Custom shapes  Properties (pills/rounded, square)
View Flutter Buttons Widgets

Flutter Badge Widgets 

Flutter Badge widgets gives the number of active notification that is in the application. GF Badges come with different color. In our demo app we have added badge with button and icon.

  • Add badge with icon.
  • Add badge with button.
  • Add badge with button.
  • Badge can add with list or tile widget.
  • Badges come in different Shape (square , rounded and default ).
View Flutter Badge Widgets
Badge
Avatar

Flutter Avatar Widgets 

Flutter Avatar is a UI widget that is basically used to display the profile picture and can be used with any other widget.

  • GF Avatar comes with multiple variants.
  • The backgroundColor can be used to change the backgroundColor of the image.
  • In our example code we have used in tile and card widget.
  • You can raise request if you want more options with it.
View Flutter Avatar Widgets

Flutter Image Widgets 

Flutter Images are the widgets that manages the assets images in the application. The widget has 4 types of images basic images, circular, round or overlay.

  • Flutter images can used in card or list.
  • Asset, network images can be used.
  • You can build any product list easily with existing widget.
  • You can choose the images type based on your design.
  • Light , medium and strong overlay you can add on images.
  • Circular property image to display user profile
View Flutter Image Widgets
image
card

Flutter Card Widget

Flutter card can be used to give information about the application. GF libraries comes with ready-to- use 10+ card straightway in any of your flutter app project. Any customization also can be done according to the need.

  • Basic card can be used in product list.
  • Add avatar or icon in card
  • We have full images card as well.
  • Overlay Card with text on it.
  • Easy to customize card.
  • Suggest if you required more variant in card.
View Flutter Card Widget

Flutter Carousel Widget

GF Carousel can use to show slideshow for product, list or card etc. We have 2-3 different types of slider to use in your app.

  • Basic carousel.
  • Supports multiple images in a single slide.
  • Use images and text or call to action.
  • Use color or gradient with slide.
  • Slider will support product or list slide.
View Flutter Carousel Widget
carousel
tile

Flutter ListTile Widget

Flutter Tile is used to show the ListView in the app. You can use our other widget easily with tile like Avatar , Typography , icon or button.

  • We have pre built 4 types of tile.
  • Tile with title and subtitle and link.
  • Use avatar in Tile with title and subtitle.
  • In tile you can add any icon or button too.
  • Request if you have any idea.
View Flutter ListTile Widget

Flutter Tab Widget

GF Tabs are easy to configure with multiple options like text based Tab or just Icon based tab and  can even be combined too. We add more combination on this in coming release.

  • Multiple color variant in tab.
  • Used icon or text and even both.
  • Tab can used in BottomBar as well.
  • You can use Tab for show multiple category.
View Flutter Tab Widget
tab
toast

Flutter Toast Widget

GF Toasts are designed for showing notifications like info, alert etc to display the message above the screen.

  • GF Toast can be used in any component
  • Common Toast has a message with square corners.
  • Toast with button is used to show message with close button
  • Auto Dismissible Toast will be disabled after a certain period of time.
  • We are soon adding more widget or you can suggest few.
View Flutter Toast Widget

Flutter Toggle Widget

The GFToggles are used to chane the state to ON/OFF. GF Toggle have a set of toggles that allows user to set a value to true or false by enabling & disabling the switch by slide.

  • GF Toggles have multiple colors
  • IOS Toggles used with rounded corners
  • Square Toggles are designed without border radius
  • Toggles with some border radius can be used for android
  • Custom Toggles are used with some text on it like ON-OFF
View Flutter Toggle Widget
toggle
typography

Flutter Typography

The Typography is used to make the arrangements of letters in a clean. You can't design your app without proper text format and design. Currently we have Header in our typography property, but soon we are adding general text styling.

  • You can use GF typography in any component. .
  • All color variant can import in typography.
  • Currently we have H1 , H2 , h2 , H4 , H5 variant.
  • You can use all above with lighter color text as well.
  • We are soon adding more text widget or you can suggest few.
View Flutter Typography

Flutter Drawer Widget

Drawer can be referred as side menu & is used to show all the menu items & user details. It slides from left to right but can be customized .

  • Background color can be set according to requirement
  • Menu list items for page routing
  • User Image, Name, Email displayed
  • Multi user accounts visible at top right of drawer
  • Logout bar at bottom is fixed to getting logged out from app.
View Flutter Drawer Widget
drawer
accordion

Flutter Accordion Widget

GF Accordion is a component used to expand/collapse a child element. It is very useful when there is too much data displayed on a page and can be opened/closed on click.

  • We can hide a collection of info from page.
  • The hidden info will be shown only on tapp.
  • GF accordion has different styles
  • Accordion with icons used with open/close icons.
  • Accordion with text used to open/close according to need.
View Flutter Accordion Widget

Flutter Alert Widget

GF Alert is a dialog used to show message or some information. It is used to show or get some info from user & can only be closed after user's action.

  • GF Alert have Basic, Round & Full width Alert.
  • Basic alerts has some info with square corners.
  • Rounded alerts has some info with rounded corners.
  • Full width alerts can be used to show the info in full width.
  • It can only be closed when user acts on the alert message.
View Flutter Alert Widget
alert
appbar

Flutter AppBar Widget

GF Appbar has a rich combination of elements. It is the top section of a page that shows the title of the page & can also be used to contain other components like, Searchbar, Icons, User images & many more

  • GF Appbar can be customized by simply giving needed attributes
  • Search component is also included with search features.
  • Collapse Drawer icon is fixed to open/close menu items.
  • Titles & icons can to shown.
View Flutter AppBar Widget

Flutter Search Bar

GF Searchbar is an advanced form of inputs that allows us to get the result from a collection. A clear button appears at right just after we search anything and the results can be cleared after tapping the clear button.

  • GF Searchbar can be used inside Appbar or in any page.
  • It shows the result in list view just below the Searchbar.
  • It can be customized very easily to change border colors, radius or many others.
  • Small clear button to clear all the filters.
View Flutter Search Bar
searchbar
rating

Flutter Rating Widget

GF Rating gets user's input in the form of number of stars that a user gives in between 0 to 5. It rates the value of the service, product etc.

  • GF Rating can be customized by simply giving needed attributes
  • GF Rating has 3 star icons : Empty star, Half Star, Full Star.
  • Sizes & colors can be customized
  • GF Rating works as a 2 way channel where value can be set by tapping stars or stars can be set by typing a value in input field.
View Flutter Rating Widget

Flutter Loader Widget

Flutter Loader is also referred as spinner & is used to display a functioning icon rotating or moving in clockwise direction to allow use to wait for a while until response comes. It indicates the progress of a request. GF Loaders has a combination of different shaped loaders.

  • Used as a progress indicator
  • Colors, Sizes can be customized.
  • Gif's, Png's can be used basically as icons.
  • There are five different types of loaders namely android , ios, circle, square and custom loaders.
View Flutter Loader Widget
loader
floating widget

Flutter Floating Widget

Flutter Floating Widget is used to show the alerts or popus with messages or errors. It is used in the Scaffold's body.

  • The alerts, popups can be positioned anywhere on the screen.
  • The blurness of the screen when showing the messages can be controlled.
  • The color of the blurness can be changed.
View Flutter Floating Widget

Flutter Dropdown Widget

Flutter Dropdown is used to select one option from a given set of items in a list. It contains a arrow button to for the purpose of showing the list.

  • Flutter Dropdown has multiselect wherein multiple option can be selected.
  • The arrow icon can be changed according to the need.
  • Dropdown list color can be changed.
View Flutter Dropdown Widget
dropdown
progressbar

Flutter Progress Bar

GFProgressBar tells the percentage of work done on a given task. It is useful to track the amount of work done.

  • It comes with different shapes, linear, circular progress bar.
  • It can be customised by adding the texts in the progress bar.
  • leading and trailing ions can be added.
View Flutter Progress Bar

Flutter Shimmer

The GFShimmer gives a shimmery effect for any widget to show that some data is about to load.It is basically used as a classy effect for any widgets.

  • Color gradient can be used to give more look and feel.
  • The speed of the effect can be controlled.
  • The direction of the effect can be set ie, from LTR or RTL.
View Flutter Shimmer
shimmer
animation

Flutter Animation

GFAnimation gives a smooth look and feel to the user. It make the UI interface very user-friendly.

  • It has several types of animation.
  • The duration of the animation can be controlled.
  • The reverse animation duration can be set.
View Flutter Animation

Flutter Border 

Flutter Border  is a thin lining around any widget that has four sides.

  • Border has different types, solid, dotted, dashed.
  • It has oval shape where text can be placed inside the oval.
  • The circular border gives circle shaped border.
View Flutter Border
border
bottomsheet

Flutter BottomSheet Widget 

GFBottomSheet slides from the bottom of the screen to give a piece of information and the other functions will be disabled on the respective screen.

  • It has a expandable content.
  • The height of the content can be controlled.
  • The Sticky header is used as the header of bottomsheet.
  • The drag animation of sheet can be controlled.
View Flutter BottomSheet Widget

Flutter CheckBoxListTile 

A GFCheckBoxListTile is used to select multiple options from the list given using the checkbox that is provided for checking or unchecking the box.

  • It can be used with Avatar.
  • It can be used simply with title and description.
  • The size of checkbox can be changed.
  • It has 4 types of checkbox.
View Flutter CheckBoxListTile
checkboxlisttile
checkbox

Flutter CheckBox 

A checkbox is a button that is used to select a option from a group of them. It is selected or unselected according to the need..

  • The size of checkbox can be changed.
  • It has 4 types of checkbox.
  • The icon can be changed when selected or unselected.
  • The background color of the button can be changed.
View Flutter CheckBox

Flutter RadioListTile 

A GFRadioListTile is used to select only one options from the list given using the radio that is provided for checking  the box.

  • It can be used with Avatar.
  • It can be used simply with title and description.
  • The size of radio can be changed.
  • It has 4 types of radiobutton.
  • The position of the radio can be changed ie, right or left on the screen.
View Flutter RadioListTile 
radiolosittile
radiobox

Flutter Radio 

A RadioButton is a button that is used to select only one option from a group of them. It is selected or unselected according to the need.

  • The size of radio can be changed.
  • It has 4 types of radiobutton.
  • The shape of the radio can be changed  like basic, square, or custom type
  • Icons can be used for selecting or unselecting to show the process.
View Flutter Radio

Flutter IntroScreen Widget 

A GFIntroscreen gives the introduction pages of the app and it briefly describes about the app. It can even be login pages.

  • It can have any number of screens which slides to give information.
  • It can be used at the bottom of the screen.
  • The color of the navigation bar can be controlled.
  • BottomNavigation bar shape can be changed.
View Flutter IntroScreen Widget
introscreen
sticky header

Flutter StickyHeader Widget 

A GFSticky Header is a header that is placed at the top of the screen. It has a scrollable content but the header remains fixed at the top.

  • The axis direction can be changed ir, vertical or horizontal.
  • The position of the sticky header allows on, how the header should be placed.
View Flutter StickyHeader Widget
Top