专栏首页子曰五溪编写你的第一个 Flutter App

编写你的第一个 Flutter App

Flutter 是 Google 用以帮助开发者在 iOS 和 Andorid 两个平台开发高质量 UI 的移动 SDK,免费且开源。为了体验 Flutter 编写的 App,我将它的示例应用编译了起来,UI处理确实很细腻入微,沉浸式的体验过之后,发觉到值得我们深入去学习。

示例项目地址:https://github.com/2d-inc/HistoryOfEverything

既然是编写你的第一个 Flutter App,本文仅仅从入门的角度而言,它需要你准备一些很入门的工作,如下:

  • 能访问 Google 资源的网络
  • 安装 Xcode,因为我们需要 iOS 模拟器
  • 正确的安装 Flutter SDK
  • 安装 VSCode 和 Flutter 插件

在你的bash 中配置:export PATH="$HOME/flutter/bin:$PATH",在终端运行 flutter 是否有如下图所示

我们将使用 VSCode 创建一个简单的基于模板的 Flutter 工程,然后我们将项目命名为 my_flutter_app,使用 command + shift + p 唤起 VSCode 控制台,选择 Flutter: New Project ,输入 my_flutter_app 然后按下回车,等待如图:

在控制台中选择 Flutter 的配置,然后启动调试,最终的结果如图:

让我们从示例代码中修改几个字看看,将 Flutter Demo 修改为 My Flutter App,Flutter Demo Home Page 修改为 My Flutter App Home Page ,如图:

对于一个健全的 App ,我们可能会依赖官方或第三方成熟的包来开发我们的应用,对于 Flutter 而言它的包管理工具和 Node.js 的 package.json 类似,在 pubspec.yaml 中你可以添加一个第三方包,一旦你保存了 pubspec.yaml 文件,VSCode 会自动的帮你下载,安装这个 Flutter Package ,因此它需要你的环境可以正常的访问 Google 的资源,这很重要。当然如果你不想 VSCode 自动下载安装,也可以在你的工程目录中,输入:flutter package get 来完成安装的进度;

接下来,让我们在示例项目中添加一个输出 hello icepy ,创建一个简单的文本 StatelessWidget ,用于显示 hello icepy,并把它添加到 _MyHomePageState 中。

class MyText extends StatelessWidget {

@override Widget build(BuildContext context){

return (

Text(

'hello icepy' ) ); } }

它看起来会是这样的,hello icepy 居中在原 Text 的上方,这是因为我将 MyText 添加在了 children 的第一个元素位置,它被 Center 和 Column 包裹着,必然如此。如果你能阅读到此处,那么恭喜你,这将是你编写的第一个 Flutter App,为你的ID添加了一个 hello ,这很有趣。

本文分享自微信公众号 - 子曰五溪(fed-talk)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《Flutter 入门指南》

    这是我今年写的第三本小书,最初的目标仅仅是自己学习一边写作,当我发现快要完结时,原来 Flutter 给我的喜悦让我很惊讶,这种喜悦感就像是找到了一个很有趣的玩...

    icepy
  • 技术 | Hybrid载体的变化(二)

    引擎的变化让你的JavaScript执行速度更快,并且让你的交互能力变的更为强大,iOS平台从iOS7开始提供了JavaScriptCore框架,Android...

    icepy
  • 开始 Flutter 实战项目-女装大佬

    《Flutter 入门指南》差不多就到了要完结说再见的时候了,这两天在家里想了想要做一个什么样的项目来练一下手,顺便也为 Flutter 学习小组交出一份合理的...

    icepy
  • 革命性移动端开发框架-Flutter时间简史

    说到Flutter,可能很多同学都会将它和这几个词关联起来:新兴的、移动端、动态化、跨平台、开发框架。

    猿哥
  • Flutter the Future

    Flutter Interact 2019在双12的凌晨结束了,6个多小时的大会,每一分钟都让一个开发者感到惊艳。

    用户1907613
  • Flutter学习总结系列----第一章、Flutter基础全面详解

    版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2c9867e737a1

    AWeiLoveAndroid
  • Flutter 的野心,Google 的认真,是时候准备走一波了

    说实话,Flutter 身为 Google 旗下最重要的一步棋,可以说是承前启后。前指的是:基于 Android 和 iOS 的跨平台解决方案,后指的是:它也是...

    非著名程序员
  • 爱奇艺 Flutter 跨平台 Hybrid 实践

    爱奇艺开播助手项目,又称"直播机",该项目目标是通过一个移动平台为主播提供多样化的直播内容。现阶段所涵盖的直播内容包括:游戏直播,美女摄像直播,小剧场直播,其中...

    用户1269200
  • 程序猿Skr ----- Flutter之歌

    版权声明:本文为博主原创文章,本文首发在公众号 Flutter那些事,版权归作者 AWeiLoveAndroid 所有,未经博主允许不得转载。https://w...

    AWeiLoveAndroid
  • 为什么Flutter是跨平台开发的终极之选

    导读:近日,谷歌开发者官方宣布,Flutter 1.7 正式发布,包含了对 AndroidX 的支持。

    华章科技

扫码关注云+社区

领取腾讯云代金券