My initial thoughts on using Flutter and Dart for App development

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

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

void main() {
String userName = 'Kirito';
int age = 16; print(userName);
// console prints Kirito
print(age);
// console prints 16
}

Dynamically typed programming language

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

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

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

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.

👨🏿‍💻 Software Developer @CGI_Global 🖼 Content Creator. Sharing the mindset and content so you work hard to grow stronger than your past self ☯️