What and Why Flutter? Most Common Myths

The launch of Flutter in 2017 created quite a buzz for this open-source technology used for coding and building native apps. Many big brands like BMW, Google Assitant, Square, Tencent, eBay have used Flutter to build their web applications

Flutter is used for both single and cross-platform mobile frameworks. According to Statista, it was found that Flutter is the second most commonly used cross-platform mobile framework by developers worldwide in 2019 & 2020.

Its growing popularity in the coding space has left quite a few doubts or myths about this programming language.

And, this article will help you bust some of those myths, but before that, let’s understand some basics of Flutter.

What and Why Flutter?

Unlike other frameworks, Flutter allows you to build native apps using a single codebase. Here, you can build applications for both android and apple using a single programming language and codebase.

The programming language consists of two parts, an SDK and a framework. Flutter’s SDK is a collection of tools that help developers convert and compile codes into native machine code. Besides, it contains a UI library of reusable elements, including sliders, buttons, etc. This helps save a lot of time for developers with added personalization features.

Flutter works on a programming language called Dart. It is based on front-end development to build web and mobile applications.

If you are someone looking to build beautiful and customizable applications, then Flutter is definitely for you. The programming language helps you develop fantastic-looking designs using Flutter Skia.

Flutter also results in low-cost development as it contains ready-to-use widgets that are codeless. This results in lower man-hours and minimum cost in comparison to other naive or cross-development.

Common myths about Flutter

Let’s dive in and bust some of the most common myths about Flutter.

1. Dart is an odd language.

Dart is definitely not the most popular programming language but the easiest to learn. Google developed it in 2011 to help with the development of front-end interfaces of both mobile and web apps.

Many developers have now shifted to dart because of its flexibility.

A developer can write web codes, and it will run smoothly on any browser. The programming language works on a type-less philosophy that means it gives developers the flexibility and efficiency to work less and create more.

Being an open-source programming language, many developers are now shifting to Flutter. The developers want a hassle-free process without any licensing issues and penalty strikes.

The second most common reason why people opt for Dart is that it’s pretty easy to learn. Compared with Python, Javascript, C++, Dart would look quite familiar and have a small learning curve.

But many developers think it’s quite similar to another programming language, Kotlin.

And, we do agree at some points, like-

• Dart files can have multiple clauses
• Any constant variable that is outside the class are categorized singletons
• Dart also has various nullable operators var name = users[0]?.name ?? "";
• Developers don’t have to use the new keyword
• Dart consists of closure/lambdas that give reference to existing methods.
• Developers can override + and == operator

The Dart community is still growing and coming up with the latest features. Just check out the code below, and you will understand how to works-

//a statefull widget receive it values directly from the constructor,

//from doc : A widget that does not require mutable state.

class MyWidget extends StateFullWidget {

//final == val (kotlin)

//underscore _ means private in dart

final _myText = "";

//default constructor, braces {} means the arguments can be provided in any order

//_myText = text means _myText is initialised with the `text` value automatically

MyWidget({this.key, @required String text}) : _myText = text;

@override

Widget build(BuildContext context) { //BuildContext => represents the parent widget

var imageUrl = "www.mywebsites.com/${_myText}";

return GestureDetector( //add user interraction

onTap: () { //lambdas without parameter, like kotlin

print("tapped");

},

child: Row( //Row == Vertical LinearLayout

children: [

//download then display an image

Image.network(imageUrl),

Text(_myText)
]
)
)
}
}

You can clearly see that the codes are pretty easy to read with not much hassle.

2. We can work on an MVVM model using LiveData in Flutter.

LiveDatas are fun to use on Android. This architecture component is an observable data holder that observes LiveData objects for any changes. The Android app development becomes relatively easy with LiveData and ViewModel.

The MVVM stands for Model, View, and ModelView.

Model- This contains the data of the application.

View- The view observes and informs the ModelView of the user’s action. It is also devoid of any application knowledge.

ModelView- The ModelView is a middle point of Model and View. It links Model to the View from transferring data ( from the Model) to providing data streams to the View.

So, in Android, we can create a dedicated SearchViewModel to see the current view via LiveData<SearchViewState>

However, in Flutter, we do not have any LiveDatas,but has Streams. It is quite similar to LiveData and can be accessed via StreamBuilder. The widget is connected with the steam, so the StreamBuilder is used to update the view hierarchy anytime a new value pops up.

3. GSON & Moshi does not work on Flutter

Java Script Object Orientation or JSON is used to store or transport data from the server to the web page. This exists as a string that needs to be converted into a native JavaScript object to access it.

Many popular libraries, including Moshi, Klaxon, Gson, Serialisation, FastJSON, or Jackson, deserialize JSON to POJO (Plain Old Java Object).

Otherwise, we had to first use JSON as a HashMap and then add loops to retrieve components from an API.

Even though Flutter does not allow access to any of these libraries, but includes a built-in tool that helps deserialize JSON. Here, you have to select the class and mark it with @JsonSerializable.

If you want, you can also change the name of the fields, but right now, we are going with the respective field’s name. Developers also need to specify a default constructor, factory, and integrating .toJson().

4. Flutter widgets are hard to read.

Flutter is amongst the simplest programming language, including its widgets. Here, if you want to integrate padding, you can use the Padding widgets or, to make code clickable, use a GestureDedector.

If you are just starting out, learning these tools might take some time, but they are very powerful. Flutter also has a unique way of managing their sizes; the Center or ListView has a bigger view than Image and Text.

A regular Flutter face would look like this-

SingleChildScrollView(
padding:EdgeInsets.symmetric(horizontal:24, vertical:48),
child:Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:<Widget>[
Text(
_currentMovie.title.replaceAll(" ", "\n").toUpperCase(),
style:TextStyle(
shadows: [
Shadow(
offset:Offset(2.0, 2),
blurRadius:2.0,
color:Colors.black87)
],
color:Colors.white,
fontSize:44,
fontFamily:'Raleway',
fontWeight:FontWeight.w700),
),

Container(

margin:EdgeInsets.symmetric(vertical:16),
height:5,
width:30,
color:Colors.red[200],
),

Text(_currentMovie.type +" ("+ _currentMovie.year +")",

style:TextStyle(
shadows: [
Shadow(
offset:Offset(2.0, 2),
blurRadius:2.0,
color:Colors.black87)
],

fontFamily:'Raleway',
fontWeight:FontWeight.normal,
color:Colors.white,
fontSize:20))
],

),

);

Now, let’s compare it with android XML-

<ScrollView

android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingTop="48dp"
android:paddingBottom"48dp">

<LinearLayout

android:layout_width="match_parent"
android:layout_height="match_parent"
orientation="vertical">

<TextView

android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fontFamily="@font/raleway_black"
android:textSize="38sp"
android:textColor="@android:color/white"
android:shadowColor="@android:color/black"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="4"/>

<View

android:layout_width="40dp"
android:layout_height="5dp"
android:layout_marginTop="14dp"
android:background="#df9494"/>

<TextView

android:id="@+id/details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Description"
app:fontFamily="@font/raleway_regular"
android:textColor="@android:color/white"
android:shadowColor="@android:color/black"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="4"
android:textSize="20sp"/>

</LinearLayout>

</ScrollView>

You will notice that both look similar.

In flutter, you can create all android screens, even without having similar widgets.

5. SDKs in Flutter are limited.

Indeed, all SDKs might not be available on Flutter; however, you can build your existing android SDKs using Flutter Channels.​

Start with calling an async method from Flutter.

This will open a MethodChannel on Android that acts as an ObservableEmitter. The last step is to pass your method name and match it with your SDKs and, lastly, publish the results on the Flutter Channel.

//From Flutter

Future<String>_getBatteryLevel() async {
String batteryLevel;

try {

//invoke the platform specific code
//wait for the result

finalint result =await platform.invokeMethod('getBatteryLevel');
batteryLevel ='Battery level at $result % .';
} onPlatformExceptioncatch (e) {
batteryLevel ="Failed to get battery level: '${e.message}'.";

}

return batteryLevel;

}

//On Android

classMainActivity() : FlutterActivity() {
overridefunonCreate(savedInstanceState:Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, "samples.flutter.io/battery").setMethodCallHandler { call, result ->

if (call.method =="getBatteryLevel") {
val batteryLevel = getBatteryLevel()

if (batteryLevel !=-1) {

result.success(batteryLevel)

} else {

result.error("UNAVAILABLE", "Battery level not available.", null)

}

} else {

result.notImplemented()

}
}
}
}

For accessing design libraries, Flutter offers a dedicated UI toolbox. It looks similar to the android one. Let’s have a look-

classMyPainterextendsCustomPainter {
...

@override

voidpaint(Canvas canvas, Size size) {
final line =Paint()
..color = lineColor
..strokeCap =StrokeCap.round
..style =PaintingStyle.stroke
..strokeWidth = width;

final center =Offset(size.width/2, size.height/2);
final radius =min(size.width/2, size.height/2);
canvas.drawCircle(
center,
radius,
line
);
)

)

Conclusion

These were some popular Fluter myths that many developers still believe in.

Many big companies are now using Flutter to build their mobile and web apps because it’s time-saving and quite efficient.

And, with time, the Flutter team is coming up with new features to make it the top open-source framework.