Post

Dart and Flutter Intro

What is Dart and Flutter?

Just like how React JS is a front-end dev framework (started in 2010, component based architecture), Dart 1.0 was released in 2013. Dart is a programming language designed for client development, such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications.

Dart is similar to C, is object-orientated programming language. Dart, when used in web applications, is transpiled to JavaScript so it runs on all web browsers. The Dart installation comes with a VM as well to run the .dart files from a command-line interface. The Dart files used in Flutter apps are compiled and packaged into a binary file (.apk or .ipa) and uploaded to app stores.

Key characteristics

What does coding in Dart look like? Like most ALGOL languages (like C# or Java):

  • The entry point of a Dart class is the main() method. This method acts as a starting point for Flutter apps as well.
  • The default value of most data types is null.
  • Dart classes only support single inheritance. There can be only one superclass for a particular class but it can have many implementations of Interfaces.
  • The flow control of certain statements, like if conditions, loops (for, while and do-while), switch-case, break and continue statements are the same.
  • Abstraction works in a similar manner, allowing abstract classes and interfaces.

Unlike them (and sometimes a bit like JavaScript):

  • Dart has type inference. The data type of a variable need not be explicitly declared, as Dart will “infer ”what it is. In Java, a variable needs to have its type explicitly given during declaration. For example, String something;. But in Dart, the keyword is used instead like so, var something;. The code treats the variable according to whatever it contains, be it a number, string, bool or object.
  • All data types are objects, including numbers. So, if left uninitialized, their default value is not a 0 but is instead null.
  • A return type of a method is not required in the method signature.
  • The type num declares any numeric element, both real and integer.
  • The super() method call is only at the end of a subclass’s constructor.
  • The keyword new used before the constructor for object creation is optional.
  • Method signatures can include a default value to the parameters passed. So, if one is not included in the method call, the method uses the default values instead. It has a new inbuilt data type called Runes, that deal with UTF-32 code points in a string. For a simple example, see emojis and similar icons. And all these differences are just a few in the many that you can find in the Dart Language tour, which you can check out here.

Dart also has inbuilt libraries installed in the Dart SDK, the most commonly used being:

  • dart:core for core functionality; it is imported in all dart files.
  • dart:async for asynchronous programming.
  • dart:math for mathematical functions and constants.
  • dart:convert for converting between different data representations, like JSON to UTF-8.

Others:

Dart indentation is 2 spaces, which is unlike the usual 4 spaces. Additionally, dart line length is 80 characters.

Flutter and Dart Documentation practices

  • ✅ format comments like sentences
  • ✅ use /// doc comments to document members and types.

  • ❌ do not use block comments for documentation
  • ❌ don’t write documentation for both getter and setter of a property.

DartDoc

Dart Doc command does parsing of doc comments and is able to generate doc pages from them.

  • A doc comment is a comment that appears before a declaration and uses the special /// syntax that dart doc looks for. Javadoc style /** ... */ is supported as well, but it is less preferred by dart community.

  • Do consider writing library-level doc comments as well, including single sentence summary of what the library is for, terminology and some samples.

  • Start doc comments with a single sentence summary. Also, separate the first sentence of a doc comment into its own paragraph.

1
2
3
4
5
6
7
/// Deletes the file at [path].
///
/// Throws an [IOError] if the file could not be found. Throws a
/// [PermissionError] if the file is present but could not be deleted.
void delete(String path) {
  ...
}
  • Avoid redundancy with surrounding context
  • Prefer third person verbs
  • Prefer noun phrase, result of work, not work itself.
  • Prefer starting boolean variable with “Whether”
  • Use square brackets in doc comments to refer to in-scope identifiers.
  • Allowed to use most markdown formatting in doc comments. But avoid using excessively.
  • Prefer brevity, avoid abbrevations, acronyms
  • Prefer using “this” to refer to a member’s instance

To run DartDoc, do:

1
2
// command generates documentation based on DartDoc comments
dart doc

Open index.html in doc directory to view generated documentation.

Structure

Extracting widgets: Having separate widgets for separate logical parts of your UI is an important way of managing complexity in Flutter. Flutter provides a refactoring helper for extracting widgets, make sure that the line being extracted only accesses what it needs.

That’s all for now!

This post is licensed under CC BY 4.0 by the author.