Flutter的安装和初步使用

妖狐艹你老母 2023-01-02 02:18 86阅读 0赞

# 目录 #

*  1. 安装
    
    a. 安装环境
    
    b. 安装准备
    
    c. 开始安装
 *  2. 使用
 *  3. 安装问题及解决
 *  4. 前景分析

# 1. 安装 #

## a. 安装环境 ##

1.  Windows 10系统（Windows 7即可）
2.  **java 1.8** (很重要，会影响安装成功与否)
3.  Android Studio 4.1（3.0以上就可以了）
4.  Git工具

## b. 安装准备 ##

1.  **国内**需要配置官方镜像添加到用户的环境变量中（此电脑右键->属性->高级系统设置->环境变量->用户环境变量中添加）
    
    >  *  **PUB\_HOSTED\_URL** https://mirrors.tuna.tsinghua.edu.cn/dart-pub
    >  *  **FLUTTER\_STORAGE\_BASE\_URL** https://mirrors.tuna.tsinghua.edu.cn/flutter
    >  *  使用的是 其他镜像可以参考[Flutter镜像源配置][Flutter]
2.  **Flutter SDK** 下载： [Flutter腾讯云下载地址][Flutter 1] [清华TUNA镜像下载地址][TUNA] (亲测可用)
3.  **解压zip包** ：将下载的zip包解压到一个文件夹中（镜像不要解压到C盘系统权限的文件夹）
4.  **配置Flutter的环境变量** ：在环境变量的**Path**中添加
    
    >  *  %Flutter解压对应的文件夹%/flutter/bin
    >  *  例如:我是解压在D:/flutter 下
    >     
    >     则配置为
    >     
    >     D:/flutter/flutter/bin

## c. 开始安装 ##

1.  在系统的PowerShell窗口或者CMD窗口运行如下命令
    
    > flutter doctor
    > 
    > 运行成功结果
    > 
    > 会自动开始下载包，然后监测使用所需要的环境。
    > 
    > ![成功结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODM1MzAw_size_16_color_FFFFFF_t_70_pic_center]
2.  环境监测后显示  
    ![依赖][20210103013133225.jpg_pic_center]
    
    **重点关注两点** ：第二个Android toolchain和Android Studio，下面来解决Android Studio插件安装问题，第二个问题主要是没有license授权原因，放在安装问题及解决中
3.  Android Studio插件安装  
    a. 打开Android Studio  
    b. 打开File->setting->Plugins  
    c. 在Marketplace中搜索Flutter  
    d. 安装Flutter，同时会提示安装Dart插件，选择Yes  
    e. Restart IDE安装完毕！！！

# 2. 使用 #

1.  现有App创建一个Flutter项目
    
    1.  创建一个项目**FlutterTest** ，选择一个Empty Activity  
        ![flutterTest][]
    2.  创建一个FlutterModule，**File->New->New Module…**  
        ![fluttermodule][]  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODM1MzAw_size_16_color_FFFFFF_t_70_pic_center 1]
    3.  等待创建好项目，在**setting.gradle** 中会看到
        
            include ':app'
            setBinding(new Binding([gradle: this]))
            evaluate(new File(
              settingsDir,
              '../flutter_module_test/.android/include_flutter.groovy'
            ))
            rootProject.name = "FlutterTest"
    4.  在**build.gradle** ，是app目录下的，你会看到一行这个，这些一般情况都会自己生成
        
            dependencies {
                    
                implementation project(path: ':flutter')
            }
2.  在App主页面开启Flutter
    
    1.  在主页面添加一个Button
        
            <Button
                    android:id="@+id/button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="392dp"
                    android:text="start Flutter"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
    2.  在AndroidManifest.xml中注册Activity
        
            <activity
              android:name="io.flutter.embedding.android.FlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
              android:hardwareAccelerated="true"
              android:windowSoftInputMode="adjustResize"
              />
    3.  加载FlutterActivity  
        button绑定事件,这里使用的是kotlin的写法
        
            button.setOnClickListener {
                    
              startActivity(
                FlutterActivity.createDefaultIntent(this)
              )
            }
    4.  运行
        
        ![main][]  
        ![flutter][]
3.  可能会遇到的问题，每次点击摁扭加载都需要一段时间，可以使用缓存机制。
    
    1.  使用缓存的**FlutterEngine**
        
            class MainActivity : AppCompatActivity() {
                    
            	
                lateinit var flutterEngine : FlutterEngine
                
                override fun onCreate(savedInstanceState: Bundle?) {
                    
                    super.onCreate(savedInstanceState)
                    setContentView(R.layout.activity_main)
                    //初始化
                    flutterEngine = FlutterEngine(this)
            
                    //预加载FlutterEngine
                    flutterEngine.dartExecutor.executeDartEntrypoint(
                        DartExecutor.DartEntrypoint.createDefault()
                    )
            
                    //缓存FlutterEngine
                    FlutterEngineCache
                        .getInstance()
                        .put("MyEngine", flutterEngine)
            
                    //摁扭点击事件
                    button.setOnClickListener(){
                    
                        startActivity(
                            FlutterActivity
                                .withCachedEngine("MyEngine")
                                .build(this)
                        )
                    }
                }
            }

# 3. 安装问题及解决 #

1.  **问题：** 如图  
    ![java版本错误][java]
    
    **问题分析：** 该问题是使用java版本问题，如果你的java版本不是1.8就会报错。  
    **解决方案：** 下载java1.8安装并配置好环境变量。
2.  **问题：** 如图  
    ![license问题][license]
    
    **问题分析：** 其中第二行是Android的协议授权问题  
    **解决方案：** 命令行输入flutter doctor --android-licenses，不断输入’y’回车同意协议直到最后。  
    ![接受协议][20210103013742247.jpg_pic_center]

# 4. 前景分析 #

1.  Flutter的发展  
    Flutte是一款跨平台移动应用开发框架，1.0发行时间是2018年12月发布。开发语言是基于Dart语言。同样是跨平台移动应用开发框架的react native，是2015年发布的，开发语言是基于JavaScript。但是到这篇文章写下的时候，Flutter和react native是Github start数对比如下图。  
    ![flutter\_github][flutter_github]  
    ![react\_native\_github][react_native_github]
    
    在此可以见到Flutter最近的火热程度。
2.  为什么Flutter可以如此的火？  
    因为Flutter对于跨平台是支持。开发Flutter应用，可以使得写一套程序，就可以非常方便的在Android和ios两端使用，这使得开发效率大大的提高。
3.  是否应该学习flutter？  
    学习一门新的技术就是时间成本问题，Flutter的关注度在github上如此之高，且最近的更新速度越来越快，版本逐渐趋于稳定，国内使用flutter开发的app有阿里的闲鱼，国外有github手机版，国外使用flutter开发这两年逐渐增多。
    
    虽然到现在flutter还可以说是一个比较新的技术，但是一项技术只有去学习，去开发真正运行起来，让越来越多的人看到该技术的优势，渐渐的就会普及使用起来。
    
    flutter普及度国内尚欠不高的原因是因为，国内使用java和js开发的人比较多，而使用dart语言现在尚欠较少，所以flutter相较于react native的普及度不够，但是作为一个大学生，学习一门新语言的时间还是有的，所有值得研究一下，并且尝试开发几个项目，Flutter的前景还是有的，到时候或许就有用武之地。

作者 张俊荣

[原文地址][Link 1]

[Flutter]: https://flutter.cn/community/china
[Flutter 1]: https://mirrors.cloud.tencent.com/flutter/flutter_infra/releases/stable/windows/
[TUNA]: https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra/releases/stable/windows/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODM1MzAw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d5bae84e088b42a19330ab3632c0def2.png
[20210103013133225.jpg_pic_center]: /images/20221120/1b2aa431f8984e23b04f17933741b91b.png
[flutterTest]: /images/20221120/069934de582d40b38ff04a617c4f9303.png
[fluttermodule]: /images/20221120/5996aaf7a1ef49e6a5b43003bd00b9b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODM1MzAw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/988e4df601b44990bfb89c967cf8c761.png
[main]: /images/20221120/ede80cfb00904703a4bd1e1be7536483.png
[flutter]: /images/20221120/38a7cf31898541c7baad7c2fdeec0da4.png
[java]: /images/20221120/17e024638acb4e8599065a67ecc513c3.png
[license]: /images/20221120/d97e83062979490f9678986ad07230f5.png
[20210103013742247.jpg_pic_center]: /images/20221120/a2be2f587ee840e8a97edea1c45b9bd5.png
[flutter_github]: /images/20221120/98892774561845978a01ed4c81006b7d.png
[react_native_github]: /images/20221120/71557fc99141477c8acd4368cf661358.png
[Link 1]: https://blog.csdn.net/qq_39835300/article/details/112131043