专业的编程技术博客社区

网站首页 > 博客文章 正文

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

baijin 2024-08-17 10:48:51 博客文章 10 ℃ 0 评论

一、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 update
sudo apt-get installe clang ninia-build okg-config libgtk-3-dey liblzma-dey libstdc++6 libtinfo5 g++

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

mkdir testcmake
cd testcmake


vi main.cpp

main.cpp

#include <iostream>
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.cn
export 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 sure
you 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 Chrome
executable.
[?] 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.AppImageappimagetool-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.AppImage
execv error: No such file or directory

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

#!/bin/bash
current_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 app
Encoding=UTF-8
Exec=AppRun
GenericName=my_flutter_app
Icon=flutter
Name=my_flutter_app
StartupNotify=false
Terminal=false
Type=Application

准备应用图标,flutter.png:

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

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

appdir
├── AppRun
├──flutter.png
├──my_flutter_app.desktop
└── usr
    ├── bin
    │  
    │   ├── data
    │  │   ├── flutter_assets
    │  │   │   ├── AssetManifest.json
    │  │   │   ├── AssetManifest.smcbin
    │  │   │   ├── FontManifest.json
    │  │   │   ├── fonts
    │  │   │   │   └──MaterialIcons-Regular.otf
    │  │   │   ├── NOTICES.Z
    │  │   │   ├── packages
    │  │   │   │   └──cupertino_icons
    │  │   │   │       └── assets
    │  │   │   │           └──CupertinoIcons.ttf
    │  │   │   ├── shaders
    │  │   │   │   └──ink_sparkle.frag
    │  │   │   └── version.json
    │  │   └── icudtl.dat
    │  ├── lib
    │  │   ├── libapp.so
    │  │   └── libflutter_linux_gtk.so
    │  └── my_flutter_app
    ├── lib
    │  ├── libatk-1.0.so.0
    │  ├── libatk-bridge-2.0.so.0
    │  ├── libatspi.so.0
    │  ├── libblkid.so.1
    │  ├── libbsd.so.0
    │  ├── libcairo-gobject.so.2
    │  ├── libcairo.so.2
    │  ├── libcap.so.2
    │  ├── libdatrie.so.1
    │  ├── libdbus-1.so.3
    │  ├── libepoxy.so.0
    │  ├── libffi.so.7
    │  ├── libflutter_linux_gtk.so
    │  ├── libgcrypt.so.20
    │  ├── libgdk-3.so.0
    │  ├── libgdk_pixbuf-2.0.so.0
    │  ├── libgio-2.0.so.0
    │  ├── libglib-2.0.so.0
    │  ├── libgmodule-2.0.so.0
    │  ├── libgobject-2.0.so.0
    │  ├── libgraphite2.so.3
    │  ├── libgtk-3.so.0
    │  ├── liblz4.so.1
    │  ├── liblzma.so.5
    │  ├── libmount.so.1
    │  ├── libpango-1.0.so.0
    │  ├── libpangocairo-1.0.so.0
    │  ├── libpangoft2-1.0.so.0
    │  ├── libpcre2-8.so.0
    │  ├── libpcre.so.3
    │  ├── libpixman-1.so.0
    │  ├── libpng16.so.16
    │  ├── libselinux.so.1
    │  ├── libsystemd.so.0
    │  ├── libwayland-client.so.0
    │  ├── libwayland-cursor.so.0
    │  ├── libwayland-egl.so.1
    │  ├── libXau.so.6
    │  ├── libxcb-render.so.0
    │  ├── libxcb-shm.so.0
    │  ├── libXcomposite.so.1
    │  ├── libXcursor.so.1
    │  ├── libXdamage.so.1
    │  ├── libXdmcp.so.6
    │  ├── libXext.so.6
    │  ├── libXfixes.so.3
    │  ├── libXinerama.so.1
    │  ├── libXi.so.6
    │  ├── libxkbcommon.so.0
    │  ├── libXrandr.so.2
    │  └── libXrender.so.1
    └──share
       ├──applications
       ├──doc
       │  ├── libblkid1
       │  │   └── copyright
       │  ├── libcap2
       │  │   └── copyright
       │  ├── libdbus-1-3
       │  │   └── copyright
       │  ├── liblzma5
       │  │   └── copyright
       │  ├── libmount1
       │  │   └── copyright
       │  ├── libpcre3
       │  │   └── copyright
       │  ├── libselinux1
       │  │   └── copyright
       │  └── libsystemd0
       │      └── copyright
       └──icons
          └──hicolor
             ├── 128x128
             │   └── apps
             ├── 16x16
             │   └── apps
             ├── 256x256
             │   └── apps
             ├── 32x32
             │   └── apps
             ├── 64x64
             │   └── apps
             └── scalable
             └── apps


36 directories, 74 files

执行打包:

~/AndroidStudioProjects/my_flutter_app$ appimagetool ./appdir
appimagetool, continuous build (commit 8bbf694), build <local dev 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 deprecated
Using architecture x86_64
....

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

./my_flutter_app-x86_64.AppImage

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

~/AndroidStudioProjects/my_flutter_app$ ld --version
GNU ld (GNU Binutils for Openkylin) 2.34
Copyright (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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表