home.html

<p><strong>Table of Contents:</strong></p>

<ul>
<li><a href='#1'>Introduction</a></li>
<li><a href='#2'>Methods for onPressed</a></li>
<li><a href='#3'>FlatButton</a></li>
<li><a href='#4'>RaisedButton</a></li>
<li><a href='#5'>IconButton</a></li>
<li><a href='#6'>OutlineButton</a></li>
<li><a href='#7'>Final Thoughts</a></li>
</ul>
<br>



<h3 id='1'>Introduction</h3>
Buttons are an essential part of an app. It's hard to imagine an app without a button. 
<br>

In this blog, we'll see the working of buttons in Flutter.
<br><br>

<div class="row  justify-content-center">
	<div class=" col-md-4 col-md-offset-4">
	  <img class="img-fluid text-center" src = "gif.gif">
	</div>
  </div>

<br><br><br>


<h3 id='2'>Methods for onPressed</h3>
<br>
Create a new Flutter project and in the main.dart add the following methods. We will use these methods later with the buttons.	
<br><br>
<script src="https://gist.github.com/Aayush005/a37ec4e4b1f9c7c00239f65a6a1d233f.js"></script>		
	
<br><br><br>



<h3 id='3'>FlatButton</h3>
<br>

A flat button is a text label displayed
 on a (zero elevation) Material widget that reacts to touches by filling with color. 
<br>

Add a new column in the body of the Scaffold of the build Widget in main.dart<br> 
In the column add a new Text and a new Row.<br>
In the row add an new FlatButton as shown.
<br><br>

<script src="https://gist.github.com/Aayush005/c279aecd9d1e91a5e9303c0379f0db69.js"></script>
<br><br>

onPressed → The callback that is called when the button is tapped<br>
textColor → The color to use for this button's text<br>
color → The button's fill color, displayed by its Material, while it is in its default (unpressed, enabled) state.<br>
padding → The internal padding for the button's child.<br>
child → The button's label.

<br><br><br>


<h3 id='4'>RaisedButton</h3>
<br>
A raised button is based on a Material widget whose Material.elevation increases when the button is pressed.
<br>
Add the following code in the row to add a RaisedButton.
<br><br>
<script src="https://gist.github.com/Aayush005/542d8cae038087397488e81fa597b955.js"></script>
<br><br>
elevation → The z-coordinate at which to place this button relative to its parent.
<br><br><br>


<h3 id='5'>IconButton</h3>
<br>
An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).
<br>
Add the following code in the row to add an IconButton.
<br><br>
<script src="https://gist.github.com/Aayush005/409287f558b6bee20e94fc95c0be7cef.js"></script>
icon → The icon to display inside the button.
<br><br><br>


<h3 id='6'>OutlineButton</h3>
<br>
Outline button is similar to a FlatButton with a thin  rounded rectangle border.
<br>
Add the following code in the row to add an OutlineButton.
<br><br>
<script src="https://gist.github.com/Aayush005/8c973767430eb4537bbd59f2cefbfb01.js"></script>
<br><br>
The full code will now look like this.
<br><br>
<script src="https://gist.github.com/Aayush005/52535a918767f0ae9cf0b44a3ba16938.js"></script>
<br><br><br>


The full code is available <a href="https://github.com/Aayush005/FlutterButtons" target="_blank" rel="nofollow">here</a>


<br><br>
<h3 id='7'>Final Thoughts</h3>
<br>
Like it? Don't forget to upvote so that we can make more of these tutorials. Let us know in the comments how can we improve.
<br><br><br>



That's All! <3
<br>
Happy Coding!
<br><br><br>