Tuesday, September 17, 2019

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!

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

Animated Container in Flutter

Please check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.