This is still a technical stack that I am learning so this is not meant to be a deep dive on all of the complexities of the language. It is just my thoughts and experience from working with it so far.
Dart vs JavaScript
Both languages are based on the C-style of syntax and they are also object-orientated by design. Dart is capable of compiling to either native code or pure JavaScript. One of the biggest differences is that JavaScript is a dynamically typed programming language whereas Dart is a statically typed programming language. With a dynamically typed programming language you are able to change the datatype that a variable holds which allows for more flexibility as you can change things on the fly. Statically typed programming languages are generally safer as you are less likely to run into problems because you for example forgot that a variable was only supposed to hold numbers because it will enforce it for you.
One thing to note is that Dart also has a datatype called dynamic. What this means is that you can create a variable that does not have a fixed data type. So basically the Dart programming language can be both dynamic and static which makes it very versatile and powerful. So if you want to use Dart for its type safety so that you don't accidentally put in the wrong information then its best to create your variables with the datatype to begin with. Statically typed is generally more preferred as you are more likely to avoid crashes further down the line in your app because of a mix up of datatypes.
Statically typed programming language
Dart Programming Language Syntax
void main() {
String userName = 'Kirito';
int age = 16;
print(userName);
// console prints Kirito
print(age);
// console prints 16
}
Dynamically typed programming language
Dart Programming Language Syntax
void main() {
dynamic userName = 'Kirito';
userName = 123456;
dynamic age = 16;
age = '17';
print(userName);
// console prints 123456
print(age);
// console prints 17
}
JavaScript Programming Language Syntax
let userName = 'Kirito';
userName = 123456;
let age = 16;
age = '17';
console.log(userName);
// console prints 123456
console.log(age);
// console prints 17
Dart and JavaScript Classes
Another difference is that the Dart programming language is also a class-based language and while you can use classes in JavaScript it is purely syntactic sugar for the prototypal pattern.
Dart Programming Language Syntax
void main(){
Car ferrari = Car('SF90 Stradale', true);
print(ferrari.carName);
// console prints SF90 Stradale
}
class Car {
String carName;
bool carAutomatic;
Car(carName, carAutomatic){
this.carName = carName;
this.carAutomatic = carAutomatic;
}
}
JavaScript Programming Language Syntax
class Car {
constructor(carName, carAutomatic) {
this.carName = carName;
this.carAutomatic = carAutomatic;
}
}
const ferrari = new Car('SF90 Stradale', true);
console.log(ferrari.carName);
// console prints SF90 Stradale
Flutter for App development
Flutter was created by google and is an open-source user interface software development kit. It can be used as a way to develop apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and also the web using a single codebase. Coming from a primarily web based background I am used to creating apps using HTML/CSS and JavaScript. However with Flutter you use Widgets for building the user interface. One thing to mention is that the team that created Flutter also works on the Google Chrome Browser so there are quite a lot of similarities. For example when doing styling a lot of the syntax is similar to CSS properties and for doing the layout it uses Flexbox!
So if you are already familiar with it then the learning curve is not going to be too difficult. Another important thing to mention is that Flutter supports hot reload and hot restart. Basically hot restart takes more time than hot reload because it has to destroy and then rebuild the state value as they are returned to default. The app widget tree is completely rebuilt with newly typed code. This can take slightly longer to complete when compared to the hot reload which is the same as it is in web development when you can see your changes immediately without having to restart the server.
Flutter/Dart syntax example
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content.dart';
import 'reusable_card.dart';
const double bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const inactiveCardColour = Color(0xFF111328);
const bottomCardColour = Color(0xFFEB1555);
class InputPage extends StatefulWidget {
@override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: SafeArea(
child: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
flex: 2,
// Flexbox syntax
child: GestureDetector(
onTap: () {
print('Male Card Pressed');
setState(() {});
},
child: GenderCard(
bmiIcon: Icon(FontAwesomeIcons.mars, size: 80.0),
bmiIconText: 'Male',
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Female Card Pressed');
},
child: GenderCard(
bmiIcon: Icon(FontAwesomeIcons.venus, size: 80.0),
bmiIconText: 'Female',
),
),
),
],
),
),
Expanded(
child: ReusableCard(colour: activeCardColour),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(colour: activeCardColour),
),
Expanded(
child: ReusableCard(colour: activeCardColour),
),
],
),
),
Container(
color: bottomCardColour,
margin: EdgeInsets.only(top: 10),
width: double.infinity,
height: bottomContainerHeight,
)
],
),
),
);
}
}
Conclusion
I think that this technical stack is pretty future proofed because it allows you to create cross platform apps for the web, mobile and desktop and the Dart programming language is a joy to use. If you are coming from another C-style programming language then it won't take you long to learn it. I have been using Android Studio for development because the IDE is probably the best way for creating Flutter apps as it has a lot of great plugins and features which make it better than the usual code editor. Don't get me wrong I still have my Visual Studio Code setup for doing Flutter development I just find the experience to be slightly better when using Android Studio.
But nevertheless its still nice to know that you have different options that you can use. Mobile app development is quite cool and I have already got used to using device simulators for testing apps as opposed to using a web browser when creating web apps. One thing I will say though is that the simulators can be pretty resource intensive if your computer is not fast enough. Having the option to also test on your native phone is a good option as its best to see the app running on a real device too.
Cross platform App development is probably best done on a Mac in my opinion because it is the only way to do iOS development. Android studio works on multiple operating systems.
Top comments (10)
Discussion point has to revolve around whether mobile specific application has to have a codebase with singular code or it has to be cross platform....
More over community size plays and important role too what about that?
Choice is good I would say that there is no winner and so long as the programming language that you use for creating your app serves your purpose then it has done a good job. There is nothing wrong with using Kotlin and Swift the biggest advantage Flutter has is being cross platform so you only need to hire a Flutter developer to build apps for multiple platforms.
It is more cost effective and requires less training plus having one codebase means less errors and the apps should look the same on all platforms. React Native is another popular cross platform solution that many developers speak highly of. I believe that the new Xbox store app is designed using React Native for Windows.
So Microsoft considers it to be a commercially viable option for building apps. Many popular apps have also been built using Flutter too. And as for community size what I do know is that the Flutter plugin for Android Studio has over 1 million downloads. Thats a pretty big user base if you ask me.
yeah but when talking about new abrupting technology, what is that one unique selling point that would actually diversify the flutter community on the large scale.
there are so many developers that have deep roots with their domain expertise on any one of the community flourished technology.
lets suppose one cross platform apart from react native and flutter is Xamarin. every C# & dotnet framework dev is known to it. it is used to make reactive mobile apps.
now how does flutter being a single codebase technology would outrun something with such deep insights and large community forum technology when no body is ready to learn it in that pace??
Well it's new and developers are always eager to get their hands on new tech to see how it compares to the tools that they are currently using. And also one thing I remembered is that you can see the code for all of the flutter widgets. When using Swift on iOS for example I don't think it's possible to see how Apple create a button component whereas with Flutter you have a lot more customisation.
Flutter is just a new modern way for building cross platforms apps and that should excite a lot of people. Tools like Xamarin have fallen in popularity as many developers have moved towards either a native solution using Swift and Kotlin. Or cross platform using Flutter and React Native.
I've been plodding through developing my 1st app with Flutter. I'm pretty impressed so far. The hot-loading is fantastic and I find the concept of the Widget works very well. Found is quite easy to get up and running quite quickly
Your Dart class example could be made shorter.
Very interesting the comparison between the two languages
When developing Android Apps in Kotlin, you generally follow certain design patterns such as MVVM. Does that carry over to developing cross-platform apps using Flutter?
Flutter apps have a declarative nature which means that they are not bound to any specific design pattern. The developer can choose to use whatever design pattern they want as long as it is ideal for the project that they are working on. So a design pattern such as MVVM should be applicable as it is not tied to any platform.
Thanks! Appreciate you sharing your experience.