The Art of Flutter: Designing Beautiful Apps Simplified

INTRODUCTION :

Flutter is an open source UI software development framework by Google which is powered by Dart programming language. It was first released in May 2017 and is used to develop apps for Android, iOS, macOS, Windows and Linux from a single codebase. It is fast and responsive, and helps in creating beautiful and interactive apps with ease.

DART programming language :

To understand flutter, one must first know the fundamentals of the language it is built upon. Dart is an open-source, general purpose programming language developed by Google, which was first announced in 2011. It is an easy to learn language with C-style syntax.

Key features of Dart :

1. Fast and efficient : Dart programs are compiled into native machine code which makes them faster and more responsive, especially for apps demanding high performance.

2. Object-Oriented : Dart is an object oriented language, i.e. it organizes code into objects that store data, and supports classes, inheritance and polymorphism.

3. JIT and AOT compilation : Dart uses Just In Time (JIT) and Ahead of Time (AOT) compilation which allows developers to use the function of hot-reload during development, which allows one to view changes to the program in real-time, without having to re-run the program every time a change is made.

4. Garbage Collection : Dart includes automatic memory management through garbage collection, which helps in avoiding memory leaks and manage memory efficiently

5. Standard Libraries : Dart comes with a rich set of standard libraries which include multiplatform libraries, native platform libraries and web platform libraries, each having their own perks and making the overall development process easier.

6. Cross-Platform : It is a cross-platform language used for developing apps in windows, iOS, macOS, linux, etc. However it is primarily used for developing mobile apps with flutter.

Now, you might be wondering, why Dart? Why not use any other programming language for flutter?

Well, flutter has experimental support for using other languages as well, such as Kotlin and Swift for platform-specific code. However, Dart is the most widely used language for Flutter primarily due to the following reasons :

1. Performance : The feature of Dart that enables it to compile programs into native machine code is the main reason for using this language in flutter. This allows Flutter to achieve high performance UI rendering, along with interactable UI with smooth animations.
2. Productivity : Dart’s Hot Reload feature is very useful for developing apps in flutter as it helps the developers to see the results of their code modifications almost instantly, speeding up the development and debugging process.
3. Widgets and reactive framework : Dart supports creation of complex and reactive UI, and consists of a vast library of UIs for effective app development.
4. Compatibility : Dart was specifically made keeping Flutter in mind. Hence this close integration allows Flutter to take full advantage of Dart’s features and optimizations for UI development.

Features of Flutter:

So, now we know why almost all flutter programs are created using Dart. However, why use flutter when there are so many other alternatives like React Native (developed by Facebook), Xamarin (owned by Microsoft), Ionic, etc. ?

The following features of Flutter makes it a worthy competitor among the the many app development frameworks:

1. Fast Execution : Due to the ability to create natively compiled apps from a single codebase, the apps created using flutter are faster and need less maintenance as compared to those from React Native or Xamarin.
2. Rich Widget Library : Flutter includes a rich set of widgets, which are the building blocks of UIs. This makes it easy to create complex and beautiful UIs without having to write a lot of custom code. React Native and Xamarin also have widget libraries, but they are not as comprehensive as Flutter’s.
3. Native look and feel: Flutter apps look and feel like native apps on each platform as it uses its own rendering engine to draw the UI. React Native and Xamarin apps, on the other hand, rely on native platform controls, which can lead to inconsistencies.
4. Better support for Material Design and Cupertino design : Flutter includes native support for Material Design (native design language for Android) and Cupertino design (native design language for iOS). This makes it easy to create apps that look and feel native on each platform.

GETTING STARTED :

Now we are ready to delve into the vast world of flutter’s widgets and app development capabilities. There are way too many tutorials on the internet on how to install flutter, so that part is skipped in this article. Instead, we’re going to discuss the following basic code part by part :

Importing the Packages :

The main program begins with the above code which imports the material package into the flutter app, which consists of some basic widgets that implement Material design guidelines.

There are other packages too, such as

> auto_size_text : Automatically changes text size to fit desired constraints.

> cached_network_image : Loads images as well as shows placeholders and loading animations.

> equatable : Overloads the == operator and allows user to compare objects without code generation.

Creating a Class :

The above code shows an example of creating a class which is defined as a stateless widget.

Stateful widgets are those which can change it’s appearance when interacted with by the user.
Eg: sliders, checkboxes, etc.

Stateless widgets are those which never change form.
Eg: Icons, texts, etc.

The dev in the above program has created a class called MyApp and assigned it as a stateless widget, hence no changes will appear in the widget while the app is running.

The @override annotation redefines the original class to do something new (specified after the annotation), and is used after one class extends another original class, just like MyApp extends StatelessWidget, hence inheriting all the methods of StatelessWidget and overriding whatever comes after @override.

Building the user interface :

Widget Build is responsible for building the user interface of the widget, where BuildContext defines the current Parent and theme of the widget.

return MaterialApp returns the MaterialApp widget, which is the base widget for the flutter app.

Inside the MaterialApp, we have Scaffold command, which provides a basic layout for Material design apps by defining appBar, title and body.

appBar creates a widget which provides a bar at the top of the screen which can be used to display titles, utilities, etc.

The title command in the appBar creates a text widget which displays whatever is written in the single quotes, in this instance “MyApp”.

Now, the body property of the scaffold widget is defined with the “body:” command, which is set to Center, hence making any child of the body command to be at the center of the page, both horizontally and vertically.

Lastly we have the Child command which creates a child widget inside the Center widget, and the child is set to be a text widget which prints “Hello, world!” in this case.

Running the Code :

Now that we are done with the coding part, it’s time to run the code. The following attachment represents the final output layout of the app :

(Note : program was run using chrome as the output device)

As per the code, We can see the title bar in blue at the top, containing the text widget “MyApp” to the left side. The homepage has the text widget containing the text “Hello, world!” at the center of the screen.

The debug tag at the top right can be removed by setting debugShowCheckedModeBanner property of MaterialApp() widget to false.

Any changes made to the code will be automatically updated in the output due to the hot reload function of Flutter.

Conclusion :

Flutter, powered by Dart is an important platform for app development in the present day. It’s speed, performance and rich library of widgets makes it an easy to use and efficient development kit. Features like hot reload, and native look and feel in most OS puts flutter above the rest of the app development platforms available right now. Dart’s easy to learn C-style syntax also helps speed up the development process.

Hence it’s a good idea to start your app development journey with flutter.