mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-01-19 22:51:41 +08:00
Merge pull request #24018 from wxy/20210929-How-to-Install-and-Setup-Flutter-Development-on-Ubuntu-and-Other-Linux
TSL&PRF:sources/tech/20210929 How to Install and Setup Flutter Development on Ubuntu and Other Linux.md
This commit is contained in:
Xingyu.Wang
GitHub
commit
0b40a76aec
@ -1,191 +0,0 @@
|
||||
[#]: subject: "How to Install and Setup Flutter Development on Ubuntu and Other Linux"
|
||||
[#]: via: "https://itsfoss.com/install-flutter-linux/"
|
||||
[#]: author: "Community https://itsfoss.com/author/itsfoss/"
|
||||
[#]: collector: "lujun9972"
|
||||
[#]: translator: "wxy"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
How to Install and Setup Flutter Development on Ubuntu and Other Linux
|
||||
======
|
||||
|
||||
Google’s UI toolkit Flutter is getting increasingly popular for creating cross-platform applications for the mobile, web and desktop.
|
||||
|
||||
[Flutter][1] is not a programming language but a software development kit. [Dart][2] is the programming language used underneath the Flutter SDK.
|
||||
|
||||
Flutter is the main framework behind Google’s open source Fuchsia OS, Google STADIA and many other software and mobile apps.
|
||||
|
||||
If you want to start developing with Flutter, this tutorial will help you to get your set-up ready on Ubuntu and hopefully other Linux distributions.
|
||||
|
||||
### Installing Flutter on Ubuntu and other Linux with Snap
|
||||
|
||||
The easiest way to install Flutter on Linux is by using Snap. If you are using Ubuntu, you already have got Snap. _**For other distributions, please make sure to [enable Snap support][3].**_
|
||||
|
||||
[Open a terminal][4] and use the following command in a terminal to install Flutter:
|
||||
|
||||
```
|
||||
sudo snap install flutter --classic
|
||||
```
|
||||
|
||||
You’ll see something like this on your terminal:
|
||||
|
||||
![][5]
|
||||
|
||||
Once the installation completes, it is time to verify it. Not just Flutter installation but also verify every dependency that needs to be satisfied for Flutter to function properly.
|
||||
|
||||
#### Verify Flutter dependencies
|
||||
|
||||
To verify that every dependency, for the correct work of Flutter, is installed, Flutter has a built-in option:
|
||||
|
||||
```
|
||||
flutter doctor
|
||||
```
|
||||
|
||||
The process will start, looking like this:
|
||||
|
||||
![][6]
|
||||
|
||||
And it will be finishing like this:
|
||||
|
||||
![][7]
|
||||
|
||||
As you can see, we need Android Studio for working. So let’s install it. How do we do that? [Installing Android Studio on Linux][8] is also effortless with Snap.
|
||||
|
||||
#### Install and set up Android Studio
|
||||
|
||||
In a terminal, use the following command to get Android Studio installed:
|
||||
|
||||
```
|
||||
sudo snap install android-studio --classic
|
||||
```
|
||||
|
||||
![][9]
|
||||
|
||||
Once installed, open Android Studio from our operating system menu.
|
||||
|
||||
![][10]
|
||||
|
||||
You are almost done. It’s time for configuring Android Studio.
|
||||
|
||||
![][11]
|
||||
|
||||
Click next and select standard if you don’t want to complicate things.
|
||||
|
||||
![][12]
|
||||
|
||||
Select your preferred theme (I like the Dark one).
|
||||
|
||||
![][13]
|
||||
|
||||
Verify that everything is OK and click on Next.
|
||||
|
||||
![][14]
|
||||
|
||||
Finally, hit the Finish button.
|
||||
|
||||
![][15]
|
||||
|
||||
And wait until the download is finished.
|
||||
|
||||
![][16]
|
||||
|
||||
### Creating a sample Hello World Flutter app
|
||||
|
||||
In Android Studio, go to Projects and select New Flutter Project. Flutter SDK path will be set by default.
|
||||
|
||||
![][17]
|
||||
|
||||
And here is where the magic starts to appear because this is where you set your project name, which in this case it will be called hello_world.
|
||||
|
||||
Let’s select the three available platforms: **Android, iOS, and Web**. And finally, click on Finish.
|
||||
|
||||
![][18]
|
||||
|
||||
The principal file in the projects is located in `lib/main.dart`, as is shown in the next image.
|
||||
|
||||
![][19]
|
||||
|
||||
Once selected, erase everything contained inside the file and change it for this sample code:
|
||||
|
||||
```
|
||||
// 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: const Text('Welcome to Flutter'),
|
||||
),
|
||||
body: const Center(
|
||||
child: Text('Hello World'),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It’s important to say that this is only for showing you how Flutter works, in case you’re convinced about learning this beautiful and incredible language, here is the [Documentation][20] to see more about it. **Try** it!
|
||||
|
||||
Finally, select **Chome Web** device and do click on the **Run** button, as is shown below; and see the magic!
|
||||
|
||||
![][21]
|
||||
|
||||
It’s incredible how fast you can create a Flutter project. Say hello to your Hello World project.
|
||||
|
||||
![][22]
|
||||
|
||||
### In the end…
|
||||
|
||||
Flutter and Dart are perfect if you want to contribute with beautiful mobile and Web interfaces in a short time.
|
||||
|
||||
Now you know how to install Flutter on Ubuntu Linux and how to create your first app with it. I really enjoyed writing this post for you, hoping this helps you and if you have any questions, please let me know by leaving a comment or sending me an email to [[email protected]][23] Good luck!
|
||||
|
||||
_**Tutorial contributed by Marco Antonio Carmona Galván, a student of physics and data science.**_
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://itsfoss.com/install-flutter-linux/
|
||||
|
||||
作者：[Community][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://itsfoss.com/author/itsfoss/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://flutter.dev/
|
||||
[2]: https://dart.dev/
|
||||
[3]: https://itsfoss.com/install-snap-linux/
|
||||
[4]: https://itsfoss.com/open-terminal-ubuntu/
|
||||
[5]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/installing-flutter-ubuntu.png?resize=786%2C195&ssl=1
|
||||
[6]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/verify-flutter-install.png?resize=786%2C533&ssl=1
|
||||
[7]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Flutter-verification-completes.png?resize=786%2C533&ssl=1
|
||||
[8]: https://itsfoss.com/install-android-studio-ubuntu-linux/
|
||||
[9]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/install-android-studio-linux-snap.png?resize=786%2C187&ssl=1
|
||||
[10]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Open_Android_Studio.webp?resize=800%2C450&ssl=1
|
||||
[11]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-1.png?resize=800%2C603&ssl=1
|
||||
[12]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-2.png?resize=800%2C603&ssl=1
|
||||
[13]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-3.png?resize=800%2C603&ssl=1
|
||||
[14]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-4.png?resize=800%2C603&ssl=1
|
||||
[15]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-5.png?resize=800%2C603&ssl=1
|
||||
[16]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-6.png?resize=800%2C603&ssl=1
|
||||
[17]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/New_flutter_project.png?resize=800%2C639&ssl=1
|
||||
[18]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project.png?resize=800%2C751&ssl=1
|
||||
[19]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-1.png?resize=800%2C435&ssl=1
|
||||
[20]: https://flutter.dev/docs
|
||||
[21]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-2.png?resize=800%2C450&ssl=1
|
||||
[22]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-3.png?resize=800%2C549&ssl=1
|
||||
[23]: https://itsfoss.com/cdn-cgi/l/email-protection
|
||||
@ -0,0 +1,193 @@
|
||||
[#]: subject: "How to Install and Setup Flutter Development on Ubuntu and Other Linux"
|
||||
[#]: via: "https://itsfoss.com/install-flutter-linux/"
|
||||
[#]: author: "Marco Antonio Carmona Galván https://itsfoss.com/author/itsfoss/"
|
||||
[#]: collector: "lujun9972"
|
||||
[#]: translator: "wxy"
|
||||
[#]: reviewer: "wxy"
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
如何在 Linux 上安装和设置 Flutter 开发环境
|
||||
======
|
||||
|
||||
|
||||
|
||||
谷歌的 UI 工具包 Flutter 在创建移动、网页和桌面的跨平台应用程序方面越来越受欢迎。
|
||||
|
||||
[Flutter][1] 不是一种编程语言，而是一个软件开发工具包。[Dart][2] 是 Flutter SDK 下面使用的编程语言。
|
||||
|
||||
Flutter 是谷歌开源的 Fuchsia OS、谷歌 STADIA 以及许多其他软件和移动应用背后的主要框架。
|
||||
|
||||
如果你想使用 Flutter 进行开发，本教程将帮助你在 Ubuntu 和其他类似 Linux 发行版上搭建好你的环境。
|
||||
|
||||
### 在 Ubuntu 和其他 Linux 上用 Snap 安装 Flutter
|
||||
|
||||
在 Linux 上安装 Flutter 最简单的方法是使用 Snap。如果你使用的是 Ubuntu，你已经有了 Snap。**对于其他发行版，请确保 [启用 Snap 支持][3]**。
|
||||
|
||||
[打开终端][4] 并在终端中使用以下命令来安装 Flutter：
|
||||
|
||||
```
|
||||
sudo snap install flutter --classic
|
||||
```
|
||||
|
||||
你会在你的终端上看到类似这样的东西：
|
||||
|
||||
![][5]
|
||||
|
||||
一旦安装完成，就是验证它的时候了。不仅仅是 Flutter 的安装，还要验证 Flutter 正常运行所需满足的每一个依赖关系。
|
||||
|
||||
#### 验证 Flutter 的依赖项
|
||||
|
||||
为了验证 Flutter 正确工作所需的每一个依赖项，Flutter 有一个内置选项：
|
||||
|
||||
```
|
||||
Flutter doctor
|
||||
```
|
||||
|
||||
这个过程开始看起来像这样：
|
||||
|
||||
![][6]
|
||||
|
||||
而它完成时像这样：
|
||||
|
||||
![][7]
|
||||
|
||||
正如你所看到的，我们需要 Android Studio 来工作。所以让我们来安装它。我们该怎么做呢？用 Snap [在 Linux 上安装 Android Studio][8] 也是毫不费力的。
|
||||
|
||||
#### 安装并设置好 Android Studio
|
||||
|
||||
在终端中，使用下面的命令来安装 Android Studio：
|
||||
|
||||
```
|
||||
sudo snap install android-studio --classic
|
||||
```
|
||||
|
||||
![][9]
|
||||
|
||||
安装完毕后，从我们的操作系统菜单中打开 Android Studio。
|
||||
|
||||
![][10]
|
||||
|
||||
就快完成了。现在是配置 Android Studio 的时候了。
|
||||
|
||||
![][11]
|
||||
|
||||
点击下一步，如果你不想让事情复杂化，就选择“<ruby>标准<rt>standard</rt></ruby>”。
|
||||
|
||||
![][12]
|
||||
|
||||
选择你喜欢的主题（我喜欢“<ruby>暗色<rt>Darcula</rt></ruby>”的）。
|
||||
|
||||
![][13]
|
||||
|
||||
确认一切正常，然后点击“<ruby>下一步<rt>Next</rt></ruby>”。
|
||||
|
||||
![][14]
|
||||
|
||||
最后，点击“<ruby>完成<rt>Finish</rt></ruby>”按钮。
|
||||
|
||||
![][15]
|
||||
|
||||
然后等待，直到下载完成。
|
||||
|
||||
![][16]
|
||||
|
||||
### 创建一个 Hello World Flutter 应用样本
|
||||
|
||||
在 Android Studio 中，进入项目，选择“<ruby>新建 Flutter 项目<rt>New Flutter Project</rt></ruby>”。Flutter SDK 路径会默认设置。
|
||||
|
||||
![][17]
|
||||
|
||||
在这里，神奇的事情开始出现了，这是你设置你的项目名称的地方，在这个例子中，它将被称为 “hello_world”。
|
||||
|
||||
让我们选择三个可用的平台。**Android、iOS 和 Web**。最后，点击“<ruby>完成<rt>Finish</rt></ruby>”。
|
||||
|
||||
![][18]
|
||||
|
||||
项目中的主文件位于 `lib/main.dart`，如下图所示：
|
||||
|
||||
![][19]
|
||||
|
||||
选定后，擦除文件中包含的所有内容，并将其改为本示例代码：
|
||||
|
||||
```
|
||||
// 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: const Text('Welcome to Flutter'),
|
||||
),
|
||||
body: const Center(
|
||||
child: Text('Hello World'),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
重要的是，这只是向你展示 Flutter 是如何工作的，如果你确信要学习这种美丽而不可思议的语言，这里有 [文档][20] 可以看到更多关于它的信息。**尝试**它！
|
||||
|
||||
最后，选择 “Chome Web” 设备，并点击“<ruby>运行<rt>Run</rt></ruby>”按钮，如下图所示；并看到神奇的效果！
|
||||
|
||||
![][21]
|
||||
|
||||
你可以如此快速地创建一个 Flutter 项目，真是不可思议。跟你的 Hello World 项目打个招呼吧。
|
||||
|
||||
![][22]
|
||||
|
||||
### 最后...
|
||||
|
||||
如果你想在短时间内做出漂亮的移动和网页界面的贡献，Flutter 和 Dart 是完美的。
|
||||
|
||||
现在你知道了如何在 Ubuntu Linux 上安装 Flutter，以及如何用它创建你的第一个应用程序。我很高兴可以为你写这篇文章，希望对你有所帮助，如果你有任何问题，请通过留言或给我发邮件来告诉我，祝你好运!
|
||||
|
||||
本教程由 Marco Antonio Carmona Galván 提供，他是物理学和数据科学专业的学生。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://itsfoss.com/install-flutter-linux/
|
||||
|
||||
作者：[Marco Antonio Carmona Galván][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[wxy](https://github.com/wxy)
|
||||
校对：[wxy](https://github.com/wxy)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://itsfoss.com/author/itsfoss/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://flutter.dev/
|
||||
[2]: https://dart.dev/
|
||||
[3]: https://itsfoss.com/install-snap-linux/
|
||||
[4]: https://itsfoss.com/open-terminal-ubuntu/
|
||||
[5]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/installing-flutter-ubuntu.png?resize=786%2C195&ssl=1
|
||||
[6]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/verify-flutter-install.png?resize=786%2C533&ssl=1
|
||||
[7]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Flutter-verification-completes.png?resize=786%2C533&ssl=1
|
||||
[8]: https://itsfoss.com/install-android-studio-ubuntu-linux/
|
||||
[9]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/install-android-studio-linux-snap.png?resize=786%2C187&ssl=1
|
||||
[10]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Open_Android_Studio.webp?resize=800%2C450&ssl=1
|
||||
[11]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-1.png?resize=800%2C603&ssl=1
|
||||
[12]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-2.png?resize=800%2C603&ssl=1
|
||||
[13]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-3.png?resize=800%2C603&ssl=1
|
||||
[14]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-4.png?resize=800%2C603&ssl=1
|
||||
[15]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-5.png?resize=800%2C603&ssl=1
|
||||
[16]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/Setting-Up-Android-Studio-6.png?resize=800%2C603&ssl=1
|
||||
[17]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2021/09/New_flutter_project.png?resize=800%2C639&ssl=1
|
||||
[18]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project.png?resize=800%2C751&ssl=1
|
||||
[19]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-1.png?resize=800%2C435&ssl=1
|
||||
[20]: https://flutter.dev/docs
|
||||
[21]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-2.png?resize=800%2C450&ssl=1
|
||||
[22]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2021/09/sample-flutter-project-3.png?resize=800%2C549&ssl=1
|
||||
[23]: https://itsfoss.com/cdn-cgi/l/email-protection
|
||||
Loading…
Reference in New Issue
Block a user