.svg)
Have you ever heard of the term "Flutter Web"?
It is a framework that can be said to be an evolved version of Flutter, and it is attracting attention among developers because it can develop mobile apps and web applications with one code base.
This time, why is Flutter Web attracting attention about "Flutter Web" that is attracting such attention? We will explain in detail from basic explanations to development procedures and future prospects.
Also, if you want to know the basic knowledge about Flutter, "What is Flutter? I think you will understand more if you read "Cracking the charm of cross-platform development" together. Please take a look.
"Flutter Web" is also called "Flutter for Web" and "Flutter on the Web" and is a new framework that was just announced in 2019 and is still under development.
In recent years, due to the attractive point that development efficiency and development costs can be reduced, the number of applications made by Flutter has attracted the attention of developers and others.
First of all, Flutter is a cross-platform mobile application development framework that allows you to develop applications on multiple platforms with one base code developed by Google. And Flutter Web is a framework that makes it possible to develop applications not only mobile applications but also web applications at the same time, as the Web in its name. In other words, you can use the same codebase to develop applications for mobile, web, and desktop.
The feature of Flutter Web is that you can take advantage of the advantages of mobile apps and web apps and develop them efficiently with one code. It is an excellent choice in terms of improving development efficiency, reducing costs, and improving user experience. In addition to the features and benefits of Flutter, we will summarize the unique features of Flutte Web below.
・Reduce labor costs, development time, and operating costs by integrating the development team
Because one codebase can cover multiple platforms, you can integrate development teams and reduce their costs and time.
・Consistency of the project
Provide a consistent UI between platforms to achieve consistency in user experience and brand image.
・Modern UI framework and fulfilling development tools
A wealth of development tools and libraries are available, making it possible to build a modern and flexible UI.
・Hot reload function
It is possible to develop while reflecting and confirming the code under development in real time, so it realizes quick development and debugging.
In addition to the above, the features and benefits of Flutter Web are as follows:
・Web applications can also be covered with one code
The biggest advantage of Flutter Web is that it can cover applications for mobile, web, and desktop with a single code. Reduce the amount of work that has been done twice or three times in the past and realize efficient app development.
・The smoothness of testing and debugging specific to web applications
Since the code is unified across platforms, debugging measures such as responding to updates and specification changes, finding and fixing bugs can be done smoothly. It is a great advantage in terms of maintenance, operation and support.
・Realization of performance close to native
Because Flutter itself focuses on smooth animation, it can realize high-quality UI and animations similar to mobile applications in web applications.
・Ease of testing
Web applications are easier to test because they operate more smoothly than mobile applications such as xCode and emulators.
・Excellent customization
Flutter Web uses UI elements called widgets (*1) to build apps, so UI customization and reuse are flexible, and unique designs and animations can be realized. In addition, responsive design is supported, so the UI automatically supports different screen sizes and devices. In addition, anyone can easily create a well-organized UI using the platform's design parts.
※1: What is Widget?
Single-function application software that is displayed small on the system screen, etc. In addition, display and operation elements with some functions that make up the computer's operation screen (GUI). The former is also called "gadget" (gadget). ( Source: Dictionary of IT Terms)
Flutter uses a simple and easy-to-use language called Dart. Dart, released in 2011, is an object-oriented (*2 programming language developed by Google, providing rich libraries and tools, enabling flexible and efficient code writing, and improving performance and efficiency. It plays a role in making it.
※2: Object-oriented
One of the ways of thinking about the design and implementation of computer programs, defining data and procedures (processing procedures) that are closely related to each other as a group called "object" and assembling various objects A method of building the whole program together. ( Source: Dictionary of IT Terms)
In addition, Flutter can define the appearance and behavior such as UI layout and design by specifying the hierarchical structure and properties of widgets using Dart. The construction of complex UI designs can be easily created by combining various widgets (images, animations, text, etc.) that are the design parts that build Flutter's UI. It has become.
Here I will introduce the introduction procedure of Flutter Web.
Installation of Flutter SDK
Download the "Flutter SDK" from the Flutter official website. At this time, you need to be careful to install the correct version.
▼
Creation of the project
Once the Flutter SDK is installed, open the terminal and enter a command to create a new Flutter project.
flutter create "name_of_the_app"
Enter in this place called "name_of_the_app"
cd name_of_the_appflutter config --enable-web
Now you are ready to use Flutter Web in the name_of_the_appproject.
▼
Build and run web applications
Launch the application with the following command.
flutter run -d chrome
The above command is executed in the Google Chrome browser, but it can also be executed in other browsers. This is ready to develop applications with Flutter Web.
In this way, mobile apps and web apps can all be developed with one code.
Flutter Web is a beta version, so some features may be limited, and developers need to pay close attention to the latest information and updates. In addition, Flutter Web is a new technology, so there are still some improvements, such as few developers who can handle it, and errors cannot be found or corrected with Web Inspector (※3).
※3 Web Inspector
One of the functions for developers such as web browsers, a tool to display files that make up the web page being displayed, source code such as HTML, CSS, JavaScript, and details such as styles and attributes of each element It's called an inspector or simply an inspector. ( Source: Dictionary of IT Terms)
Regarding the above issues, Flutter was developed by Google and has a wide range of support and community, so it is thought that it will be improved more and more in the future. In addition, by combining with new technologies, we can expect further performance improvement. For example, the implementation of virtual reality (AR) functions is currently provided through packages and plug-ins. However, AR technology is evolving rapidly, so it is thought that Flutter will continue to enhance its functions corresponding to AR. Currently, it relies on platform-specific technology, so in order to implement AR functions, it is necessary to implement it for each platform instead of one code, but Flutter that can be developed simultaneously with one code This point has been improved and developed to realize Fluttter AR.
Among the apps made by Flutter that can support multiple platforms, this time I will introduce two.
・BMW
BMW, a car manufacturer based in Munich, Germany, provides an app called "My BMW" that improves convenience when riding BMW cars, such as identifying vehicle locations, locking and unlocking doors. This service was also developed by Flutter.
At BMW, as many as 300 engineers are developing with Flutter, which is the world's largest Flutter development team after Google.
・Grab
Grab, which started its service based in Malaysia and is currently rapidly expanding its services mainly in Southeast Asia, is developing services such as financial services such as food delivery, car dispatch, and payment. Among them, an app called "Grab Merchat" for restaurants that want to provide products and an app called "Grab Driver" for those who want to provide drivers were developed in Flutter. There are two types, one for Andoid and iOS, and have been downloaded more than 200 million times in total.
It is said that at least 1/3 of the time required for the series of development such as the addition, testing, and release of new functions has been shortened.
So far, we have explained the basic knowledge of FlutterWeb and the actual introduction procedure and future prospects. Apps made by Flutter are increasing year by year, and there are cases where existing apps are being rewritten with Flutter. It can be expected that FlutterWeb, an attractive framework for app development, will continue to attract attention in the future, which allows you to develop apps for mobile apps and web apps with one codebase.
While JIITAK is also developing various products, Flutter has been adopted, and now Flutter application development / Flutter Web development has become one of JIITAK's strengths. We are building a flexible development team by combining various technologies from front-end development centered on Flutter to backend such as Node.js, Python, PHP, GO, Java, etc. This makes it possible to provide the best solution for business requirements, purposes and budget. If you have any problems with mobile app or web application development, please contact JIITAK.
.svg)
