Flutter web run linux

Build and release a web app

During a typical development cycle, you test an app using flutter run -d chrome (for example) at the command line. This builds a debug version of your app.

This page helps you prepare a release version of your app and covers the following topics:

Handling images on the web

The web supports the standard Image widget to display images. However, because web browsers are built to run untrusted code safely, there are certain limitations in what you can do with images compared to mobile and desktop platforms.

Choosing a web renderer

By default, the flutter build and flutter run commands use the auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. This is our recommended combination to optimize for the characteristics of each platform.

For more information, see Web renderers.

Minification

Minification is handled for you when you create a release build.

A debug build of a web app is not minified and tree shaking has not been performed.

A profile build is not minified and tree shaking has been performed.

A release build is both minified and tree shaking has been performed.

Building the app for release

Build the app for deployment using the flutter build web command. You can also choose which renderer to use by using the —web-renderer option (See Web renderers). This generates the app, including the assets, and places the files into the /build/web directory of the project.

The release build of a simple app has the following structure:

Launch a web server (for example, python -m http.server 8000 , or by using the dhttpd package), and open the /build/web directory. Navigate to localhost:8000 in your browser (given the python SimpleHTTPServer example) to view the release version of your app.

Embedding a Flutter app into an HTML page

You can embed a Flutter web app, as you would embed other content, in an iframe tag of an HTML file. In the following example, replace “URL” with the location of your HTML page:

Deploying to the web

When you are ready to deploy your app, upload the release bundle to Firebase, the cloud, or a similar service. Here are a few possibilities, but there are many others:

PWA Support

As of release 1.20, the Flutter template for web apps includes support for the core features needed for an installable, offline-capable PWA app. Flutter-based PWAs can be installed in the same way as any other web-based PWA; the settings signaling that your Flutter app is a PWA are provided by manifest.json , which is produced by flutter create in the web directory.

PWA support remains a work in progress, so please give us feedback if you see something that doesn’t look right.

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the BSD License.

Источник

Linux install

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

  • Operating Systems: Linux (64-bit)
  • Disk Space: 600 MB (does not include disk space for IDE/tools).
  • Tools: Flutter depends on these command-line tools being available in your environment.
    • bash
    • curl
    • file
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • xz-utils
    • zip
  • Shared libraries: Flutter test command depends on this library being available in your environment.
    • libGLU.so.1 — provided by mesa packages such as libglu1-mesa on Ubuntu/Debian and mesa-libGLU on Fedora.
Читайте также:  Usbccid smartcard reader driver windows 10

Get the Flutter SDK

On Linux, you have two ways you can install Flutter.

Install Flutter using snapd

The easiest way to install Flutter on Linux is by using snapd. For more information, see Installing snapd.

Once you have snapd, you can install Flutter using the Snap Store, or at the command line:

Note: Once the snap is installed, you can use the following command to display your Flutter SDK path:

Install Flutter manually

If you don’t have snapd , or can’t use it, you can install Flutter using the following steps.

Download the following installation bundle to get the latest stable release of the Flutter SDK:

For other release channels, and older builds, see the SDK releases page.

Extract the file in the desired location, for example:

If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repo on GitHub with the following command:

You can also change branches or tags as needed. For example, to get just the stable version:

Add the flutter tool to your path:

This command sets your PATH variable for the current terminal window only. To permanently add Flutter to your path, see Update your path.

Optionally, pre-download development binaries:

The flutter tool downloads platform-specific development binaries as needed. For scenarios where pre-downloading these artifacts is preferable (for example, in hermetic build environments, or with intermittent network availability), iOS and Android binaries can be downloaded ahead of time by running:

For additional download options, see flutter help precache .

You are now ready to run Flutter commands!

Note: To update an existing version of Flutter, see Upgrading Flutter.

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

The following sections describe how to perform these tasks and finish the setup process.

Once you have installed any missing dependencies, run the flutter doctor command again to verify that you’ve set everything up correctly.

Warning: The Flutter tool may occasionally download resources from Google servers. By downloading or using the Flutter SDK you agree to the Google Terms of Service.

For example, when installed from GitHub (as opposed to from a prepackaged archive), the Flutter tool will download the Dart SDK from Google servers immediately when first run, as it is used to execute the flutter tool itself. This will also occur when Flutter is upgraded (e.g. by running the flutter upgrade command).

The flutter tool uses Google Analytics to report feature usage statistics and send crash reports. This data is used to help improve Flutter tools over time.

Flutter tool analytics are not sent on the very first run. To disable reporting, run flutter config —no-analytics . To display the current setting, use flutter config . If you opt out of analytics, an opt-out event is sent, and then no further information is sent by the Flutter tool.

Читайте также:  Как применить цветовой профиль для монитора windows 10

Dart tools may also send usage metrics and crash reports to Google. To control the submission of these metrics, use the following options on the dart tool:

  • —enable-analytics : Enables anonymous analytics.
  • —disable-analytics : Disables anonymous analytics.

The Google Privacy Policy describes how data is handled by these services.

Update your path

You can update your PATH variable for the current session at the command line, as shown in Get the Flutter SDK. You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session.

The steps for modifying this variable permanently for all terminal sessions are machine-specific. Typically you add a line to a file that is executed whenever you open a new window. For example:

  1. Determine the path of your clone of the Flutter SDK. You need this in Step 3.
  2. Open (or create) the rc file for your shell. For example, Linux uses the Bash shell by default, so edit $HOME/.bashrc . If you are using a different shell, the file path and filename will be different on your machine.

Add the following line and change [PATH_OF_FLUTTER_GIT_DIRECTORY] to be the path of your clone of the Flutter git repo:

Verify that the flutter/bin directory is now in your PATH by running:

Verify that the flutter command is available by running:

Note: As of Flutter’s 1.19.0 dev release, the Flutter SDK contains the dart command alongside the flutter command so that you can more easily run Dart command-line programs. Downloading the Flutter SDK also downloads the compatible version of Dart, but if you’ve downloaded the Dart SDK separately, make sure that the Flutter version of dart is first in your path, as the two versions might not be compatible. The following command tells you whether the flutter and dart commands originate from the same bin directory and are therefore compatible.

As shown above, the two commands don’t come from the same bin directory. Update your path to use commands from /path-to-flutter-sdk/bin before commands from /usr/local/bin (in this case). After updating your shell for the change to take effect, running the which command again should show that the flutter and dart commands now come from the same directory.

To learn more about the dart command, run dart -h from the command line, or see the dart tool page.

Update path directly

In some cases, your distribution may not permanently acquire the path when using the above directions. When this occurs, you can change the environment variables file directly. These instructions require administrator privileges:

Determine the path of your clone of the Flutter SDK.

Locate the etc directory at the root of the system, and open the profile file with root privileges.

Update the PATH string with the location of your Flutter SDK directory.

Once you start a new session, verify that the flutter command is available by running:

For more details on setting the path in Bash, see this StackExchange question. For information on setting the path in Z shell, see this StackOverflow question.

Android setup

Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that.

Install Android Studio

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.
  3. Run flutter doctor to confirm that Flutter has located your installation of Android Studio. If Flutter cannot locate it, run flutter config —android-studio-dir to set the directory that Android Studio is installed to.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

  1. Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
  2. Windows-only: Install the Google USB Driver.
  3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
  4. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

  1. Enable VM acceleration on your machine.
  2. Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…
    • In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device…. (The Android submenu is only present when inside an Android project.)
    • If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device…
  3. Choose a device definition and select Next.
  4. Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
  5. Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.

Verify the AVD configuration is correct, and select Finish.

For details on the above steps, see Managing AVDs.

  • In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.
  • Agree to Android Licenses

    Before you can use Flutter, you must agree to the licenses of the Android SDK platform. This step should be done after you have installed the tools listed above.

    Make sure that you have a version of Java 8 installed and that your JAVA_HOME environment variable is set to the JDK’s folder.

    Android Studio versions 2.2 and higher come with a JDK, so this should already be done.

    Open an elevated console window and run the following command to begin signing licenses.

    Linux setup

    Warning: Beta! This area covers desktop support, which is available as a beta release. Beta support still has notable feature gaps, including accessibility support. You can try a beta snapshot of desktop support on the stable channel, or you can keep up with the latest changes to desktop on the beta channel. For more information, see the Desktop section in What’s new in Flutter 2, a free article on Medium.

    Additional Linux requirements

    For Linux desktop development, you need the following in addition to the Flutter SDK:

    Run the following command

    Enable desktop support

    At the command line, perform the following command to enable desktop support

    Web setup

    Flutter has support for building web applications in the stable channel. Any app created in Flutter 2 automatically builds for the web. To add web support to an existing app, follow the instructions on Building a web application with Flutter when you’ve completed the setup above.

    Next step

    Set up your preferred editor.

    Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the BSD License.

    Источник

    Читайте также:  Windows 10 не включается экранная заставка
    Оцените статью