How to Start Flutter App and UI Design with Getwidget

Getwidget is a flutter UI widget library to start your app design quickly and save lots of time with our flutter UI design guideline.

How to use Getwidget tool in flutter app design

getwidget is a flutter custom UI design that you can use to build any flutter interface design as this library is compatible with flutter adaptive design also called responsive design. In this, we explain the basics of flutter screen design using this library on how to use it in flutter mobile app design. We have built more than 100 premium flutter app templates with readymade components that save lots of time for a flutter UI designer. the major advantage is flutter native performance compared to other frameworks like react-native.

Flutter Button UI Design

Flutter Button UI Design

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. This documentation helps flutter UI designer to create any custom button.

  • 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)
Flutter Buttons Widget Design Docs

Flutter Badge UI Design

Flutter Badge widgets give the number of active notification that is in the application. GF Badges come in a different color. In our demo app, we have added a badge with a button and icon. Their many flutter UI design examples are available in our Docs and Blog.

  • Add badge with an icon.
  • Add badge with the button.
  • Add badge with the button.
  • A badge can add with a list or tile widget.
  • Badges come in different shapes (square, rounded, and default ).
View Flutter Badge Widget Design Docs
Flutter Badge UI Design
Flutter Badge UI Design

Flutter Avatar UI Design

Flutter Avatar is a UI widget that is used to display the profile picture and can be used with any other widget. You can use it for customer profile interface design for your flutter mobile app design.

  • GF Avatar comes with multiple variants and supports flutter responsive UI.
  • The backgroundColor can be used to change the backgroundColor of the image.
  • In our example code, we have used the tile and card widget.
  • You can raise a request if you want more options with it.
View Flutter Avatar Widget Design Docs

Flutter Image Design

Flutter Images are the widgets that manage the assets images in the application. The widget has 4 types of images basic images, circular, round, or overlay. This widget is a flutter design custom UI to build any widget that includes the image in your flutter mobile app design.

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

Flutter Card UI Design

A flutter card can be used to give information about the application. GF libraries come with ready-to-use 10+ cards straightway in any of your flutter app projects. Any customization also can be done according to the need. The card is the most used widget for flutter interface design in your mobile app.

  • A basic card can be used in the product list.
  • Add avatar or icon in the card
  • We have full images card as well.
  • Overlay Card with text on it.
  • Easy to customize the card.
  • flutter adaptive design support.
  • Suggest if you required more variants in the card.
View Flutter Card Widget Design Docs

Flutter Carousel Design

GF Carousel can use to show slideshow for products, list cards, etc. We have 2-3 different types of sliders to use in your app. This is a flutter custom UI design widget of getwidget that you can use on home flutter screen design etc.

  • Basic carousel.
  • Supports multiple images in a single slide.
  • Use images and text or call to action.
  • Use color or gradient with slide.
  • A slider will support the product or list slide.
View Flutter Carousel Widget Design Docs
Flutter Carousel Design
Flutter ListTile Design

Flutter ListTile Design

ListTile widget is flutter material design Tile is used to show the ListView in the app. You can use our other widget easily with tiles like Avatar, Typography, icon, or button. This library help with Flutter user interface design for your flutter app design.

  • 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 design Docs

Flutter Tab Design

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 combinations on this incoming release. This library gives more flexibility compared to any flutter UI design tool.

  • Multiple color variants in tab.
  • Used icon or text and even both.
  • A tab can be used in BottomBar as well.
  • You can use Tab to show multiple categories.
View Flutter Tab Widget Design Docs
Flutter Tab Design
Flutter Toast Design

Flutter Toast Design

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 flutter component.
  • Common Toast has a message with square corners.
  • Toast with the button is used to show a message with a close button
  • Auto Dismissible Toast will be disabled after a certain period.
  • We are soon adding more flutter UI design examples.
View Flutter Toast Widget Design Docs

Flutter Toggle Design

The GF Toggles are used to change the state to ON/OFF. GF Toggle has a set of toggles that allows users 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 them it like ON-OFF
View Flutter Toggle Widget Design Docs
Flutter Toggle Design
Flutter Typography

Flutter Typography

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

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

Flutter Drawer Design

A Flutter Drawer can be referred to as a 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 the requirement
  • Menu list items for page routing
  • User Image, Name, Email displayed
  • Multi-user accounts are visible at the top right of the drawer
  • The logout bar at the bottom is fixed to getting logged out from the app.
View Flutter Drawer Widget Design Docs
Flutter Drawer Design
Flutter Accordion Design

Flutter Accordion Design

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 the page.
  • The hidden info will be shown only on tap.
  • 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 Design Docs

Flutter Alert/Popups Design

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

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

Flutter AppBar Design

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.

  • Flutter Appbar design can be customized by simply giving needed attributes
  • The search component is also included with search features.
  • The collapse Drawer icon is fixed to open/close menu items.
  • Titles & icons can show.
View Flutter AppBar Widget Design Docs

Flutter SearchBar Design

GF Searchbar is an advanced form of inputs that allows us to get the result from a collection. A clear button appears 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 on any page.
  • It shows the result in the list view just below the Search bar.
  • 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 Design Docs
Flutter SearchBar Design
Flutter Rating Design

Flutter Rating Design

GF Rating gets the user's input in the form of several 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 the input field.
View Flutter Rating Widget Design Docs

Flutter Loader Design

Flutter Loader is also referred to as spinner & is used to display a functioning icon rotating or moving in a clockwise direction to allow users to wait for a while until the 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.
  • GIFs, 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 Design Docs
Flutter Loader Design
Flutter Floating Design

Flutter Floating Design

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

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

Flutter Dropdown Design

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

  • Flutter Dropdown has multi selections wherein multiple options can be selected.
  • The arrow icon can be changed according to the need.
  • Dropdown list color can be changed.
View Flutter Dropdown Widget
Flutter Dropdown Design
Flutter Progress Bar Design

Flutter Progress Bar Design

GF ProgressBar 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, a linear, circular progress bar.
  • It can be customized by adding the texts in the progress bar.
  • leading and trailing ions can be added.
View Flutter Progress Bar Design Docs

Flutter Shimmer Design

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

  • A 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 Design docs
Flutter Shimmer Design
animation

Flutter Animation Design

GF Animation gives a smooth look and feels to the user. It makes 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 Design Docs

Flutter Border Design

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

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

Flutter BottomSheet Design 

GF BottomSheet 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 expandable content.
  • The height of the content can be controlled.
  • The Sticky header is used as the header of the bottom sheet.
  • The drag animation of the sheet can be controlled.
View Flutter BottomSheet Widget Design Docs

Flutter CheckBoxListTile Design

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 a title and description.
  • The size of the checkbox can be changed.
  • It has 4 types of checkboxes.
View Flutter CheckBoxListTile Design Docs
Flutter CheckBoxListTile Design
Flutter CheckBox Design

Flutter CheckBox Design

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

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

Flutter RadioListTile Design

A GFRadioListTile is used to select only one option 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 a title and description.
  • The size of the radio can be changed.
  • It has 4 types of the radio button.
  • The position of the radio can be changed ie, right or left on the screen.
View Flutter RadioListTile Design Docs
Flutter RadioListTile Design
Flutter Radio Design

Flutter Radio Design

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 the radio can be changed.
  • It has 4 types of a radio buttons.
  • 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 Design Docs

Flutter IntroScreen Design

A GFIntroscreen gives the introduction pages of the app and it briefly describes 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 Design Docs
Flutter IntroScreen Design
Flutter StickyHeader Design

Flutter StickyHeader Design

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

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