首个flutter demo

配置好相应的flutter开发的框架,之后选择file-new-new flutter project,会出现以下界面首个flutter demo_第1张图片

选择flutter application之后,直接点击next即可, 之后

首个flutter demo_第2张图片

一路next,最后点击finish按钮即可。完成后会出现以下文件结构:便于我们跨域开发,一次仅写一次代码。

首个flutter demo_第3张图片

 

 如果是首次建立flutter项目,首次运行可能会遇到首个flutter demo_第4张图片

 长时间 处于这个界面的现象,那是由于gradle版本不一样一直处于更新状态,而更新时间的长短,取决于网络速度和相关配置。说两种简单的处理方式1)、新建一个Android项目,找到新建安卓项目下的gradle 文件夹下的gradle-wrapper.properties这个文件,打开复制distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip ,同样打开新建的flutter项目下的gradle-wrapper.properties这个文件替换distributionUrl这个地址即可,之后直接更新即可;2)、方法2是直接打开C:\Users\xxx\.gradle\wrapper\dists这个目录,在http://gradle.android-studio.org/或者http://services.gradle.org/distributions/任何一个地址,下载所需的gradle版本放到之前的目录即可。

以上都没问题后,直接运行会出现以下界面。

首个flutter demo_第5张图片

这个便是我们新建的首个flutter项目。

但是也有个别同志说啦,学习任何一个东西,不是helloword吗?这个不一样,其实也很简单。以下我们便来修改成自己想要的helloword的形式。

1、修改主体颜色和title

首个flutter demo_第6张图片

2、修改要显示 的 内容:

首个flutter demo_第7张图片

3、完成后运行效果如下:

首个flutter demo_第8张图片

至此我们的 第一个flutter项目完成啦。上面的修改是基于项目本身自动建立的main.dart文件修改的。也为学习flutter的伙伴们做噶参考。以上仅是本人个人的经验,如有问题请留言。

demo地址:https://download.csdn.net/download/smxueer/10628150

 

你可能感兴趣的:(flutter,flutter,demo)