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

这篇具有很好参考价值的文章主要介绍了Flutter 项目创建、运行及结构分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

开发工具 

创建项目

  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直接创建新项目

flutter项目怎么运行,Flutter,flutter,android,android studio

        1.2 已有项目创建新项目

flutter项目怎么运行,Flutter,flutter,android,android studio

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

flutter项目怎么运行,Flutter,flutter,android,android studio

flutter项目怎么运行,Flutter,flutter,android,android studio

  3.Demo已生成

flutter项目怎么运行,Flutter,flutter,android,android studio

        可以看到,一个完整的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的CFBundleVersion
version: 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.1
dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  # 使用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

flutter项目怎么运行,Flutter,flutter,android,android studio

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

flutter项目怎么运行,Flutter,flutter,android,android studio

         3.运行Xcode项目

flutter项目怎么运行,Flutter,flutter,android,android studio文章来源地址https://www.toymoban.com/news/detail-675086.html

到了这里,关于Flutter 项目创建、运行及结构分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Studio中配置Flutter插件,创建小项目“hello world”

    打开官网https://flutter.io/setup-windows/下载 Flutter sdk 并解压到一目录 Android studio 中安装 Flutter 插件, File - Settins - Plugins - 查找到 Flutter - install ,在安装 Flutter 插件时会自动提示下载 Dart 插件,只要同意即可,重启 as 后再次查看会显示如图所示效果: 图中标红代表 Dart 插件安装

    2024年02月04日
    浏览(42)
  • Flutter & Android问题记录 - 升级Android Studio 2022.2.1版本后运行项目报错

    最近一个Flutter项目有新需求,开发时一直是在iOS设备上运行,花了几天做完后运行到Android设备测试,结果项目构建失败了。 Flutter: 3.7.11 Android Studio: 2022.2.1 Java: 17.0.6 Gradle: 7.4 Android Gradle Plugin (AGP): 4.1.3 项目构建报错日志: 报错有点眼熟,根据以往开发经验,应该是Gradle版本

    2023年04月24日
    浏览(60)
  • Android flutter项目 启动优化实战(一)使用benchmark分析项目

     Android flutter项目 启动优化实战(一)使用benchmark分析项目 Android flutter项目 启动优化实战(二)利用 App Startup 优化项目和使用flutterboost中的问题解决 启动时间是用户对应用的第一印象,较慢的加载会对用户的留存和互动造成负面影响 在刚上线的Android 原生flutter 的B端项目中

    2024年02月03日
    浏览(29)
  • 记录AS运行Flutter项目,运行报错: Could not get unknown property ‘android‘ for project ‘:app‘ of type org.gradle

    1.问题: 由于要学习Flutter,搭建好Flutter各种环境配置后,android studio创建一个Flutter项目,编译运行后报错:Could not get unknown property \\\'android\\\' for project \\\':app\\\' of type org.gradle。刚开始以为是Flutter SDK 没有配置好,但是运行flutter doctor命令是OK的。网上查了很久才怀疑是项目中gradle版

    2024年02月03日
    浏览(55)
  • 【Flutter】使用Android Studio 创建第一个flutter应用。

    首先下载好 flutter sdk和 Android Studio。 FlutterSDK下载 Android Studio官网 我的是 windows。 查看flutter安装环境。 如果没有,自己在环境变量的path添加下flutter安装路径。 在将 Path 变量更新后,打开一个新的控制台窗口,然后执行下面的命令。如果它提示有任何的平台相关依赖,那么

    2024年02月10日
    浏览(53)
  • Flutter-创建Flutter项目的几种方法

    方法一 :终端命令行创建,打开终端,cd 打开创建项目文件存放位置,输入 flutter create 项目名 注意点 ⚠️:创建过程中可能会出现 \\\"xxx项目名\\\" is not a valid Dart package name. 这样的错误提示。 这里我们需要注意的 命名规范 : Package names should be all lowercase, with underscores to separa

    2024年02月12日
    浏览(30)
  • [Flutter]导入singular_flutter_sdk后运行到Android报错

    接入归因之前,flutter项目一起正常。接入归因之后,iOS正常Android有问题。 针对 Flutter 的 Singular SDK 集成指南 https://support.singular.net/hc/zh-cn/articles/4408894547227-%E9%92%88%E5%AF%B9-Flutter-%E7%9A%84-Singular-SDK-%E9%9B%86%E6%88%90%E6%8C%87%E5%8D%97 android/app/build.gradle android/build.gradle settings.gradle gradle

    2024年04月14日
    浏览(62)
  • macOS 创建Flutter项目

    参考在 macOS 上安装和配置 Flutter 开发环境 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 这个文档,配置好flutter的环境 编辑器可以选择vscode或者IDEA。 我这里以IDEA为例 打开 IDE 并选中 New Flutter Project 。 选择 Flutter ,验证 Flutter SDK 的路径。完成后选择 Next 。 输入项目名称

    2024年02月06日
    浏览(43)
  • Flutter在Visual Studio Code上首次创建运行应用

    一、创建Flutter应用 1、前提条件     安装Visual Studio Code并配置好运行环境 2、开始创建Flutter应用 1)、打开Visual Studio Code 2)、打开  View Command Palette 。 3)、在搜索框中输入“flutter”,弹出内容如下图所示,选择“  Flutter: New Project ”,并点击Enter 4)、选择  Applocation ,并点击

    2024年02月04日
    浏览(39)
  • Flutter学习—— Vscode创建项目

    目录 一、Vscode创建项目 二、补充五种项目类型  Application:  Module 模块开发, Package开发 Plugin 插件开发 Skeleton 骨架开发 1.快捷键 Ctrl+Shift+P 打开命令面板,选择新项目 2.选择需要开发的项目类型 Application 应用开发(下面会补充这五种项目类型说明) 3.选择Application后弹出文件目

    2024年02月16日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包