Floating Action Button in Flutter with Example and Video Explanation

Floating Action button in Material Design, usually hovers over the content and usually placed on the right corner of Screen. In Flutter, Floating Action button is the part of the Scaffold. Floating Action buttons can have icons or text as well as both. You can also specify one or more than one floating buttons per screen as per your requirements. In this video demonstration given, I have explained on how to add floating button in your flutter applications, change the contents of the floating button, change its size etc. Hope your find the video useful.

Happy Coding!
Mayuri

Rows and Columns in Flutter with Example and Video Explanation

In Flutter, Rows and Columns are extremely essential to define your screen layouts. In Flutter, Rows and columns helps in well structuring of your app's UI. To build the most efficient UI for your application, it is a good practice to do some paper work and divide the requirement of layouts in terms of rows and columns which in turn helps to avoid any mess with designing, for this, understanding the basic concepts of Rows and Columns in Flutter is indispensable.  I have created this video which will help you to get started with Rows and Columns and have cleared all the basics in the same.

Happy Coding!
Mayuri Ruparel

Containers in Flutter with Example and Video Explanation

Containers in Flutter serves as building blocks in your flutter application. You can use containers in your Rows or Columns and in turn use containers as the base platform for other widgets like text or images etc. Containers has ample properties for styling and displaying your widgets like padding, height, width etc. Containers can also be customized to custom shapes to be used in application.  In the video below I have demonstrated the use of containers in your flutter application. Github link for the source code is also provided in the video's description box.

Happy Coding!
Mayuri Ruparel

Text Widget in Flutter & How to use Custom Fonts in Flutter Application with Example and Video Explanation

Text Widget in flutter displays Text with the custom styling specified.

In the given video tutorial, I will be explaining step by step to use Text Widget in your flutter application and style them as per your project requirements. This Video tutorial will also demonstrate how to use custom fonts in your flutter application.

Happy Coding!
Mayuri Ruparel

App Bar in Flutter with Example and Video Explanation

AppBar is the Top Bar in any mobile application UI. AppBar is an integral part of Scaffold widget in Flutter.

In Flutter, Appbar typically consists of the following elements which constitutes its making.

• Leading
• Title
• Actions
• Flexible Space
• Bottom

In these properties, Leading is usually a back button or any text or any icon, Title usually is the Text, Actions consists of one or more group of icons and Bottom is usually for Tabs. But, again this is completely optional and you can use any of the widgets from Flutter widgets catalog to make your own customize AppBar for your mobile application.

Following is the Appbar Created using its elements, Leading, Title and Action.

We can also customize the App bar by using the various styling properties like elevation, change the default shape etc, I tried creating the customized AppBar as following which I have explained in detail in the video attached below.

Check out the following video to see the demonstration of creating AppBar in flutter from scratch.

Following is the Github link for the code done in the video explanation.
App Bar Demo in Flutter

Happy Coding!
Mayuri Ruparel

Working with Fonts, Text Style, Colors, Basic Theme in Flutter

Working with Fonts, Text Style, Colors, Basic Theme in Flutter:

In This Video I have just played with the basic styling, fonts, and colors in Flutter. I have made the basic changes in the demo flutter app (increment counter app) which is generated when we are a new project in flutter. 

Happy Coding!
Mayuri Ruparel

Hello World Flutter - Creating your First Hello World Flutter App

Hello World Flutter!

Lets get started with Creating your First Flutter App!

Development of Flutter Applications is Supported by Various IDEs like Android Studio, IntelliJ IDEA Idea and Visual Studio, In this example we will create Hello World application using Android Studio. Open up your Android Studio and Select 'Start a new Flutter Project,

New Select 'Flutter Application' from the following dialog shown.

Now Add In your Project Name, Flutter SDK Path, Project Location and Project Description.

Add Package Name for your Application

This will create the basic Flutter App with increment counter which will be incremented on  floating button tap. If you are developing or creating this app for first time it is recommended to go through and thoroughly read the commented part of the code, it is very well self explained and will give you the gist of the class.  

Now Replace the code in main.dart file with the following code which will print a simple 'Hello World' on the centre of the screen.

Once you have changed the Code Snippet, just save the file and you could see the Magic of 'Hot Reloading' on iPhone Simulator!  

So yes, This was simple basic Hello World Flutter App to get started!

As I will create and try out new examples I will blog them here.

Happy Coding!

Mayuri Ruparel