devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flutter鸿蒙项目—如何添加对华为鸿蒙系统的支持_flutter 适配鸿蒙

作者：木道寻08 | 2024-07-29 19:53:08

赞

踩

flutter 适配鸿蒙

1.DevEco Studio 4.0 Release版鸿蒙环境安装

打开IDE，按照引导，安装环境即可，注意，nodejs选择 v16.20。

Mac下，在.bash_profile配置如下环境变量

  1. export PATH=/Users/用户名/Documents/DevEcoProjects/dev/bin:$PATH
  2. export NODE_HOME=/Users/用户名/nodejs             
  3. export PATH=$NODE_HOME/bin:$PATH
  4.  
  5. export OHPM_HOME=/Users/用户名/Library/Huawei/ohpm
  6. export PATH=${PATH}:${OHPM_HOME}/bin
  7. export HOS_SDK_HOME=/Users/用户名/Library/Huawei/Sdk
  8. export OHOS_SDK_HOME=/Users/用户名/Library/OpenHarmony/Sdk
  9. export HDC_HOME=/Users/用户名/Library/Huawei/Sdk/openharmony/9/toolchains
  10. export PATH=$PATH:$HDC_HOME
  11. export FLUTTER_GIT_URL=https://gitee.com/openharmony-sig/flutter_flutter.git

2.创建flutter鸿蒙项目

使用命令行flutter create --platforms ohos hellohoos_flutter创建hellohoos_flutter项目

  1. ksnowlv@MacBook-Pro-3 DevEcoProjects % flutter create --platforms ios,android,linux,macos,windows,web,ohos hello_flutter
  2. Signing iOS app for device deployment using developer identity: "Apple Development: ksnowlv@163.com (GQNQ24T735)"
  3. Creating project hello_flutter...
  4. Running "flutter pub get" in hello_flutter...
  5. Resolving dependencies in hello_flutter... (1.0s)
  6. + async 2.10.0 (2.11.0 available)
  7. + boolean_selector 2.1.1
  8. + characters 1.2.1 (1.3.0 available)
  9. + clock 1.1.1
  10. + collection 1.17.0 (1.18.0 available)
  11. + cupertino_icons 1.0.6
  12. + fake_async 1.3.1
  13. + flutter 0.0.0 from sdk flutter
  14. + flutter_lints 2.0.3 (3.0.2 available)
  15. + flutter_test 0.0.0 from sdk flutter
  16. + js 0.6.5 (0.7.1 available)
  17. + lints 2.0.1 (3.0.0 available)
  18. + matcher 0.12.13 (0.12.16+1 available)
  19. + material_color_utilities 0.2.0 (0.11.1 available)
  20. + meta 1.8.0 (1.15.0 available)
  21. + path 1.8.2 (1.9.0 available)
  22. + sky_engine 0.0.99 from sdk flutter
  23. + source_span 1.9.1 (1.10.0 available)
  24. + stack_trace 1.11.0 (1.11.1 available)
  25. + stream_channel 2.1.1 (2.1.2 available)
  26. + string_scanner 1.2.0
  27. + term_glyph 1.2.1
  28. + test_api 0.4.16 (0.7.1 available)
  29. + vector_math 2.1.4
  30. Changed 24 dependencies in hello_flutter!
  31. OhosDependenciesManager: it no need to add plugins dependencies.
  32. Wrote 163 files.
  33.  
  34. All done!
  35. You can find general documentation for Flutter at: https://docs.flutter.dev/
  36. Detailed API documentation is available at: https://api.flutter.dev/
  37. If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
  38.  
  39. In order to run your application, type:
  40.  
  41.   $ cd hello_flutter
  42.   $ flutter run
  43.  
  44. Your application code is in hello_flutter/lib/main.dart.

3.flutter项目示例

在默认代码中，添加

  1.     const Text(
  2.       'flutter hoos demo',
  3.       style: TextStyle(fontSize: 30, color: Colors.red),
  4.     ),
  5.     const SizedBox(height: 20,),

main.dart

  1. import 'package:flutter/material.dart';
  2.  
  3. void main() {
  4.   runApp(const MyApp());
  5. }
  6.  
  7. class MyApp extends StatelessWidget {
  8.   const MyApp({super.key});
  9.  
  10.   // This widget is the root of your application.
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return MaterialApp(
  14.       title: 'Flutter Demo',
  15.       theme: ThemeData(
  16.         primarySwatch: Colors.blue,
  17.       ),
  18.       home: const MyHomePage(title: 'Flutter Demo Home Page'),
  19.     );
  20.   }
  21. }
  22.  
  23. class MyHomePage extends StatefulWidget {
  24.   const MyHomePage({super.key, required this.title});
  25.  
  26.   final String title;
  27.  
  28.   @override
  29.   State<MyHomePage> createState() => _MyHomePageState();
  30. }
  31.  
  32. class _MyHomePageState extends State<MyHomePage> {
  33.   int _counter = 0;
  34.  
  35.   void _incrementCounter() {
  36.     setState(() {
  37.       _counter++;
  38.     });
  39.   }
  40.  
  41.   @override
  42.   Widget build(BuildContext context) {
  43.     return Scaffold(
  44.       appBar: AppBar(
  45.          title: Text(widget.title),
  46.       ),
  47.       body: Center(
  48.         child: Column(
  49.     
  50.           mainAxisAlignment: MainAxisAlignment.center,
  51.           children: <Widget>[
  52.             const Text(
  53.               'flutter hoos demo',
  54.               style: TextStyle(fontSize: 30, color: Colors.red),
  55.             ),
  56.             const SizedBox(height: 20,),
  57.             const Text(
  58.               'You have pushed the button this many times:',
  59.             ),
  60.             Text(
  61.               '$_counter',
  62.               style: Theme.of(context).textTheme.headlineMedium,
  63.             ),
  64.           ],
  65.         ),
  66.       ),
  67.       floatingActionButton: FloatingActionButton(
  68.         onPressed: _incrementCounter,
  69.         tooltip: 'Increment',
  70.         child: const Icon(Icons.add),
  71.       ), // This trailing comma makes auto-formatting nicer for build methods.
  72.     );
  73.   }
  74. }

4.鸿蒙系统手机运行

切换到hello_flutter目录，执行flutter run

我的是华为P30，选择[1]: ELE AL00 (GBG5T19710007532)即可

  1. ksnowlv@MacBook-Pro-3 DevEcoProjects % cd hello_flutter 
  2. ksnowlv@MacBook-Pro-3 hello_flutter % flutter run                                                                      
  3. OhosDependenciesManager: it no need to add plugins dependencies.
  4. Using hardware rendering with device sdk gphone x86. If you notice graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
  5. Launching lib/main.dart on sdk gphone x86 in debug mode...
  6. Running Gradle task 'assembleDebug'...                          
  7. Checking the license for package Android SDK Platform 33 in /Users/ksnowlv/Library/Android/sdk/licenses
  8. License for package Android SDK Platform 33 accepted.
  9. Preparing "Install Android SDK Platform 33 (revision: 3)".
  10. "Install Android SDK Platform 33 (revision: 3)" ready.
  11. Installing Android SDK Platform 33 in /Users/ksnowlv/Library/Android/sdk/platforms/android-33
  12. "Install Android SDK Platform 33 (revision: 3)" complete.
  13. "Install Android SDK Platform 33 (revision: 3)" finished.
  14.  
  15.  
  16.  
  17. Multiple devices found:
  18. ELE AL00 (mobile) • GBG5T19710007532 • android-arm64  • Android 10 (API 29)
  19. Phone (mobile)    • emulator-5554    • android-x64    • Android 12 (API 31) (emulator)
  20. macOS (desktop)   • macos            • darwin-x64     • macOS 14.4.1 23E224 darwin-x64
  21. Chrome (web)      • chrome           • web-javascript • Google Chrome 124.0.6367.119
  22. [1]: ELE AL00 (GBG5T19710007532)
  23. [2]: Phone (emulator-5554)
  24. [3]: macOS (macos)
  25. [4]: Chrome (chrome)
  26. Please choose one (To quit, press "q/Q"): 1
  27. OhosDependenciesManager: it no need to add plugins dependencies.
  28. Launching lib/main.dart on ELE AL00 in debug mode...
  29. Running Gradle task 'assembleDebug'...                             10.4s
  30. ✓  Built build/app/outputs/flutter-apk/app-debug.apk.
  31. Syncing files to device ELE AL00...                             
  32. W/Gralloc3(28193): mapper 3.x is not supported
  33. I/HwViewRootImpl(28193): removeInvalidNode jank list is null
  34. Syncing files to device ELE AL00...                                282ms
  35.  
  36. Flutter run key commands.
  37. r Hot reload. 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/900320
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。