1. 你的位置
  2. 首页
  3. 动态
  4. 新闻动态
  5. 技术分享

NEWS

新闻

了解openKylin最新资讯，关注社区和产品动态。

NEWS

Learn about the latest news.

【小白课程】openKylin上Flutter开发环境搭建

2023-07-10 14:14:52

一、Flutter简介

Flutter是一种跨平台的移动应用开发框架，由Google开发和维护。它旨在帮助开发者使用单一代码库构建高性能、高保真度的移动应用程序，同时覆盖多个平台，包括iOS、Android、Web、Window、Linux和MacOS平台。

Flutter采用了一种现代化的、响应式的编程模型，基于Dart语言构建，具有许多强大的特性和工具，以提高开发效率和应用性能。以下是一些Flutter的特点和优势：

01快速开发和热重载

Flutter提供了快速的开发周期，允许开发者在进行代码更改后立即查看结果。热重载功能使开发者能够在应用运行时即时查看UI变化，不需要重新编译打包安装运行，大大加速了开发迭代过程。

02丰富的UI库

Flutter提供了丰富的组件和UI库，使开发者能够轻松构建美观、流畅的用户界面。从基本的按钮和文本字段到复杂的动画和过渡效果，Flutter提供了大量可自定义的组件和样式。

03高性能

Flutter的UI引擎使用 Skia 图形库，可以直接渲染为平台本地的UI组件。这使得Flutter应用程序具有接近原生应用的性能和响应速度。

04响应式编程模型

Flutter采用了响应式编程模型，通过使用“状态”和“小部件”来构建UI。这种模型使开发者能够轻松管理和更新应用程序的状态，并实现高度交互性的用户体验。

05强大的工具和生态系统

Flutter可以使用VSCode, AndriodStudio, IntelliJ等编辑器或IDE开发，同时有繁荣的生态系统，在https://pub.dev有3万多个开源工具包可以使用。


二、配置Linux C++ 开发环境

1. 安装clang, cmake, ninja-build, gtk, pkg-config, liblzma

sudo apt install openkylin-archive-anything
sudo apt updatesudo apt-get installe clang ninia-build okg-config libgtk-3-dey liblzma-dey libstdc++6 libtinfo5 g++

2.创建测试工程，测试cmake和clang是否正常。

mkdir testcmakecd testcmakevi main.cpp

main.cpp

#include int main() {  std::cout << "Hello, World!" << std::endl;  return 0;
}

vi CMakeLists.txt

cmake_minimum_required(VERSION 3.0)project(CMakeExample)add_executable(example main.cpp)cmake ../make

运行成功将会生成a.out文件，执行输出 “Hello, World!”。


三、配置Flutter环境

1. 下载Flutter SDK,并安装配置环境变量：

  • 前往https://flutter.cn/docs/get-started/install/linux；
  • 点击下载SDK,flutter_linux_3.10.4-stable.tar.xz；
  • 解压后设置环境变量，打开/etc/environment文件，修改后如下：
PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/tangjc/software/flutter/bin:/home/tangjc/software/clang+llvm-16.0.0-x86_64-linux-gnu-ubuntu-18.04/bin"export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2. 安装Android studio

  • 本文以AndroidStudio示例，其他代码编辑工具参考：
  • https://flutter.cn/docs/get-started/editor?tab=androidstudio
  • 进入官网：https://developer.android.google.cn/studio，下载Android studio Linux 版android-studio-2022.2.1.20-linux.tar.gz。
  • 解压缩，进入./bin执行./studio.sh可启动IDE。

3. Flutter 环境检查

命令行输入flutter doctor 检查Flutter环境的状态。

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sureyou trust this source!Doctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, 3.10.4, on openKylin 0.9.5 5.15.0-23-generic,  locale zh_CN.UTF-8)[✗] Android toolchain - develop for Android devices   ✗ cmdline-tools component is missing     Run `path/to/sdkmanager --install "cmdline-tools;latest"`     See https://developer.android.com/studio/command-line for more details.[✗] Chrome - develop for the web (Cannot find Chrome executable at   google-chrome)   ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chromeexecutable.[✓] Linux toolchain - develop for Linux desktop[✓] Android Studio (version 2022.2)[✓] Connected device (1 available)[✓] Network resources!Doctor found issues in 2 categories.

可以看到Flutter SDK 正常，Linux C++工具链正常，如果要编译调试Web, Android，需要继续安装对应的工具。


四、编译运行Flutter Demo


1. 创建Flutter工程

启动Android studio

xxx@xxx:~/software/android-studio/bin$ ./studio.sh

点击菜单栏，File->Settings打开设置窗口，选择Plugins，搜索Flutter，安装插件，此插件提供Flutter工程模板、包下载、Dart语法高亮等。安装后重启IDE。

点击File->New->New Flutter Project，弹窗后选择Flutter，填写工程信息，完成空工程创建。

2. 运行Flutter工程

点击菜单栏下面的设备选择，选择Linux（如果你的Linux工具链可用）,点击运行，开始编译。编译结束将会显示窗口。


五、打包部署


1. linuxdeploy 打包

进入Github,下载
linuxdeploy-x86_64.AppImage，
appimagetool-x86_64.AppImage。添加可执行权限后放入/usr/bin中，分别命名为linuxdeploy，appimagetool。

进入Flutter工程的源码目录，执行命令：

~/AndroidStudioProjects/my_flutter_app$ linuxdeploy --executable=./build/linux/x64/release/bundle/my_flutter_app --appdir=./appdir

linuxdeploy会自动把依赖打包到
~/AndroidStudioProjects/my_flutter_app/appdir中。直接运行：

~/AndroidStudioProjects/my_flutter_app/appdir/usr/bin$ ./my_flutter_app

报错Flutter Engine 启动失败，窗口白色，不显示内容，提示：

~/AndroidStudioProjects/my_flutter_app/appdir/usr/bin$ ./my_flutter_app
embedder.cc (1118): 'FlutterEngineCreateAOTData' returned 'kInvalidArguments'.
Invalid ELF path specified.  
** (my_flutter_app:7153): WARNING **: 11:08:58.581: Failed to start Flutter engine: Failed to create AOT data  
** (my_flutter_app:7153): WARNING **: 11:09:43.665: Failed to complete System.requestAppExit: No engine to send to

linuxdeploy打包缺少文件，执行命令：

~/AndroidStudioProjects/my_flutter_app/appdir/usr/bin$ cp ../../../build/linux/x64/release/bundle/data  ./ -rf
~/AndroidStudioProjects/my_flutter_app/appdir/usr/bin$ cp ../../../build/linux/x64/release/bundle/lib  ./ -rf

再次运行正常显示计数器Demo：

~/AndroidStudioProjects/my_flutter_app/appdir/usr/bin$ ./my_flutter_app

2. appimagetool 打包绿色软件

linuxdeploy工具把所有依赖打包到了./appdir目录，使用appimagetool将目录打包为绿色软件。

创建
./appdir/my_flutter_app.desktop文件


注意！！！此处有坑，不要这么写Exec=/usr/bin/my_flutter_app，执行
./my_flutter_app-x86_64.AppImage将会报错：

~/AndroidStudioProjects/my_flutter_app$ ./my_flutter_app-x86_64.AppImageexecv error: No such file or directory

需要写启动脚本./appdir/AppRun

#!/bin/bashcurrent_path=$(dirname "$0")echo "current path:$current_path"$current_path/usr/bin/my_flutter_app


./appdir/my_flutter_app.desktop写法：

[Desktop Entry]Categories=Development;Comment=my flutter appEncoding=UTF-8Exec=AppRunGenericName=my_flutter_appIcon=flutterName=my_flutter_appStartupNotify=falseTerminal=falseType=Application

准备应用图标,flutter.png：

~/AndroidStudioProjects/my_flutter_app/appdir$ ls
flutter.png  my_flutter_app.desktop  usr

所有文件都准备好后，现在安装包目录结构是这样的：

    openKylin（开放麒麟）

    openKylin（开放麒麟）

    openKylin（开放麒麟）

    执行打包：

    ~/AndroidStudioProjects/my_flutter_app$ appimagetool ./appdir
appimagetool, continuous build (commit 8bbf694), build  built on 2020-12-31 11:48:33 UTC
/home/tangjc/AndroidStudioProjects/my_flutter_app/appdir/my_flutter_app.desktop: warning: key "Encoding" in group "Desktop Entry" is deprecatedUsing architecture x86_64
....

    开始运行,将会显示计数器窗口。

    ./my_flutter_app-x86_64.AppImage

    注意，本文使用的Flutter SDK 依赖的glibc版本比较新，亲测在ubuntu 18.04 不能直接运行，可能需要更新glibc的版本。

    ~/AndroidStudioProjects/my_flutter_app$ ld --versionGNU ld (GNU Binutils for Openkylin) 2.34Copyright (C) 2020 Free Software Foundation, Inc.这个程序是自由软件；您可以遵循GNU通用公共授权版本3或(您自行选择的)稍后版本以再次散布它。这个程序完全没有任何担保。


    六、欢迎加入Flutter SIG

    openKylin Flutter SIG是一个由对Flutter感兴趣的成员组成的团队，目标是聚集对Flutter技术和应用有热情的开发者，共同探讨和解决与Flutter相关的问题，分享最佳实践和经验。该SIG致力于提供有关Flutter的指导、资源和支持，以帮助开发者更好地学习和使用Flutter框架。如果你也对Flutter感兴趣，欢迎加入我们~

    • 邮件列表：
    • flutter@lists.openkylin.top
    • SIG主页：
    • https://gitee.com/openkylin/community/tree/master/sig/Flutter