{"id":7361,"date":"2020-01-28T06:15:32","date_gmt":"2020-01-28T06:15:32","guid":{"rendered":""},"modified":"2024-11-13T12:17:32","modified_gmt":"2024-11-13T12:17:32","slug":"flutter-button-widget-component","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/","title":{"rendered":"How to Design Custom Flutter Buttons with 100+ Example Code"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#flutter-button-widget\" >Flutter Button Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#what-is-gf-flutter-button\" >What is GF Flutter Button?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#getting-start-with-flutter-button-design\" >Getting Start with Flutter button design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#flutter-button-type-with-example-code\" >Flutter Button Type with example code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#features-of-buttons\" >Features of Buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#color\" >Color:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#how-to-create-a-button-in-flutter\" >How to create a Button in Flutter?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#how-to-create-a-rounded-button-in-flutter\" >How to create a Rounded button in Flutter?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#how-to-create-a-flutter-icon-button\" >How to create a Flutter Icon Button?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-button-widget-component\/#how-to-create-an-outline-button-in-flutter\" >How to create an Outline Button in Flutter?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"flutter-button-widget\"><span class=\"ez-toc-section\" id=\"flutter-button-widget\"><\/span>Flutter Button Widget<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Flutter button <\/strong>is one of the most common components that is used to build a call-to-action in your application. <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter button widget<\/strong> <\/a>allows building an awesome button that helps you perform a call-to-action based on your application requirement and user&#8217;s need. Flutter buttons have many variants that help you design a nice compatible button based on your Flutter app design to provide the best user experience on performing a particular action.<\/p>\n<h2 id=\"what-is-gf-flutter-button\"><span class=\"ez-toc-section\" id=\"what-is-gf-flutter-button\"><\/span>What is GF Flutter Button?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>GFButton<\/strong> is a <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Button Widgets<\/strong><\/a><strong> component<\/strong> that allows a submit call-to-action element in your app that performs a clickable request based on your app&#8217;s call-to-action function. So if your Flutter applications have a click action then this button component will help you out to build an awesome Flutter button with a record time that will be incorporated with your application.<\/p>\n<p><strong>Buttons<\/strong> are the most commonly used component for MOBILE and WEB apps development. The button helps us to submit form data, used as a link, page routing, functional events &amp; many more places wherever needed.<\/p>\n<p>Keeping the multi-use of buttons in our mind, we at <a href=\"https:\/\/www.getwidget.dev\/\"><strong>GetWidget <\/strong><\/a>have developed the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/\" target=\"_blank\" rel=\"noopener\"><strong>GFButton component<\/strong><\/a> for flutter mobile\/web apps. GFButton has a huge range of pre-designed buttons that can be used for Flutter app development.<\/p>\n<p><strong>GFButton<\/strong> can be used in your app for building a nice <strong>Flutter Button Widget <\/strong>that is quite easy &amp; simple as we have developed the component for developers to use and so it must be developer-friendly to implement the component in apps. <strong>Our <\/strong>open-source Flutter UI library is built to make <a href=\"https:\/\/www.getwidget.dev\/hire-flutter-developer\"><strong>flutter app development<\/strong><\/a> easier &amp; faster from the developer&#8217;s point of view. Let&#8217;s start playing with the <strong>GetWidget<\/strong> <strong>library <\/strong>to create beautiful flutter applications.<\/p>\n<p>Let us see how to use a <strong>Button component<\/strong> in the flutter app using the <strong>GetWidget<\/strong> library<\/p>\n<h2 id=\"getting-start-with-flutter-button-design\"><span class=\"ez-toc-section\" id=\"getting-start-with-flutter-button-design\"><\/span>Getting Start with Flutter button design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/docs.getwidget.dev\/getting-started\/\" target=\"_blank\" rel=\"noopener\"><strong>Getting started<\/strong><\/a> will guide you on how to start building a beautiful flutter application with the <a href=\"https:\/\/www.getwidget.dev\/\"><strong>GetWidget<\/strong><\/a> UI library. You have to install the package from <strong>pub.dev <\/strong>and import the package in your Flutter project &amp; start building the app:<\/p>\n<blockquote><p><em>Install Package from pub.dev :<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/pub.dev\/packages\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n<h3 id=\"import-full-package\">Import full package:<\/h3>\n<p>import &#8216;package:getwidget\/getwidget.dart&#8217;;<\/p>\n<p><strong>Note: dependencies: getwidget: ^4.0.0<\/strong><\/p>\n<p>Add the below code into your file.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Solid Button\",\n    blockButton: true,\n  ),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter fullwidth button example code with GFButton<\/span><\/p>\n<\/figcaption><\/figure>\n<p>The above code is a simple solid button that is of block button which has the fullwidth of the screen with the label of the button.<\/p>\n<p><strong>GFButtons<\/strong> has more variants in it to make the development easy and faster. The shapes of the buttons define its behavior and the various type make it an outstanding element in the library.<\/p>\n<p>The following gives the different types of GFButtons in GetWidget Library.<\/p>\n<h2 id=\"flutter-button-type-with-example-code\"><span class=\"ez-toc-section\" id=\"flutter-button-type-with-example-code\"><\/span>Flutter Button Type with example code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"flutter-elevated-button\">Flutter Elevated Button<\/h3>\n<p>The <strong>Raised Button<\/strong> or the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Elevated buttons<\/strong><\/a> will elevate or trigger themselves whenever the action is made on it. It is a simple solid button with a solid background color and the label of the button on it as shown in the below image<\/p>\n<p>There is a number of the variant with <strong>Raised <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Button<\/strong><\/a><\/strong>. Some of the following variants that have been used commonly are as follows:<\/p>\n<h3 id=\"flutter-raised-solid-button\">Flutter Raised Solid Button<\/h3>\n<p>It is typically a default button. Here we have a solid background color with a slightly curve with a text or label of the button in the center.<\/p>\n<p>The code below shows a simple Raised solid button<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Solid Button\",\n  ),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Solid button example code<\/span><\/p>\n<\/figcaption><\/figure>\n<p>To use the solid button you have to use <strong>GFButtonType.solid<\/strong>.<\/p>\n<p>Read more about the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/#flutter-elevated-solid-button\/\" target=\"_blank\" rel=\"noopener\">Solid button<\/a> in the official documentation here and check out:<\/p>\n<figure class=\"kg-card kg-bookmark-card\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter Elevated Button<\/div>\n<div class=\"kg-bookmark-description\">Flutter Elevated Button looks like a solid button with slightly rounded corners. GF Button has all the variants like an outline, Transparent, Disable, and Block button.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Standard_buttons_-_solid_bfYdW7r4D.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Standard_buttons_-_solid_bfYdW7r4D.png\" alt=\"\" \/><\/noscript><\/div>\n<\/figure>\n<h3 id=\"flutter-disable-button\">Flutter Disable Button<\/h3>\n<p>The Disabled Button is called when the onPressed value to null. It is used in login form submission until the credentials are entered the button will be disabled meaning the buttons can&#8217;t be clicked and when clicked there won&#8217;t be any action or response from the button.<\/p>\n<p>The following code gives a simple example of the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button#disabled-button\/\" target=\"_blank\" rel=\"noopener\">Flutter disabled button<\/a>.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: null\n    text: \"GF Button\",\n  ),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter disable button code<\/span><\/p>\n<\/figcaption><\/figure>\n<p>Read more about Disable Button Widget and check the official documentation for <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button#disabled-button\/\" target=\"_blank\" rel=\"noopener\">Flutter Disable button<\/a>.<\/p>\n<h3 id=\"flutter-circular-button\">Flutter Circular Button<\/h3>\n<p><strong>Pills Buttons<\/strong> are also Flutter Rounded Buttons that have a border-radius around them or in other words the shape of the button resembles a pill. It has a label of the button and solid background color with rounded corners. The below image shows the pill solid buttons.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/05\/Pills-button-solid.png\" alt=\"Flutter Circular Button\" width=\"1300\" height=\"756\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/05\/Pills-button-solid.png\" alt=\"Flutter Circular Button\" width=\"1300\" height=\"756\" \/><\/noscript><\/figure>\n<p>To know more customization options for the pills button head to the official documentation of <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/pills-button\/\" target=\"_blank\" rel=\"noopener\">Flutter Circle buttons<\/a> here.<\/p>\n<p>Let us see a simple and basic example of a <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/pills-button\/\" target=\"_blank\" rel=\"noopener\"><strong>pill button<\/strong><\/a> and how it&#8217;s used in the code. The following will show its usage in the code. We need to add the <em>shape<\/em> parameter to achieve the pill button as shown below.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Pill Button\",\n    shape: GFButtonShape.pills,\n  ),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter pill button example code<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-square-button\">Flutter Square Button<\/h3>\n<p><strong>Square Buttons<\/strong> are also Flutter Buttons that have no border-radius around them or in other words the shape of the button resembles a square. It has a label of the button and solid background color with no rounded corners. The below image shows the square solid buttons.<\/p>\n<p>To know more customization options for the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/square-button\/\" target=\"_blank\" rel=\"noopener\">Flutter square button<\/a> head to the official documentation.<\/p>\n<p>Let us see a simple and basic example of a <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/square-button\/\" target=\"_blank\" rel=\"noopener\"><strong>square button<\/strong><\/a> in flutter and how it&#8217;s used in the code. The following will show its usage in the code. We need to add the <em>shape<\/em> parameter to achieve the square button as shown below.<\/p>\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Pill Button\",\n    shape: GFButtonShape.square,\n  ),<\/code><\/pre>\n<h3 id=\"flutter-icon-button\">Flutter Icon Button<\/h3>\n<p><strong>Icon Buttons<\/strong> are also Flutter Buttons that have slight border-radius around them and it has an icon or label or combination of icons and labels in the button. It has a solid background color with slightly rounded corners. The below image shows the icon solid buttons<\/p>\n<p>To know more customization options for the<a href=\"https:\/\/docs.getwidget.dev\/gf-button\/icon-button\/\" target=\"_blank\" rel=\"noopener\"> Flutter icon button<\/a> head to the official documentation of icon buttons here.<\/p>\n<figure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter Icon Button<\/div>\n<div class=\"kg-bookmark-description\">Flutter Icon button is a button that has a icon with solid background fill color in it.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Icon_buttons_inVOVWej_.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Icon_buttons_inVOVWej_.png\" alt=\"\" \/><\/noscript><\/div><figcaption><span style=\"white-space: pre-wrap;\">Flutter icon Button docs\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<p>Let us see a simple and basic example of a <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/icon-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter icon button<\/strong><\/a> and how it&#8217;s used in the code. The following will show its usage with both the <strong>icon<\/strong> and the <strong>text <\/strong>combination.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\n  GFButton(\n    onPressed: (){},\n    text: \"Icon Text\",\n    icon: Icon(Icons.home),\n  ),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">GFButton onPressed with Icon<\/span><\/p>\n<\/figcaption><\/figure>\n<p>Now, let us see a simple and basic example of only an <strong>icon button<\/strong> and how it&#8217;s used in the code. The following will show its usage with only the <strong>icon<\/strong><\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\n  GFIconButton(\n    onPressed: (){},\n    icon: Icon(Icons.home),\n  ),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter icon button with GFbutton<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-social-button\">Flutter Social Button<\/h3>\n<p><a href=\"https:\/\/docs.getwidget.dev\/gf-button\/social-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Social Buttons<\/strong> <\/a>are also Flutter Buttons that have slight border-radius or rounded ones just like pills around them and it has a social icon or label or combination of both social icons and labels in the button. It has a solid background color with rounded corners. The below image shows the social solid pill buttons<\/p>\n<p>To know more customization options for the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/social-button\/\" target=\"_blank\" rel=\"noopener\">Flutter Social button with icon<\/a> head to the official documentation of pills buttons here.<\/p>\n<figure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter Social Button<\/div>\n<div class=\"kg-bookmark-description\">Flutter Social Buttons are a set of buttons that are used to get sign-in buttons for any social media account, GF social button comes with lots of properties to customize as need.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Social_Buttons_359dhW_7Eo0.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/docs\/tr:w-800,f-auto\/Social_Buttons_359dhW_7Eo0.png\" alt=\"\" \/><\/noscript><\/div><figcaption><span style=\"white-space: pre-wrap;\">Flutter social button icon Docs<\/span><\/p>\n<\/figcaption><\/figure>\n<p>Let us see a simple and basic example of a <strong>Flutter<\/strong> <strong>social button<\/strong> and how it&#8217;s used in the code. The following will show its usage with both the <strong>icon<\/strong> and the <strong>text <\/strong>combination.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\n  GFButton(\n    onPressed: (){},\n    text: \"Social Text\",\n    icon: Icon(Icons.facebook),\n  ),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Facebook social icon<\/span><\/p>\n<\/figcaption><\/figure>\n<p>Now, let us see a simple and basic example of only a <strong>social button in flutter<\/strong> and how it&#8217;s used in the code. The following will show its usage with only the <strong>social icon.<\/strong><\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\n  GFIconButton(\n    onPressed: (){},\n    icon: Icon(Icons.facebook)\n  ),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Icon Button<\/span><\/p>\n<\/figcaption><\/figure>\n<p><strong>Flutter Buttons<\/strong> can be customized using <strong>GFButton<\/strong> Custom properties which are listed below:<\/p>\n<table>\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>onPressed<\/strong><\/td>\n<td>callback i.e, called when the button is tapped<\/td>\n<\/tr>\n<tr>\n<td><strong>onLongPressed<\/strong><\/td>\n<td>callback i.e, called when the button is long-pressed<\/td>\n<\/tr>\n<tr>\n<td><strong>text<\/strong><\/td>\n<td>describe the button&#8217;s label. text will be a priority over child<\/td>\n<\/tr>\n<tr>\n<td><strong>icon<\/strong><\/td>\n<td>describe button&#8217;s label with icon<\/td>\n<\/tr>\n<tr>\n<td><strong>child<\/strong><\/td>\n<td>child of type Widget alternative to text<\/td>\n<\/tr>\n<tr>\n<td><strong>textColor<\/strong><\/td>\n<td>the color to use for this button&#8217;s text when the button is enabled<\/td>\n<\/tr>\n<tr>\n<td><strong>textStyle<\/strong><\/td>\n<td>defines the styling of the text<\/td>\n<\/tr>\n<tr>\n<td><strong>disabledColor<\/strong><\/td>\n<td>the fillcolor of the button when the button is disabled<\/td>\n<\/tr>\n<tr>\n<td><strong>disabledTextColor<\/strong><\/td>\n<td>the color to use for this button&#8217;s text when the button is disabled<\/td>\n<\/tr>\n<tr>\n<td><strong>borderSide<\/strong><\/td>\n<td>defines the border side<\/td>\n<\/tr>\n<tr>\n<td><strong>bordershape<\/strong><\/td>\n<td>defines the shape of the border<\/td>\n<\/tr>\n<tr>\n<td><strong>buttonBoxShadow<\/strong><\/td>\n<td>if\u00a0<code style=\"font-family: source-code-pro, Menlo, Monaco, Consolas,;\">true,<\/code>\u00a0default boxShadow appears around the button.<\/td>\n<\/tr>\n<tr>\n<td><strong>boxShadow<\/strong><\/td>\n<td>defines the boxShadow<\/td>\n<\/tr>\n<tr>\n<td><strong>fullWidthButton<\/strong><\/td>\n<td>if\u00a0<code style=\"font-family: source-code-pro, Menlo, Monaco, Consolas,;\">true,<\/code>\u00a0defines the full width of the button.<\/td>\n<\/tr>\n<tr>\n<td><strong>blockButton<\/strong><\/td>\n<td>if\u00a0<code style=\"font-family: source-code-pro, Menlo, Monaco, Consolas,;\">true<\/code>, defines the block button.<\/td>\n<\/tr>\n<tr>\n<td><strong>padding<\/strong><\/td>\n<td>defines internal padding of the button<\/td>\n<\/tr>\n<tr>\n<td><strong>focusColor<\/strong><\/td>\n<td>fillColor of the button when it has the input focused<\/td>\n<\/tr>\n<tr>\n<td><strong>hoverColor<\/strong><\/td>\n<td>fillColor of the button when the pointer is hovered over it<\/td>\n<\/tr>\n<tr>\n<td><strong>splashColor<\/strong><\/td>\n<td>indicates that the button has been touched<\/td>\n<\/tr>\n<tr>\n<td><strong>highlightColor<\/strong><\/td>\n<td>indicates that the button is actively being pressed<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"features-of-buttons\"><span class=\"ez-toc-section\" id=\"features-of-buttons\"><\/span><strong>Features of Buttons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Buttons in Flutter have several features that developers can use to customize their appearance and behavior. Here are some of the most important features of buttons in Flutter:<\/p>\n<h3 id=\"impressed\"><strong>Impressed: <\/strong><\/h3>\n<p>This is a callback function that gets executed when the button is pressed or clicked. Developers can specify what action should be taken when the button is pressed, such as navigating to a new screen or performing a specific function.<\/p>\n<h3 id=\"child\"><strong>Child: <\/strong><\/h3>\n<p>The child widget that gets displayed inside the button widget. Developers can use any widget as a child of a button widget, such as Text, Icon, Image, or Container.<\/p>\n<h2 id=\"color\"><span class=\"ez-toc-section\" id=\"color\"><\/span><strong>Color:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The color of the button widget. Developers can specify the background color of the button using the color property.<\/p>\n<h3 id=\"textcolor\"><strong>TextColor:<\/strong><\/h3>\n<p>The color of the text displayed inside the button widget. Developers can specify the color of the text using the textColor property.<\/p>\n<h3 id=\"padding\"><strong>Padding:<\/strong><\/h3>\n<p>The padding around the button widget. Developers can specify the padding using the padding property.<\/p>\n<h2 id=\"how-to-create-a-button-in-flutter\"><span class=\"ez-toc-section\" id=\"how-to-create-a-button-in-flutter\"><\/span>How to create a Button in Flutter?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Flutter Button<\/strong> is a<strong> material widget<\/strong> that has clickable functionality and routes to the desired page. It is used for any call to action. Buttons are used for any social authentications, form submissions and that basically requires a call to action function.<\/p>\n<p><strong>Buttons<\/strong> in <strong>Flutter<\/strong> are the most used component in any application. It is widely used all over the pages. Here for the demonstration, we will be using the GetWidget library and its GFButton.<\/p>\n<p><strong>GFButton<\/strong> is a <strong>Flutter button<\/strong> that is a material widget component that is clickable and used for any cal to action function. It is a clickable component upon which will be routing to other pages or does some kind of action may be opening an alert or closing a popup etc.<\/p>\n<p>GFButton has many variants in it and has a wide range of buttons. Let us see its types and simple examples for the types.<\/p>\n<p>The<strong> <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/\" target=\"_blank\" rel=\"noopener\"><strong>Standard Flutter button<\/strong><\/a><\/strong> is a solid simple button whose background color and the texts can be changed according to the need. There are many options to customize. For any properties and options head to the official documentation.<\/p>\n<p>Now let us see a simple GFbutton that is a solid button. The example below shows one of the solid buttons.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Solid Button\",\n  ),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter text button<\/span><\/p>\n<\/figcaption><\/figure>\n<p>The above code gives a simple solid button that has only two parameters, one is called to action property which is used to do the action of the button and the other is the name of the button. These two will make up a simple solid GFButton.<\/p>\n<p>The example above demonstrates a simple solid button. For more kinds of buttons and their uses head to the official button documentation For <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/\" target=\"_blank\" rel=\"noopener\">Elevated button<\/a> GetWidget Library.<\/p>\n<p><strong>Also Read &#8211;<\/strong> <a href=\"https:\/\/www.getwidget.dev\/blog\/flutter-dropdown-widget\/\">Flutter Dropdown Button: A widget that allows users to select from a number of items<\/a><\/p>\n<h2 id=\"how-to-create-a-rounded-button-in-flutter\"><span class=\"ez-toc-section\" id=\"how-to-create-a-rounded-button-in-flutter\"><\/span>How to create a Rounded button in Flutter?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we will see how to achieve a rounded button in Flutter. The rounded Button is noting but the button having the border radius for it. In GetWidget we have a Pills button or so-called Rounded Button which does the same work. It has a circular type of border to indicate the shape of a button and so it is a rounded button.<\/p>\n<p>Let us see the simplest code for the Rounded\/Pills button using the GetWidget library and the code is shown below.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(\n    onPressed: (){},\n    text: \"Rounded Button\",\n    shape: GFButtonShape.pills,\n  ),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Rounded Button example code<\/span><\/p>\n<\/figcaption><\/figure>\n<p>In the above code, we can see the code of a solid button that is been modified and the shape of the button is added to give the pill-shaped button. It is the advantage of using GetWidget Library that the codes are very flexible and re-usable with very few modifications.<\/p>\n<p>For more types of buttons and their type and shape head to the official documentation of GetWidget <a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\">Flutter docs<\/a>.<\/p>\n<h2 id=\"how-to-create-a-flutter-icon-button\"><span class=\"ez-toc-section\" id=\"how-to-create-a-flutter-icon-button\"><\/span>How to create a Flutter Icon Button?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Buttons<\/strong> in <strong>Flutter <\/strong>is a <strong>material button<\/strong> that is called or tapped when the call to action function is required. It is widely used in all applications and is one of the most important components as it will be used in login forms, social forms, and other pages that require performing actions.<\/p>\n<p><strong>GFButton<\/strong> is also a <strong>Flutter Button<\/strong> that has the same properties and the functionalities of a flutter button. GFbutton has many types and shapes and it can be customized very easily according to the need.<\/p>\n<p><strong>GFButton<\/strong> comes in the <strong>GetWidget library<\/strong> that has its own types and shapes buttons. One of the simple forms is a solid standard button also called the Elevated button in the Flutter. This button type elevates or gets triggered when it is tapped and does the given action. It is the basic button in <strong>GFButton<\/strong>.<\/p>\n<p>Now let us see a simple and basic example of the <strong>GFSolid button<\/strong> which is a standard button and the below code shows the one.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFIconButton(                          \n    onPressed: null,             \n    text:\"Solid Button\"\n),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Icon button<\/span><\/p>\n<\/figcaption><\/figure>\n<p><strong>Icon Buttons<\/strong> in <strong>GFButton<\/strong> are a type of button in which icons are used. It is not restricted to only icons, even the texts or labels, and the combination of both labels and icons can be used in Icon Buttons. It is usually used as icons to show some information like addition for add icon or favorite icon for wishlist etc.<\/p>\n<p>It can be used in floating action buttons also to give the name of the button using only icons.<\/p>\n<p>Now let us see the example of icons in GFButton. The below example shows the icon button with a home icon in it.<\/p>\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFIconButton(                          \n    onPressed: null,             \n    icon: Icon(Icons.home),\n    \n),\n<\/code><\/pre>\n<p>Let us now see the example of icon and text both in GFButton.<\/p>\n<p>The below example shows the icon button with a home icon and text in it.<\/p>\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFButton(                          \n    onPressed: null, \n    text:'Icon Button'\n    icon: Icon(Icons.home),\n    \n),\n<\/code><\/pre>\n<p>For more options on Button, head to the official documentation of GetWidget <a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\">Flutter docs <\/a><\/p>\n<h2 id=\"how-to-create-an-outline-button-in-flutter\"><span class=\"ez-toc-section\" id=\"how-to-create-an-outline-button-in-flutter\"><\/span>How to create an <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/#flutter-elevated-button-size\" target=\"_blank\" rel=\"noopener\">Outline Button in Flutter<\/a>?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Outline Button<\/strong> is a type of button that has a border around it with a transparent background color and the label of the button. The border color of the outline button can be changed whereas the transparent background color cannot be changed and remains constant.<\/p>\n<p>Now let us see a simple and basic example of the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/#flutter-elevated-button-size\/\" target=\"_blank\" rel=\"noopener\"><strong>GF Outline button<\/strong> <\/a>which is a standard button and the below code shows the one.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\nGFIconButton(                          \n    onPressed: (){},             \n    text:\"Solid Button\",\n    type: GFButtonType.outline,\n),\n<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter outline button onPressed<\/span><\/p>\n<\/figcaption><\/figure>\n<p>The above code is a simple solid button code but the type is added to it to make it an <strong>Outline button<\/strong>. For more types of buttons head to the official documentation of the <a href=\"https:\/\/docs.getwidget.dev\/gf-button\/standard-button\/#flutter-elevated-button-size\/\" target=\"_blank\" rel=\"noopener\">GFButtons<\/a>.<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Get Widget Docs<\/strong><\/a><\/p>\n<figure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter GetWidget Docs<\/div>\n<div class=\"kg-bookmark-description\">Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><\/noscript><\/div><figcaption><span style=\"white-space: pre-wrap;\">Getwidget Flutter Docs<\/span><\/p>\n<\/figcaption><\/figure>\n<p><a href=\"https:\/\/forum.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Forum<\/strong><\/a>: if any Find any questions let&#8217;s discuss them on Forum.<\/p>\n<p><a href=\"https:\/\/github.com\/ionicfirebaseapp\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>GitHub Repository<\/strong><\/a>: Please do appreciate our work through Github start<\/p>\n","protected":false},"excerpt":{"rendered":"We go step by step to create all types of button-like Circular, Elevated, icon, Social, Outline, Raised, Switch, Disable button, and many more","protected":false},"author":1,"featured_media":5192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[139],"tags":[],"class_list":{"0":"post-7361","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-flutter","8":"cs-entry"},"_links":{"self":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/comments?post=7361"}],"version-history":[{"count":3,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7361\/revisions"}],"predecessor-version":[{"id":8283,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7361\/revisions\/8283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media\/5192"}],"wp:attachment":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media?parent=7361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/categories?post=7361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/tags?post=7361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}