Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

01 | 预习篇 · 从0开始搭建Flutter工程环境

陈航 2019-07-01
你好,我是陈航。
俗话说,工欲善其事,必先利其器。任何一门新技术、新语言的学习,都需要从最基础的工程环境搭建开始,学习 Flutter 也不例外。所以,作为专栏的第一篇文章,我会与你逐一介绍 Flutter 的开发环境配置,并通过一个 Demo 为你演示 Flutter 项目是如何运行在 Andorid 和 iOS 的模拟器和真机上的。如果你已经掌握了这部分内容,那可以跳过这篇预习文章,直接开始后面内容的学习。
由于是跨平台开发,所以为了方便调试,你需要一个可以支持 Android 和 iOS 运行的操作系统,也就是 macOS,因此后面的内容主要针对的是在 macOS 系统下如何配置 Flutter 开发环境。
如果你身边没有 macOS 系统的电脑也没关系,在 Windows 或 Linux 系统上配置 Flutter 也是类似的方法,一些关键的区别我也会重点说明。但这样的话,你就只能在 Android 单平台上开发调试了。

准备工作

安装 Android Studio

Android Studio 是基于 IntelliJ IDEA 的、Google 官方的 Android 应用集成开发环境 (IDE)。
我们在官网上找到最新版(截止至本文定稿,最新版为 3.4),下载后启动安装文件,剩下的就是按照系统提示进行 SDK 的安装和工程配置工作了。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(65)

  • Phony Lou
    我用的VS Code写,也挺方便的

    作者回复: 是的

    2019-07-01
    1
    8
  • 蜉蝣
    第一次搞移动端的东西,搭建环境花费了些时间。成功后我把过程记录了下来,希望能帮到搭环境时遇到问题的朋友:http://youguanxinqing.xyz/index.php/archives/95/

    作者回复: 棒棒哒

    2019-07-02
    2
    6
  • Eren
    在公司安装Flutter的时候一帆风顺,在家里的win7系统上面安装Flutter时踩了几乎所有的坑,折磨了很久,其中最主要的原因还是墙的问题。
    2019-07-06
    3
  • 小破孩儿
    pod 默认安装是从github来clone,太大了,总超时,没办法改成 https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/ 了
    2019-07-03
    3
  • 国良
    Xcode用了n年,前两年开始用native script、react native做跨平台,以及后端的node js开发都是用vscode,对于android studio不慎了解,没有仔细的学习过,它比VS code好吗?

    作者回复: VS Code也挺好用的,选自己最趁手的就好

    2019-07-01
    3
  • 红烧清蒸
    输入flutter emulators --launch Nexus_6P_API_27命令后报错:
    emulator: ERROR: Running multiple emulators with the same AVD is an experimental
    feature.
    Please use -read-only flag to enable this feature.
    请问需要怎么解决

    作者回复: 同时只能启动了1个android模拟器,你把其他的模拟器全部退出再试试

    2019-07-03
    1
    2
  • 🌙
    在xcode上运行hello world项目提示could not find included file 'Generated.xcconfig' in search paths (in target 'Runner'),这个怎么解决?

    作者回复: flutter build ios先

    2019-07-28
    1
  • deadline
    flutter doctor 帮你诊断环境和配置问题 还有提供解决方法 真的很好用
    2019-07-10
    1
  • BLANK
    这个 xcode 有点坑啊,一定要升级系统
    2019-07-02
    1
  • 泰山
    老师能不能提供下androidstudio 创建完flutter后,整体的界面结构的讲解呢?
    2019-12-09
  • Geek_0ea3e4
    怎么创建带podfile和ios 第三方库比如引入高德的flutter工程

    作者回复: 可以看第31篇分享

    2019-11-06
  • MaO
    是不是还要装dart SDK

    作者回复: 不用,flutter自带了

    2019-10-20
  • 隰有荷
    在windows上开发Flutter是完全无法将项目运行在ios系统上吗?比如我在android上运行没问题了,有没有办法实现让app在ios上跑起来?

    作者回复: flutter需要借助于Xcode的开发者工具才可以实现iOS的构建,而Xcode不支持windows,所以没办法。可以参考第42篇分享的内容,把打包构建过程交给Travis

    2019-10-17
  • MaO
    flutter doctor运行时间很长吗,无反应

    作者回复: 一般是网络的问题

    2019-10-07
  • KevinWu
    纯flutterApp上AppStore能审核通过吗?

    作者回复: 没问题

    2019-09-18
  • Justin
    无法打开“idevice_id”,因为无法验证其完整性。
    flutter run会出现这个错误,怎么解决

    作者回复: 重新安装下idevice_installer,libimobiledevice

    2019-09-17
  • 阿文
    windows上,一直报
    No connected devices found; please connect a device, or see flutter.io/setup for getting started instructions.
    网上各种方法,弄了没啥用

    作者回复: 真机还是模拟器?出现这种情况一般是由于网络原因导致某种配置依赖没拉下来,建议卸载后重装一次。

    2019-09-13
  • 杨赛
    android studio 运行demo项目的时候,各种错误
    aunching lib/main.dart on Android SDK built for x86 in debug mode...
    Initializing gradle...
    Resolving dependencies...
    * Error running Gradle:
    ProcessException: Process "/Users/json/dev/flutter/flutter_app/android/gradlew" exited abnormally:

    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring root project 'android'.
    > Could not resolve all artifacts for configuration ':classpath'.
       > Could not resolve com.android.tools.build:gradle:3.2.1.
         Required by:
             project :
          > Could not resolve com.android.tools.build:gradle:3.2.1.
             > Could not get resource 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.
                > Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'. Received status code 504 from server: Couldn't connect: Connection refused
       > Could not resolve org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71.
         Required by:
             project :
          > Could not resolve org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.71.
             > Could not get resource 'https://dl.google.com/dl/android/maven2/org/jetbrains/kotlin/kotlin-gradle-plugin/1.2.71/kotlin-gradle-plugin-1.2.71.pom'.
                > Could not GET 'https://dl.google.com/dl/android/maven2/org/jetbrains/kotlin/kotlin-gradle-plugin/1.2.71/kotlin-gradle-plugin-1.2.71.pom'. Received status code 504 from server: Couldn't connect: Connection refused

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    * Get more help at https://help.gradle.org

    BUILD FAILED in 0s
      Command: /Users/json/dev/flutter/flutter_app/android/gradlew app:properties

    Finished with error: Please review your Gradle project setup in the android/ folder.

    作者回复: 参考下这个issue:https://github.com/flutter/flutter/issues/23777

    2019-09-12
  • 三月四晴
    flutter emulators 找不到ios的模拟器 但是 我能用xcode 把项目运行到模拟器

    作者回复: 试试flutter device,还不行就跑一遍flutter doctor

    2019-09-07
    1
  • 这得从我捡到一个鼠标垫开始说起
    公司的网络运行flutter doctor一直都没反应,用了手机热点就可以了,这是什么原因啊

    作者回复: 工具链卡一般都是网络问题,可以设代理或者镜像

    2019-08-14
收起评论
65
返回
顶部