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

What is Flutter and My Views on Google's Cross Platform Mobile Apps Development

Let me first tell you How I came across Flutter,

Well, while browsing various tutorials on youtube I randomly came across one of the Video's by Google Developers and its title instantly caught my eye! I'm a big fan of cross platform development and Ionic is one of my favorites platform for the same. I have already developed lots of (can't remember the exact count!) Ionic Apps. Well Google has always been my most favorite Platform and you can see that from my previous tutorials which dates almost 6-7 years back how much I love working with various Google Frameworks weather it be Maps, Android or GWT!

Now coming back to Flutter.. Flutter really caught my eye and I felt like blogging about this after so many years! My Love for Google Frameworks and Working with Cross Platform Development of Mobile Apps has been Combined! What more I could have asked for! Doing Development from last 12 years I have continuously evolved... learning and still learning whatever technology or language / frameworks my projects or clients demanded. Looking at Flutter wants me to learn more about it and I really can't wait to develop my first application on the same. Looking at one of the videos of Flutter from Google, I learned they developed 2 apps in 12 Minutes!!!! I have gone through some of the examples and I really can't wait to try my hands on and I will try my best to blog my experience.

Coming to Technicalities - Flutter and its Advantages:

Cross Platform Development:

Flutter is a framework by Google which enables us to create Cross Platform Mobile Apps with a Single code base. Flutter is written in Dart Language. Cross Platform really helps in saving tons of money, resources, Time of Development, Team Size and so much more. Almost all the companies which builds Mobile Apps has their corresponding versions of Android and iOS apps. Most of the time when its in native development there are two teams working for each of the platform development. Cross Platform Development enables a single team of developers to develop the Mobile app which is compatible with both the platforms. Moreover, Flutter promises Cross Platform Development without comprising on app performance and at the same time delivering the Same Native Look and feel for users!

Hot Reloading: 

Flutter has this awesome feature called Hot Reloading which enables delightful developing experience. With Hot Reloading developer can instantly see the changes reflected on emulator or simulator just by saving the file. It cuts out the time taken to compile or build in traditional development.

Support of Known IDEs

Flutter Supports the development in known IDEs like Android Studio, IntelliJ Idea or Visual Studio which means developer can enjoy coding and learning new technology with out really leaving out their 'comfort zones'.

Material Design and Cupertino

Using Flutter enables Developers to Develop Mobiles Apps with Google's Material Design as well as Cupertion (iOS - Style) Widgets which further opens up wide array of possibilities to create exciting layouts and screens.

Flare

I saw one of the videos in Flutter Live where a company called 2Dimensions demonstrated Flare which is used to created awesome animations for Flutter App. Moreover, it enables Designers and Developers of an App to work in parallel throughout the development cycle. Check out more here.

Support for Firebase / Cloud Firestore

It is obvious that Firebase and Flutter are both from Google it will seamlessly support each other. I'm sure this wonderful combination will enable lightning fast response time and amazing end user experience at the same time eliminate lots of server side maintenance for developers too.

Free & Open Source

Flutter is Free and Open Source! Could it get any better?

These were the few things I learned in past couple of days with my experience and I'm sure there is so much more to it! In case I missed out any notable point please let me know through comments.

Happy Coding!
Mayuri Ruparel

My Little Sunshine

My 4.5 year old daughter, Reeva, is very much fond of painting and coloring. Since she was 1.5 years old she could hold crayons and scribble. When she was 2 years old and started going for playschool, her teacher once called me personally and told me this incident, She said she was distributing a paper with various shapes outline drawn and giving crayons to everyone and while many of them could not hold crayon properly Reeva already completed coloring those shapes!! I think its her god's gift and I try my best to encourage her for the same.
I have started to collect and preserve ample of her paintings but this particular one is my favorite and very close to my heart, She did this paining few months back around August 2016, It was my usual tiring day back from office and i was super tired, as I came back home Reeva came jumping to me and wanted to play tea party set with me but i was super tired and told her mumma is tired please give me some time to freshen up and I will play with you till then you paint something for me (painting is the only thing that works for her on those times when I'm super tired and want her to play alone) I handed over her set of crayons and her drawing book, and I got busy with my routine house chores trying my best to complete all the stuff soon so I could play with her. After some time she came jumping to me and showed me this painting saying "mom look mom look" and I turned back and saw this paining.... before i could react or say anything she said "Look mom sun is smiling and sun is happy with so many colours!!" My mood was instantly lifted up looking how innocently she painted the smiling face of sun adding so many colours around... her innocent way to make me smile was clearly visible, I left everything and hugged her thight :) I'm surely going to frame this picture for her to treasure.

That Stye in Eye..

Past two days had been really bad..... It's just because of one stye in eye... It's totally annoying... Irritating to the core how much ever I try to get rid of it it's just getting worse.... I feel even medicine isn't working and I feel I have to wait for a day more (hopefully) and just to watch it grow until it finally burst! 

I have always been paranoid about eyes it is because my dad is blind, he lost his eyes at very young age and if anything happens to anyones eyes naturally get one panic attack. 

So coming back to stye... Ooouch it hurts! Day -1 it started with a small pin drop. Day - 2 it grew and started hurting, took medicine, rest , avoided working for half day Day - 3 morning was worst.. Felt like conjunctivitis.. It was so big that I could hardly open one of my eye... Rushed to doc he said it will grow a day more... Missed meeting up with my friends....Wait and watch... 

Now as I'm not working today and they say idle mind is devil's workshop...lol.. Thoughts are running marathon.... In all possible directions... In the middle of all the thoughts I just paused and started thinking in different direction... I started associating the stye with real life goals.... If we had planned a goal/target for a day and it happens that a stye (obstacle) comes in such a way that no matter hard we try to get rid of it or try to avoid it by all possible means but it will hinder out our way towards our target. At that particular time we get so much pissed off, annoyed but it hardly helps. All we can do is to wait and watch and look out for the phase to pass. No point in bending the rod with bare hands, it will only hurt us. 

So consider such situations as a break from routine and learn to dance in rain. I have decided until my stye gets fine will stay at home play with my daughter and spend time with her which I usually missed while I'm at work.