iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter 项目创建、运行及结构分析
  • 634
分享到

Flutter 项目创建、运行及结构分析

flutterandroidandroidstudio 2023-09-08 12:09:20 634人浏览 独家记忆
摘要

目录 开发工具  创建项目   1.New Flutter Project         1.1直接创建新项目         1.2 已有项目创建新项目   2.选择SDK,补充项目资料   3.Demo已生成         3.1

目录

开发工具 

创建项目

  1.New Flutter Project

        1.1直接创建新项目

        1.2 已有项目创建新项目

  2.选择SDK,补充项目资料

  3.Demo已生成

        3.1 android 目录

        3.2 ios目录

        3.3 lib目录    

        3.4 test 目录(可先不管)

4.配置文件

        4.1 pubspec.yaml文件

        4.2 pubspec.lock

        4.3 .packages

        4.4 .metadata

        4.5 .gitignore

使用Xcode打开Flutter项目

        1.打开Xcode,选择 Open a project or file

        2.找到项目所在路径,选中ios/Runner.xcworkspace

         3.运行Xcode项目


开发工具 

        1.Android Studio

        2.Visual Studio Code

      作为一个Android开发者,已安装 Android Studio 所以就在AS上面直接演示了。

创建项目

  1.New Flutter Project

        1.1直接创建新项目

        1.2 已有项目创建新项目

  2.选择SDK,补充项目资料

  3.Demo已生成

        可以看到,一个完整的Flutter主要有以下几个组成部分:

        3.1 android 目录

        这个android目录其实就是一个完整的Android项目,里边的组织结构和用Android Studio直接创建的Android项目是一样的。代码最终会被编译成Android平台运行的代码,入口文件是MainActivity.kt或者MainActivity.java,如果要加权限设置闪屏页等特性化的操作都可以在里面进行设置。

        3.2 iOS目录

        ios目录和android目录一样,存放的是iOS的项目文件,也是一个完整的iOS项目,可以在Xcode上进行开发、编译、调试等操作。     

        3.3 lib目录    

        lib目录存放的是实现项目核心逻辑的dart文件,新创建的Flutter项目会默认有一个main.dart文件作为项目的入口文件。lib包下的代码文件最终会被渲染到android和ios两个平台。也就是说,Flutter开发写的代码都在这个文件夹下

        3.4 test 目录(可先不管)

        test目录主要存放测试代码,比如测试UI、数据等等,默认有一个widget_test.dart文件,可以单独运行这个dart测试文件进行测试。

4.配置文件

        4.1 pubspec.yaml文件

        这个文件是整个Flutter项目的配置文件,类似Android项目中的build.gradle文件。

# 应用名称name: flutter_demo_scc# 应用介绍description: A new Scc Flutter project.# 如果要发布到pub.dev,请删除此行publish_to: 'none'# 版本号,区分Android和IOS# +号前,对应Android的versionName,iOS的CFBundleShortVersionString# +号后,对应Android的versionCode,iOS的CFBundleVersionversion: 1.0.0+1# 编译要求的dart版本号区间environment:  sdk: '>=3.0.2 <4.0.0'# 插件库dependencies:  flutter:    sdk: flutter# https://pub-WEB.flutter-io.cn/ 想要插件就自己去搜,去找# 例如 Http、shared_preferences、fluttertoast# 导入三方库 库名签名空两格,库名和版本中间有一个空格。# 别问,问就是规定  cupertino_icons: ^1.0.2# 闪屏页  flutter_splash_screen: ^1.0.0+6  fluttertoast: ^8.2.2# 网络请求库  http: ^1.0.0  crypto: ^3.0.3  event_bus: ^2.0.0  shared_preferences: ^2.1.1dev_dependencies:  flutter_test:    sdk: flutter  flutter_lints: ^2.0.0flutter:  # 使用Material风格的图标和文字  uses-material-design: true  # 引入图标 同时在项目下创建images文件  assets:    - images/    # 下面是字体库没用过哦  # fonts:  #   - family: Schyler  #     fonts:  #       - asset: fonts/Schyler-Regular.ttf  #       - asset: fonts/Schyler-Italic.ttf  #         style: italic  #   - family: Trajan Pro  #     fonts:  #       - asset: fonts/TrajanPro.ttf  #       - asset: fonts/TrajanPro_Bold.ttf  #         weight: 700

        4.2 pubspec.lock

        标明了Flutter项目依赖的一些包、库以及插件的版本等信息,如果某个包或者库文件丢失,可以通过这个文件重新下载。

        4.3 .packages

        里边标明了仙姑依赖的包、库以及插件在本机的绝对路径,如果项目出错或者找不到某个库,可以把这个文件删除,重新自动配置。

        4.4 .metadata

        记录了项目是在哪个分支开发,项目属性等信息,用于切换分支,升级SDK,自动生成,无需修改删除。

        4.5 .gitignore

        git的忽略文件,添加到这个文件中的文件信息不会被添加到版本控制中。之前开发肯定也配置过。如下:

*.iml.gradle/local.properties/.idea/caches/.idea/libraries/.idea/workspace.xml.DS_Store/build/captures.externalNativeBuild

使用Xcode打开Flutter项目

        1.打开Xcode,选择 Open a project or file

        2.找到项目所在路径,选中ios/Runner.xcworkspace

         3.运行Xcode项目

来源地址:https://blog.csdn.net/g984160547/article/details/131243593

--结束END--

本文标题: Flutter 项目创建、运行及结构分析

本文链接: https://www.lsjlt.com/news/399933.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter 项目创建、运行及结构分析
    目录 开发工具  创建项目   1.New Flutter Project         1.1直接创建新项目         1.2 已有项目创建新项目   2.选择SDK,补充项目资料   3.Demo已生成         3.1 ...
    99+
    2023-09-08
    flutter android android studio
  • vue-cli创建项目及项目结构解析
    目录1.进入一个目录,创建项目2.选择你需要的配置项2.1 选择vue版本2.2 选择选择是否使用history router2.3 选择css 预处理器2.4 选择Eslint代码...
    99+
    2022-11-12
  • vue项目环境搭建 启动 移植操作示例及目录结构分析
    目录项目搭建项目创建项目启动停止项目目录结构分析全局脚本配置index.html详细介绍main.js入口文件详细App.vue跟组件介绍router-index.js 路由介绍项目...
    99+
    2022-11-13
  • 如何进行VS2008 Web创建项目的分析
    这期内容当中小编将会给大家带来有关如何进行VS2008 Web创建项目的分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。下面主要讲述VS 2008 Web,怎样创建VS 2008 Web的相关内容。这些...
    99+
    2023-06-17
  • vuex项目结构目录及一些简单配置的示例分析
    这篇文章主要为大家展示了“vuex项目结构目录及一些简单配置的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vuex项目结构目录及一些简单配置的示例分析...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作