美文网首页Flutter圈子Flutter中文社区Flutter
Flutter入门-01-工程创建&目录介绍

Flutter入门-01-工程创建&目录介绍

作者: HelloMrLi | 来源:发表于2019-07-10 10:35 被阅读19次

    前言

            Flutter目前作为优秀的移动跨平台框架,从18年出道到现在发展势头依然不减。采用Dart作为其开发语言,鉴于dart语言的优秀特性,使得flutter开发更加的简单高效

    工程搭建步骤

    1,下载flutter的sdk

    2,编辑器选择,这里大家可以选择vscode,Android stuido,IDEA等,大家可以按照习惯选择,我这边使用的是Android studio

    3,下载插件,重启编辑器

    4,配置flutter环境变量,运行flutter doctor检测环境是否准备OK

    5,新建Flutter工程,连接真机/模拟器,运行工程


    第一步:下载sdk

            将下载好的sdk解压,放入电脑中的任意位置

    第二步:编辑器

             vscodeAndroid stuidoIDEA都可以作为flutter的开发编辑工具,这里看大家的熟练度来选择,这里选择Android studio来使用;如遇上述链接无法下载,还请自行度娘选择下载

    第三步:下载插件

            打开Android studio,找到文件-设置-Plugins,然后选择在Browse repositories,然后搜索flutter,点击右侧的安装,安装时一般会同时安装dart,安装完成后,重启编辑器即可

    setting plugin search

    第四步:配置flutter环境变量

            找到第一步下载后的已经解压后的文件夹,将bin目录的路径加到环境变量里,我这里的路径是D:\flutter\flutter_windows_v1.6-dev\flutter\bin,大家根据自己的实际路径进行配置添加

            配置完成后,重新打开cmd运行命令flutter doctor,如果发现有xx的提示,则说明需要根据提示拍查修改,我这里已经准备好的环境运行后如下,可以看到没有[ x ]开头的,说明环境准备ok

    flutter doctor

    第五步:新建工程,运行

            在环境等准备工作完成后,我们就可以新建Flutter工程了。打开Android studio,File-New-New Flutter Project-Flutter Application,填入信息后点击完成即可,图示如下

    new flutter project flutter application configure

            新建完成后工程目录/说明如下

    工程目录/说明

            我们编写代码就在lib文件夹中编写,在lib下有个默认的入口文件main.dart,这里就是工程启动的默认界面代码,这里我们运行到模拟器上,模拟器推荐大家使用Genymotion,生内存而且速度比较快,Android和IOS的都有;我们新建了一个模拟器,然后训责默认入口文件main.dart,然后点击绿色箭头运行工程;在运行时可能会遇到如下情况,一直卡住,这是因为不翻墙的话,我们有时候无法下载gradle;

    此时有两种解决方案:

            1,检查自己已有的的gradle对应的版本,将flutte工程r中的Android工程中的gradle版本设置为本地已有版本号即可

            2,科学上网,直接等待下载flutter工程Android工程中的gradle版本

    运行时,拥有匹配gradle版本号就能直接运行 运行示意 模拟器运行结果

    下一篇:Flutter入门-02-Dart语言选讲

    相关文章

      网友评论

        本文标题:Flutter入门-01-工程创建&目录介绍

        本文链接:https://www.haomeiwen.com/subject/bwsckctx.html