Wednesday, December 19, 2018

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

Monday, December 17, 2018

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

Saturday, December 15, 2018

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.


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

Animated Container in Flutter

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