先来看看我们最终会用Flutter写一个仿照微信的APP

frc 3e42b3cf7369c85180b1093d68ba53fd - Flutter第一讲,快速进入Flutter
image

因为我们主要是实战,环境安装和配置我就不多说了,官网说的比较清楚了点此进入 不懂的或者配置出错的可以给我留言 还有就是Google的东西大家都懂得,最好有梯子,如果大家没有账号或者懒得弄的话,可以关注文末的公众号会有免费的梯子可用

IDE选择

  • VS Code

  • Android Studio

这两个都可以,我选择用的Android Studio,毕竟是Google的亲儿子,插件,兼容还有调试各方面都很方便,当然VS Code也挺好用,这个就根据自己的喜好选择吧,下面我们直接进入主题,下载完SDK后大家记得配置PATH

我们首先 flutter doctor下看看是否所有事项都已准备完毕

frc dd4908c059e25f6fc917b0f96ca10320 - Flutter第一讲,快速进入Flutter
image

一切准备完毕然后我们开始新建工程,大家可以用命令行,flutter create flutter_demo 来创建,我这里直接用Android Studio来创建了,大家记得安装Flutter插件,装完插件就会有新建Flutter Application选项了

frc 30e57e89fe5a94f784eca7188a10a0b9 - Flutter第一讲,快速进入Flutter
image

我们点击 Start a new Flutter project

frc 19ceda2a6da279f70af0052dba61b69f - Flutter第一讲,快速进入Flutter
image

后面其他几个选项我们到后面都会用到,用到的时候我们再细说

建完工程后,大家可以运行下系统给我们写好的代码看看效果,

frc eb41ab75d35d7dffd7eab64c8f69e145 - Flutter第一讲,快速进入Flutter
image

然后我们把系统给我们写好的代码全部干掉,我们对比着写iOS项目来尝试下如何写Flutter项目,我们先来写一个简单的在屏幕中央显示一行文字

  • 首先,import 'package:flutter/material.dart'; 相当于我们iOS的UIKit

  • 然后,得有入口函数吧,我们来写个

void main(){
}
  • 我们再想想iOSmain函数里干的事情,是不是return了UIApplicationMainFlutter里有个类似的叫 runApp我们接着写
void main(){
  runApp(
  );
}
  • 接着我们要在屏幕中央显示一行Hello Flutter,我们会用到一个Center Layout,这个Layout有一个child的属性,我们可以想象成addSubview,我们传一个Text相当于iOSUILabel组件进去,最终代码如下:
void main(){
  runApp(
    Center(
      child: Text('Hello Flutter', textDirection: TextDirection.ltr,),
    )
  );
}

Flutter 让开发人员描述当前的 UI 状态,并把状态切换的的工作留给了框架。Flutter这种布局方式叫声明式UISwiftUI也是这种框架,后面我们再详细介绍

需要注意的是,虽然声明式UI能帮我们减轻很多负担,但大家要将布局的思维方式要转变过来。

我们点击运行按钮看下效果

frc 6037eae6bf8fe21688925241b299db12 - Flutter第一讲,快速进入Flutter
image

是不是发现跟iOS开发都是大同小异的,今天先到这里,后面我们会把常用的widget都先玩一下

点此进入我的博客也会同步更新

One More Thing

点击查看 2020—课程列表 全网IT各种资源有需求的可以微我,或者你喜欢的课程都可以给我发链接剩下的我来搞定

喜欢的朋友可以扫描关注我的公众号(多多点赞,多多打赏,您的支持是我写作的最大动力)关注有福利可以使用免费梯子自由上网

frc d0b327955d23755397b6074a81493ee0 - Flutter第一讲,快速进入Flutter
iOS_DevTips

Flutter第一讲,快速进入Flutter