DEV Community

Cover image for Summary of Dart & Flutter
Abdi Adan
Abdi Adan

Posted on

Summary of Dart & Flutter

Dart

What is Dart?

Dart is a

  • Client-optimized

    • It is optimized for use in applications that are client-oriented
    • Use of Dart Virtual machine that helps to optimize the code and compile Just In Time (super fast development) and render or re-render UI very easily
  • Garbage-collected

    • A form of automatic memory management
    • This relieves the engineer from performing manual memory management where the programmer specifies what objects to deallocate and return to the memory system and when to do so
  • OOP language for creating fast apps

that can run multiple platforms & form factors.

What can you do with Dart?

Dart is a very flexible language thanks to the environment in which it lives. Once the source code has been written (and tested) it can be deployed in many different ways:

In Deployment and production ready software:

(AOT + Runtime on Desktop & Mobile, dart2js on Web)

  • Stand-alone

    • In the same way as a Java program can’t be run without the Java Virtual Machine (JVM), a stand-alone Dart program can’t be executed without the Dart Virtual Machine (DVM).
    • There’s the need to download and install the DVM which executes Dart in a command-line environment.
    • The SDK, other than the compiler and the libraries, also offers a series of other tools: - The pub package manager (more on pub.dev) - Dart2js, which compiles Dart code to deployable JavaScript;
  • AOT compiled

    • The Ahead Of Time compilation is the act of translating a high-level programming language, like Dart, into native machine code.
    • Basically, starting from the Dart source code you can obtain a single binary file that can execute natively on a certain operating system. AOT is really what makes Flutter fast and portable.
    • With AOT there is NO need to have the DVM installed because at the end you get a single binary file (an .apk or .aab for Android, an .ipa for iOS, an .exe for Windows...) that can be executed on mobile, web & desktop
  • Web.

    • Thanks to the dart2js tool, your Dart project can be "transpiled" into fast and compact JavaScript code. By consequence Flutter can be run, for example, on Firefox or Chrome and the UI will be identical to the other platforms.
    • AngularDart is a performant web app framework used by Google to build some famous websites, such as "AdSense" and "AdWords". Of course it’s powered by Dart!

In debugging and developing:

(JIT + DVM in Mobile & desktop, dartdevc in web)

  • Desktop/mobile.

    • The Just In Time (JIT) technique can be seen as a "real time translation" because the compilation happens while the program is executing. It’s a sort of "dynamic compilation" which happens while the program is being used.
    • JIT compilation, combined with the DVM (JIT + VM in the picture), allows the dispatch of the code dynamically without considering the user’s machine architecture.
    • In this way it’s possible to smoothly run and debug the code everywhere without having to mess up with the underlying architecture
  • Web

    • The Dart development compiler, abbreviated with dartdevc, allows you to run and debug Dart web apps on Google Chrome. ( Note that dartdevc is for development only: for deployment, you should use dart2js. )

Here are a few Key Points to note when working with Dart:

The Dart type system

~ "The Dart language is type safe"

  • It uses a combination of static type checking and runtime checks to ensure that a variable’s value always matches the variable’s static type, sometimes referred to as sound typing.
  • Although types are mandatory, type annotations are optional because of type inference.
  • There are a myriad of benefits provided by the dart type system including the ability to find bugs at compile time using Dart’s static analyzer ( Static analysis allows you to find problems before executing a single line of code. It’s a powerful tool used to prevent bugs and ensure that code conforms to style guidelines.)
  • The analyzer can be extended and customized to fit a project’s unique code guidelines. You can also configure the linter, one of the analyzer’s plugins, to ensure that your code complies with the Dart Style Guide and other suggested guidelines in Effective Dart.

  • For more info on The dart type system check out https://dart.dev/guides/language/type-system

Sound-Null Safety

  • Types in your code are non-nullable by default, meaning that variables can’t contain null unless you say they can.
  • Dart null safety support is based on the following three core design principles:
    • Non-nullable by default (nnbd):
      • Unless you explicitly tell Dart that a variable can be null, it’s considered non-nullable.
    • Incrementally adoptable
      • You choose what to migrate to null safety, and when. You can migrate incrementally, mixing null-safe and non-null-safe code in the same project.
    • Fully sound
      • Dart’s null safety is sound, which enables compiler optimizations. If the type system determines that something isn’t null, then that thing can never be null. Once you migrate your whole project and its dependencies to null safety, you reap the full benefits of soundness — not only fewer bugs, but smaller binaries and faster execution
  • For more details on Null Safety check out: https://dart.dev/null-safety

  • N/B: Soundness means that you can trust the type system when it determines that something isn’t null because it can never make a mistake. You can achieve soundness only if all libraries you use in the project have null-safe code.

Effective Dart

  • A surprisingly important part of good code is good style. Consistent naming, ordering, and formatting helps code that is the same look the same.
  • If we use a consistent style across the entire Dart ecosystem, it makes it easier for all of us to learn from and contribute to each others’ code.
  • An Example of these rules and guidelines is; DO name types using UpperCamelCase
  • Having said that, it is vital to acquaint yourself with the rules and guidelines that are proposed in the Effective dart guide.

  • For more details check out https://dart.dev/guides/language/effective-dart

For more info on dart head on over to https://dart.dev/

Flutter

What is Flutter?

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

Why Flutter?

Fast Development

  • Cuts development time by a huge margin considering that you no longer need to write multiple codebases for different platforms & form factors
  • Flutter allows you to Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.

Expressive and Flexible UI

  • Quickly ship features with a focus on native end-user experiences. Layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.

Native Performance

  • Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart's native compilers.

Why Does Flutter Use Dart ?

  • OOP Style

    • Dart is easy to learn as it adopts most of the common OOP patterns that developers are familiar with. Performances
    • In order to guarantee high performances and avoid frame dropping during the execution of the app, there’s the need for a high performance and predictable language. Dart can guarantee to be very efficient and it provides a powerful memory allocator that handles small, short-lived allocations. This is perfect for Flutter’s functional-style flow
  • Productivity

    • Flutter allows developers to write Android, iOS, web and desktop apps with a single codebase keeping the same performance, aspect and feeling in each platform. A highly productive language like Dart accelerates the coding process and makes the framework more attractive
    • Both Flutter and Dart are developed by Google which can freely decide what to do with Them listening to the community as well. If Dart was developed by another company, Google probably wouldn’t have the same freedom of choice in implementing new features and and the language couldn’t evolve at the desired pace

Here are a few Key Points to note when working with Flutter:

  • Documentation

    • Inclues an in-depth guide on dart classes and flutter implimentation details. Below are few examples to check out:

      • Stateful Widget
        • Everything on the UI in flutter is a widget.
        • A stateful widget is a one that has a mutable state.
        • State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget. In simpler terms it basically is “whatever data you need in order to rebuild your UI at any moment in time”.
        • It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState.
        • A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely.
        • The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of concrete RenderObjects(An object in the render tree) ).
        • For more on stateful widgets see https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
      • BuildContext

        • A handle to the location of a widget in the widget tree
        • It is used in Widget’s build method, Navigator, MediaQuery, and various builders to name a few.
        • Since Widgets appear in a tree alongside other widgets on a user’s device screen, the BuildContext class keeps information about where a concrete instance of a widget is in the tree, and therefore what its size, parents & children are.
        • It is basically a class that gives context(more info) to a widget, specifically regarding its location, size, parents & children.
        • A good explanation video on what BuilContext is https://www.youtube.com/watch?v=MFNe7hdOCVs

Links And Resources

For a more in depth dive on flutter and some of it inner workings go to:

https://flutter.dev/docs

https://flutter.dev/docs/resources/architectural-overview

For more info on dart head on over to https://dart.dev/

For a guided walkthrough on Dart & Flutter ensure you read the book on; https://fluttercompletereference.com/
You can also ask for a softcopy version of the book from me.

For more details & discussions on this and other related content, check out https://github.com/Abdi-Adan/Notes

Top comments (1)

Collapse
 
pablonax profile image
Pablo Discobar

hey, cool job! if you are interested in this topic, then check this article - dev.to/pablonax/free-flutter-templ...
I'm sure you'll like it, dude!