Emery's blog

Introduction to Flutter framework and Dart programming language.

Dave Emery Otieno's photo
Dave Emery Otieno
·

5 min read

Table of contents

Introduction

In the rapidly evolving world of mobile application development, creating high-quality apps that work seamlessly across multiple platforms is a key challenge. Developers often face the dilemma of choosing between building separate apps for Android and iOS or compromising on user experience and performance by using hybrid frameworks. However, with the advent of Flutter, a powerful UI toolkit by Google, this dilemma is becoming a thing of the past.

What is flutter?

Flutter is a mobile SDK, built and open-sourced by Google; and at its core, it’s about empowering everyone to build beautiful mobile apps. Whether you come from the world of web development or native mobile development, Flutter makes it easier than ever to create mobile apps in a familiar, simplified way. Flutter is special in that it makes it truly possible to “write once, and deploy everywhere.” It was first introduced by Google in 2017 and has gained significant popularity and traction ever since. With its rich set of pre-designed widgets, extensive documentation, and strong community support. The value that Flutter provides is astonishing.

Why does Flutter use dart?

One of the standout features of Flutter is its use of Dart, an open-source, object-oriented programming language developed by Google and was initially unveiled in 2011. There are reasons to be skeptical of this choice: it’s not one of the most popular, few companies use it in production, and the community must be small, right? Is Google just using it because it owns it? Maybe that was also a reason, but there are practical reasons too:

  • Dart supports both just-in-time (JIT) compiling and ahead-of-time (AOT) compiling: The AOT compiler changes Dart into efficient native code. This makes Flutter fast (a win for the user and the developer), but it also means that (nearly) the entire framework is written in Dart. For you, the developer, that means you can customize almost everything. Dart’s optional JIT compiling allows hot reloading to exist. Fast development and iteration are keys to the joy of using Flutter.

  • Dart is object-oriented. This makes it easy to write visual user experiences with Dart, with no need for a markup language.

  • Dart is a productive, predictable language. It’s easy to learn, and it feels familiar. Whether you come from a dynamic language or a static language, you can get up and running with ease

Key features of Flutter

  • Fast Development and Hot Reload: Flutter provides a hot reload feature that allows you to see the changes you make in your code instantly reflected in the app's UI. This significantly speeds up the development process The fast development cycle enhances productivity and efficiency.

  • Expressive and Reactive Programming: Flutter's reactive programming style and widget-based architecture allow for declarative UI development, resulting in highly performant and responsive applications with smooth animations and transitions.

  • Beautiful and Customizable UI: Flutter comes with an extensive set of pre-designed widgets, allowing you to build beautiful and visually appealing user interfaces. These widgets are highly customizable, enabling you to create unique and branded designs for your app.

  • Performance and Native-Like Experience: Flutter utilizes a high-performance rendering engine called Skia, which allows it to achieve native-like performance. Flutter apps are compiled into native code, resulting in fast startup times and smooth animations. By leveraging the GPU (Graphics Processing Unit), Flutter delivers excellent performance and can handle complex UI interactions without compromising on user experience.

What is needed to run Flutter and Dart code?

To run Flutter and Dart on a computer. You'll need to have the following:

  1. Install Flutter SDK: Download the Flutter SDK for Windows from the official Flutter website (flutter.dev).

  2. Install Dart SDK: Flutter requires the Dart SDK. Download the Dart SDK for Windows from the official Dart website (dart.dev/get-dart)

  3. Set up an IDE: Flutter can be used with various IDEs, but the most popular ones are Android Studio and Visual Studio Code (VS Code). Install your preferred IDE and install the Flutter and Dart plugins/extensions for the IDE.

Before we dive right into coding in Flutter, we should get started with some dart basics. This is to help us(me and you) to get a feel of the language. I will start you off with a simple 'hello world' dart code snippet.

void main() {
  print('Hello, World!');
}

In Dart, the main() function is the entry point of the program. It is where the execution starts. In this example, the main() function simply calls the print() method to display the string "Hello, World!" on the console.

You can save the code in a file with a .dart extension (for example the file can be named, hello_world.dart).

I willl also give you a code snippet for the same 'hello world ' output in flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    ),
  );
}

This code displays a simple "Hello, World!" message using a Text widget inside a Scaffold widget. The AppBar widget sets the app's title and the Center widget aligns the text at the center of the screen.

Conclusion

I am unable to cover all the basics in this one article, but I will do more articles in a similar manner in the future to show you that it does not take much to get started in Flutter. In conclusion, Flutter is an innovative and powerful framework for building cross-platform mobile applications. With its expressive UI components, hot-reload feature, and robust performance, Flutter has gained popularity among developers worldwide.

introduction to flutterintroduction to dart