+4 votes
163 views
in Web development by (242k points)
reopened
Flutter: introduction to the cross-platform framework

1 Answer

+5 votes
by (1.6m points)
edited
 
Best answer

What is Flutter?
What is Flutter used for?
What programming language does Flutter use?
Everything is a widget: the basic principle of Flutter
Flutter: simple examples
What does it take to code with Flutter?
Advantages and disadvantages of Flutter
Advantages of Flutter
Disadvantages of Flutter

image

Flutter: introduction to the cross-platform framework

Software developers know: it is no longer enough to develop a program just for Windows. Nowadays, if you want your program to be a success, it also has to work on Android and iOS devices, as well as browsers..

To achieve this result, it was necessary to adapt and compile the code for each of these platforms. Sometimes even more important changes were needed to take into account the particularities of each operating system and to apply the design and functionality of the familiar user interfaces in the application itself. Flutter simplifies development for multiple platforms as the same code base is used for all of them.

Index
  1. What is Flutter?
  2. What is Flutter used for?
  3. What programming language does Flutter use?
  4. Everything is a widget: the basic principle of Flutter
  5. Flutter: simple examples
  6. What does it take to code with Flutter?
  7. Advantages and disadvantages of Flutter
    1. Advantages of Flutter
    2. Disadvantages of Flutter

What is Flutter?

Flutter is a framework for developing applications for different platforms developed by Google and published for the first time as an open source project in late 2018. This development kit offers a large number of libraries for standard elements of the Android and iOS user interface , but it can also be used to develop desktop web applications. The applications developed with Flutter have the normal appearance of the applications in each system and behave as expected of them in all of them without the programmers having to pay attention to the particularities of each system..

What is Flutter used for?

Flutter is used mainly to develop Android and iOS applications without having to write its own code base for each of these systems, which are completely different from each other. In this context, mobile applications run as true native applications on devices. Before publication, they are compiled for the corresponding platform, so they do not need a runtime module or a browser. On the same code base, you can create web applications for browsers and native programs for Windows, Linux and macOS.

Google uses Flutter, for example, for various Google Assistant modules and the Google Home Hub user interface. There are also different eCommerce providers, such as eBay, Groupon or the Alibaba Group, that use Flutter to give their web and mobile applications a uniform look and feel..

What programming language does Flutter use?

The Flutter SDK ( software development kit ) is based on the Dart programming language , also developed by Google in order to become a successor to the classic JavaScript which, like this, runs directly in the browser. On a server, Dart programs can be run directly; in a browser, they are run in JavaScript using the Dart2js transcompiler . Applications for Google's new Fuchsia platform are developed with Dart, a language that structurally resembles object-oriented languages ​​such as Java or C #.

advice

In our detailed tutorial on Dart programming we explain how it is programmed with the Google language.

Everything is a widget: the basic principle of Flutter

The strategy Flutter, everything is a widget , follow the basics of object - oriented programming to the user interface: the interface of the program consists of different widgets that can be nested between them. Each button and displayed text is a widget . These have different properties that can be modified.

They can interact with each other and react to external state changes through their built-in functions. All the important elements of the user interface include widgets that correspond to Android and iOS layouts or conventional web applications. If desired, these widgets can be expanded with additional functions or you can create your own widgets that can easily be combined with existing ones.

Compared to other SDKs, widgets offer greater flexibility, but have the disadvantage that they are part of the program's source code, so the code is highly nested and can be confusing.

Flutter: simple examples

To make it easier to get started, the developers provide numerous Flutter samples . A project as simple as? Hello world? it now allows you to observe the basic structure of a program with a widget and a simple void Main () function that starts the program.

  // Copyright 2018 The Flutter team. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:Flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } }  

On a smartphone or simulation, the program shows, at the top, the title bar? Welcome to Flutter? of the AppBar () element of the widget . In the empty screen space below, which is called body in Flutter , the text? Hello World? Appears in this case. in centered position.

image
A program? Hello World? simple in Flutter

Other interactive examples show Flutter applications in the browser along with the Dart source code. When modified, the effect can be observed in the live application.

image
Simple test programs with Flutter in the browser

Flutter Gallery demonstrates the use of different types of standard widgets through some sample applications. Element categories for user interfaces consciously avoid, as we are used to in open source projects, Android and iOS trade names and instead use the designations? Material? (according to Google's design language) and? Cupertino? (by Apple's corporate headquarters).

image
Flutter Gallery with examples for using user interface elements
advice

On GitHub, the Flutter team brings together numerous developer apps and tutorials to make it easier to get started with programming with Flutter.

What does it take to code with Flutter?

All important command line libraries and tools for software development are in the Flutter SDK , the software development kit that is freely downloadable from the official website.

Although it does not have its own integrated development graphical environment, to write the source code you can use any text editor. Google recommends installing Android Studio to make programming more comfortable. Flutter provides plugins for Android Studio to more easily integrate libraries and allow syntax highlighting in the editor. There are also plugins for Microsoft's development platform, Visual Studio Code.

Note

You can find more information about installing and programming with Flutter in our Flutter tutorial.

Advantages and disadvantages of Flutter

Each SDK and programming language has its advantages and disadvantages. But, taking stock, it could be said that the advantages of Flutter compared to other similar systems outweigh the disadvantages .

Advantages of Flutter

  • A single code base for all major target platforms.
  • Easy to learn Dart programming language.
  • The paradigm everything is a widget offers numerous possibilities.
  • Powerful execution of native applications on smartphones.
  • Extensive libraries with pre-built GUI elements.
  • Simple implementation of data flows to provide current information to all users.
  • Hot Reload speeds up testing during development.

Disadvantages of Flutter

  • Program code can get confusing when integrating widgets.
  • In case of updating aspects of the design in the operating systems, the Flutter modules must be updated. As the modules are permanently integrated into the program, the program must also be compiled and installed on the devices.
  • It is still a new and not very widespread language, it has a small community.

...