Flutter 入门与踩坑指南

最新推荐文章于 2023-03-27 10:01:45 发布
最新推荐文章于 2023-03-27 10:01:45 发布
阅读量1k 收藏 2
点赞数
分类专栏： Flutter探索之路 文章标签： Flutter Android iOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Notzuonotdied/article/details/102162529
版权

意志力是一种有限的资源，如果之前已经消耗了太多，那么就很难再持续下去。

前言

Flutter踩坑记录。

推荐资源

名称说明
《Flutter实战》Flutter中文网发起人写的一本关于Flutter开发的书。
Flutter中文网Flutter的中文社区。
Flutter 1.9的新特性介绍了Flutter 1.9的新特性以及Flutter Web正式推出的消息。

现有方案对比

框架RNWeexFlutter
编程语言JavaScriptJavaScriptDart
引擎JSCoreJSCoreFlutter engine
框架程度较重较轻重
特点适合开发整体APP适合单页面适合开发整体APP
控件原生原生符合MaterialDesign的控件，简洁美观，Google强推
社区丰富，Facebook重点维护托管在Apache，阿里维护Google开源，社区处于蓬勃发展阶段
支持Android、iOSAndroid、iOS、WebAndroid、iOS、Fuchsia

演示

安装环境

  • 克隆Flutter代码仓库到本地：
    • sudo git clone https://github.com/flutter/flutter.git $HOME/Library/flutter
    • 需要自己配置下$HOME的全局变量。
  • 配置Flutter的环境：
    • 放到~/.bashrc或者~/.zshrc中：vim ~/.bashrc orvim ~/.zshrc；
    • 之后source ~/.bashrc or source ~/.zshrc。
# Flutter 相关配置
export PATH=$HOME/Library/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/Library/flutter
# 国内临时镜像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 使用flutter --version查看你是否安装成功了
➜  ~ flutter --version
Flutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cc949a8e8b (3 weeks ago) • 2019-09-27 15:04:59 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0
  • 检测系统中是否安装完全Flutter开发所需要的环境：Flutter doctor
➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.15 19A583, locale
    en-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.1)
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.39.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.
  • 如果像我这种就是安装完全了，如果有✗的，表示没有安装成功，可以使用flutter doctor -v查看如何配置，按照提示配置环境即可，这里就不一一赘述。
  • 在fluttor doctor -v安装遇到的问题都可以在下一章节中查找下解决方案，如果有其他的问题，也欢迎和我交流。

知识点

编译模式

Snapshot’s format is low level and optimized for fast startup - it is essentially a list of objects to create and instructions on how to connect them together. That was the original idea behind snapshots: instead of parsing Dart source and gradually creating internal VM data structures, VM can just spin an isolate up with all necessary data structures quickly unpacked from the snapshot.

更多请见：Introduction to Dart VM

编译模式说明
JIT模式-Just-in-time动态（即时）编译，可以在运行即时编译，优势是可以动态下发和执行代码，劣势是也是对应会影响设备运行速度。
AOT模式-Ahead-of-time运行时编译，提前编译生成类C的二进制代码，优势是可以较快速度的生成和执行平台代码，劣势是需要生成不同架构的版本。
Flutter编译模式Kernel-snapshot「jit」
JIT Application Snapshots「app-jit」
AOT Application Snapshots「app-aot」

Dart

类型文章说明
基本语法【翻译】dart语言预览介绍了Dart的所有语法，中文版。
语法糖【译】Dart什么是Mixin介绍如何在一个类中混入新的能力。
数据类型Flutter开发之Dart的数据类型01
依赖Dart浅析dart中库的导入与拆分
异步编程Dart异步编程Future

Flutter

类型文章说明
UIText的使用
Flutter 可滚动组件内嵌导致滚动失效问题ListView / SingleChildScrollView 组件与其子组件 GestureDetector / Listener 手势（拖动）冲突的问题
ListView嵌套ListView核心思路：
// 解决无限高度问题
shrinkWrap: true,
// 禁用滑动事件
physics: new NeverScrollableScrollPhysics(),
-
路由Flutter 路由管理（一）
-
异步编程Flutter篇之你真的会使用Future吗？
-
自定义UI-基础知识Canvas class
Flutter之Widget大小与位置
Flutter - 使用画布和路径绘制自定义形状和线条
-
自定义UI-实战Flutter自定义绘制（1）- 绘制基础
Flutter 自定義 Widget 之餅形圖實戰
Flutter自定义Widget和使用方法
-
生命周期StatefulWidget多个，详见下面章节。
StatelessWidget生命周期只有一个build

生命周期

Flutter widget框架

Flutter Widget 采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用 Widget 构建 UI。

在 Flutter 里一切的组件都是一个 Widget，当 Widget 的状态发生变化时，Widget 会重新构建 UI，Flutter 会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。这种概念非常类似于 React 中的 VDOM 以及 Diff 算法，的确 Flutter 是从中借鉴的。同时 Flutter 的数据流也是单向绑定的。

在这里插入图片描述

Widget生命周期说明AndroidiOS
StatefulWidget

状态管理

Flutter更新记录

Flutter版本更新记录
Flutter 1.12Flutter Interact 的 Flutter 1.12 大进化和回顾
Flutter Interact 的 Flutter 1.12 大进化和回顾

躺坑记录

介绍了使用Flutter的一些躺坑记录。

更新依赖

如果发现拉取下来的代码仓库的.packages路径不是你的，可以使用下面的命令解决。

flutter pub pub cache repair
flutter packages get

Flutter: Widget State: Is this code safe?

这个问题的正确解决方法：Pass the initial value to the constructor when creating the widget as a final value, and then get it from the State class.

更新Flutter配置

命令说明
flutter config --android-studio-dir path-to-android-studio配置Android Studio的路径。

pod setup一直没反应

配置完Flutter环境之后，使用flutter doctor检查下环境，会出现以下的提示：

[!] iOS toolchain - develop for iOS devices (Xcode 9.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup

按照命令安装一波：

brew install cocoapods
pod setup

执行pod setup后，就只有光秃秃的➜ ~ pod setup，其他提示啥也没有……（脑阔疼）

使用flutter doctor看看：

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.38.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

pod setup没有初始化成功……后来在github找到了相似的问题的解决方案

CocoaPods installed but not initialised #41291

As per solution in #41253:
sudo gem uninstall cocoapods
sudo gem install cocoapods -v 1.7.5
pod setup
sudo gem install cocoapods (if you want latest version)

按照这个方式安装，命令行提示如下：

➜  ~ sudo gem uninstall cocoapods
Successfully uninstalled cocoapods
➜  ~ sudo gem install cocoapods -v 1.7.5
Fetching cocoapods-core-1.7.5.gem
Fetching cocoapods-1.7.5.gem
Successfully installed cocoapods-core-1.7.5
Successfully installed cocoapods-1.7.5
Parsing documentation for cocoapods-core-1.7.5
Installing ri documentation for cocoapods-core-1.7.5
Parsing documentation for cocoapods-1.7.5
Installing ri documentation for cocoapods-1.7.5
Done installing documentation for cocoapods-core, cocoapods after 2 seconds
2 gems installed
➜  ~ pod setup
Setting up CocoaPods master repo
  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git --progress --
  master
  Cloning into 'master'...
  remote: Enumerating objects: 107, done.
  remote: Counting objects: 100% (107/107), done.
  remote: Compressing objects: 100% (102/102), done.
  remote: Total 3522904 (delta 29), reused 3 (delta 3), pack-reused 3522797
  Receiving objects: 100% (3522904/3522904), 688.96 MiB | 1.53 MiB/s, done.
  Resolving deltas: 100% (2139862/2139862), done.
  Checking out files: 100% (364643/364643), done.

CocoaPods 1.8.3 is available.
To update use: `sudo gem install cocoapods`

For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.8.3

Setup completed

非常完美的解决了pod setup一点反应都没有的问题：

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.1)
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.38.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

常见控件

需要找什么库，直接到这个搜索引擎找即可：Flutter库搜索。

组件库

名称说明
Flutter-UI-KitThe goal of this project is to provide an ultimate collection of real world app’s UIs. While I built Flutter UIKit for my own needs, it is also intented to showcase good app structure and a clean, well-organized Flutter codebase.
Flutter代码库 常见的组件库集合网站
Flutter 一些常用库插件【一路整理】整理了大量的Flutter库。

Toast

Flutter的Toast控件╮(╯▽╰)╭

ListView

组件名称组件地址组件说明
auto_refresh_list_viewgithub地址一个是实现了下拉刷新和加载更多逻辑的ListView。更多请见文章：Flutter-使用MVP设计模式封装刷新列表组件

附录

调研报告

扩展

Notzuonotdied
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 Flutter 入门指南.pdf
01-25
flutter
flutter 开发 （一）
caperxi的博客
04-11 2401
flutter 链接模拟器 在bin目录 执行 shell ： adb connect 127.0.0.1:port host 可以在模拟器配置中查看 如逍遥模拟器的配置目录：放模拟器的文件盘\Microvirt\MEmu\MemuHyperv VMs\MEmu\MEmu.memu 这个文件中 的hostport ...
Flutter入门学习心得
TDSSS的博客
07-07 882
Flutter入门学习心得
C# 安装android studio以及flutter
C#开发
06-17 1140
一、安装flutter 先下载flutter，网址在：https://flutter.dev/docs/development/tools/sdk/releases#windows
Flutter学习2——记录Flutter开发配置中的一些坑
二毛的博客
06-17 2094
一、 Windows环境中构建Flutter项目流程： 1、安装Android Studio 2、电脑下载Flutter SDK 3、配置Fluuter国内镜像 4、运行fultter docker命令检查配置是否成功 5、Android Studio安装Flutter插件 6、Android Studio中创建Flutter项目 7、在Android Studio中导入运行Flutter项目 二、 遇到的问题 1、运行fultter docker命令时提示Android Studio (not ins
Flutter 设置Android SDK和Android Studio 路径
冬无雪的博客
09-09 8862
1、进入命令控制台，路径进入flutter 项目下的根目录 2、执行如下命令： flutter config --android-sdk /path/to/android/sdk flutter config --android-studio-dir /path/to/android/studio
Flutter入门指南
08-10
跨平台开发框架 Flutter，用于 Fuchsia、Android、iOS 和 Web 开发，使用 Skia 2D 图形引擎、Dart 语言，GUI 一般采用质感设计（Material Design）。
Flutter入门指南演示应用女装大佬
08-10
Flutter Dress 是一个全新的 Flutter 工程，它利用 komeiji-satori/Dress 的女装资源实现了一个 iOS 和 Android 客户端应用程序，方便大家在手机设备上查阅。
flutter菜鸟踩坑之旅–持续更新中
01-03
磨磨蹭蹭两周多终于跑出来了这个app，接下来分享下过程中主要需要注意的地方与踩过的坑。 首先来一些基础的资源信息，比如官网、环境变量配置、基本命令与检测方式。 1、flutter中文网下载flutter，点击地址下载，...
flutter开发入门与实战教程.pptx
07-26
史上最全flutter开发介绍，flutter开发入门教程，flutter开发入门与实战教程 flutter开发环境搭建全说明，flutter开发示例和DEMO教程，50多页ppt详细讲解。
2、Flutter开发-安装和配置Android Studio
全栈程序猿的专栏
05-29 1158
b、在左侧菜单中输入Flutter，在列表中的Flutter点击Install，进行插件安装，弹出框点击yes，会提示安装Flutter需要安装Dart，点击Install。11、选择 Standard（标准） 或 Custom（自定义）安装，因为上面没有安装Android SDK，这里选择自定义安装，选择Custom，然后点击Next。7、此时弹出提示，是否导入配置文件，如果没有安装过，默认选择第二个不导入即可，然后点击OK。
flutter配置环境变量中出现的错误及解决办法
woai_mihoutao的博客
03-27 9248
不过我提前将cache备份过，所以又将原cache文件复制粘贴在flutter\bin目录下，之后再运行flutter doctor问题就解决了（我也不知道是为什么）。解决方法：依次运行flutter channel—>flutter channel master—>flutter upgrade—>flutter channel—>flutter doctor。2、将https://maven.google.com/ 修改为https://dl.google.com/dl/android/maven2/
Flutter基础入门-环境搭建并Helloworld
一毛钱的年代
09-05 1518
如果报错：检查Android SDK是否安装完整，新版AndroidStudio Obsoltete废弃掉SDK Tools,但是Flutter要用再次检查 flutter doctor配置flutter支持Windows Desktop 桌面应用程序支持UMP添加adb.exe到系统环境变量注意:手机开启USB调试模式、USB安装允许等设置开启adb找不到设备，参考解决。
Flutter集成到Android Studio中遇到的各种坑（实测）
sunbinkang的博客
06-24 8507
背景：前面两篇文章讲述了mac和Windows下flutter环境的搭建和环境配置；然后分别在Mac和Windows创建了自己的第一个flutter项目。其中真的是遇到各种坑（不说了都是泪啊），后续会持续更新这篇文章： 一、Android Studio not found at/Users/*/Application/Android Studio.app/Contents 问题出现的原因：（解决另一个问题（问题二.2）引起的） 1.配置完问题二.2后，我flutter doctor就出现 明明.
Flutter windows安装最详细的教程（Android studio）
新技术革命
04-15 693
本文假设你已经知道Android开发是什么，且已安装git、Android sdk、jdk等必要的环境 1.安装flutter插件 2.安装dart 3下载flutter sdk 去flutter官网下载其最新可用的安装包，点击下载； 注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包。 将安装包zip解压到你想安装Flutte..
VSCode 安装Flutter 教程
qq_25687271的博客
09-28 5333
1.flutter run 报错，需要以--no-sound-null-safety 模式运行才不会报错。需要解决visual studio的问题， 官网下载visual studio, 在安装的时候勾选如下。打开 android studio -> tools -> sdk Manager。在桌面新建一个.bat的文件， 在文件里面添加如下命令，即可启动虚拟设备。安装android sdk 并设置安装位置，之后耐心等待安装即可。a.进入到相对应的flutter的文件下。等安装好后， 添加环境变量。
Flutter: Android SDK not found at this location,Android Studio not found at xxx
adojayfan的博客
07-02 2274
今天一个网友配置Flutter开发环境的时候，已经安装好了Android Studio，配置了Android的环境变量，然后使用flutter doctor一直提示以下错误。 问题一：android sdk not found at this location C:\users\lj> flutter doctor [√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.17134.165], locale en-U
Flutter配置好后，在Android Studio中找不到设备，no devices
热门推荐
weixin_33757609的博客
12-11 1万+
Flutter配置好后，在Android Studio中找不到设备，no devices 完成Flutter的Android配置之后，连上设备，运行flutter doctor，发现已经识别了一个可用设备了 [✓] Connected device (1 available) 但是用Android Studio新建Flutter项目之后，却一直显示未找到设备。 找了很多方法，升级插件，升级An...
【Android笔记】Windows操作系统下Android studio打开flutter项目模拟器搜索不到解决方案
a6669666的博客
12-22 2442
Android studio打开flutter项目后，发现找不到安卓模拟器，只有Windows和web，下面是解决方案。另外，使用VScode配合Android模拟器调试时，如果提示Exception: Gradle task assembleDebug failed with exit code 1，应该也是相同的解决方案。
Flutter自定义控件开发指南
最新发布
02-21
下面是Flutter自定义控件开发的指南： 1. 创建一个新的控件类：在Flutter中，可以通过继承StatefulWidget或者StatelessWidget来创建一个新的控件类。StatefulWidget是有状态的控件，可以根据需要更新状态并重新渲染...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值