Shulou(Shulou.com)06/03 Report--

This article mainly explains how to write a cross-platform Hello World for getting started with Flutter. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write a cross-platform Hello World on how to get started with Flutter.

This is a cross-end era, after you sing all kinds of cross-end frameworks, I will take the stage. Today, the editor leads you to introduce Flutter to see if it is as good as it is legendary. Sharpen the knife without mistakenly chopping firewood, let's install the Flutter development environment first. Install Android Studio first, then select Browser Repositories in Settings- > Plugin to install the Flutter plug-in online. When you install the Flutter plug-in, it prompts you to install the Dart language plug-in automatically.

Install the plug-in

After the plug-in is installed, you need to go to the Flutter Chinese official website to download SDK (much faster than the English official website), and set up the system environment variables of Flutter Path and Git Path according to the requirements of the official website. Then enter the flutter doctor command in the command line window, which will automatically associate the download Dart SDK. If the download is found to be slow, you can map the FLUTTER_STORAGE_BASE_URL and PUB_HOSTED_URL addresses to the Chinese station and add them to the system environment variables. After flutter doctor has been run many times, I will see a hint that the android studio version of the editor is too low (mine is version 2.3, while flutter requires version 3.0 or above). Unlucky, I have to upgrade android studio, which is about 1 G, which is enough for me to download. Go and make a cup of coffee before continuing.

Flutter doctor command

Examination result

After the new version of android studio is installed, follow the initial steps to install the flutter and dart plug-ins in the settings- > plugins menu, and then you can start New a flutter Project in the File menu!

New flutter project

After the completion of the project, we can see that the flutter app code is written in the Java language, the syntax is very similar to Dart, and there is almost no new learning cost. From the MyApp code, we can know that the interface in flutter is built with Widget, which is different from Android. Later, the editor will take you to savor Widget.

Import 'package:flutter/material.dart'; void main () {runApp (MyApp ());} class MyApp extends StatelessWidget {/ / This widget is the root of your application. @ override Widget build (BuildContext context) {return MaterialApp (title: 'Flutter Demo', theme: ThemeData (/ / This is the theme of your application. / Try running your application with "flutter run" You'll see the / / application has a blue toolbar. Then, without quitting the app, try / / changing the primarySwatch below to Colors.green and then invoke / / "hot reload" (press "r" in the console where you ran "flutter run", / / or simply save your changes to "hot reload" in a Flutter IDE) / / Notice that the counter didn't reset back to zero; the application / / is not restarted. PrimarySwatch: Colors.blue, / / This makes the visual density adapt to the platform that you run / / the app on. For desktop platforms, the controls will be smaller and / / closer together (more dense) than on mobile platforms. VisualDensity: VisualDensity.adaptivePlatformDensity,), home: MyHomePage (title: 'Flutter Hello wordings'),);}}

After running, we can see that the flutter program runs smoothly in the android system in the Android simulator. It does not need to do any android code migration and naturally supports android. Of course, it also naturally supports iOS, which is our first cross-end app!

At this point, I believe you have a deeper understanding of "how to write a cross-platform Hello World". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.