Flutter第一讲,快速进入Flutter

原创 木子召 新新猿类 今天

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

Flutter第一讲,快速进入Flutter


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

IDE选择

  • VS Code
  • Android Studio

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

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

Flutter第一讲,快速进入Flutter


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

Flutter第一讲,快速进入Flutter


我们点击 Start a new Flutter project

Flutter第一讲,快速进入Flutter


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

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

Flutter第一讲,快速进入Flutter


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

  • 首先,import 'package:flutter/material.dart'; 相当于我们iOS的UIKit
  • 然后,得有入口函数吧,我们来写个


void main(){

}

  • 我们再想想iOS的main函数里干的事情,是不是return了UIApplicationMain,Flutter里有个类似的叫 runApp我们接着写


void main(){

runApp(

);

}

  • 接着我们要在屏幕中央显示一行Hello Flutter,我们会用到一个Center Layout,这个Layout有一个child的属性,我们可以想象成addSubview,我们传一个Text相当于iOS的UILabel组件进去,最终代码如下:


void main(){

runApp(

Center(

child: Text('Hello Flutter', textDirection: TextDirection.ltr,),

)

);

}

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

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

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

Flutter第一讲,快速进入Flutter


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

点此查看福利

One More Thing

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

Flutter第一讲,快速进入Flutter


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

Flutter第一讲,快速进入Flutter


iOS_DevTips

Flutter第一讲,快速进入Flutter



分享到:


相關文章: