零基础三分钟写一个Flutter App

这个教程是面向完全没有接触过Flutter开发,从0开始搭建Flutter开发环境到写第一个Flutter app的。 正常情况只需要半个小时就可以看到app。

中文资料官网:https://flutterchina.club/get-started/install/

英文原资料官网:https://flutter.io/get-started/install/

安装环境

sdk下载链接:https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.5.1-beta.zip

如果你是墙内用户,估计要翻墙才能下载到sdk。

Flutter开发环境主要由两部分构成,一个是sdk,跟Android的sdk和 Java环境一样需要配置环境变量,另外一部分是IDEA/Android Studio的Flutter插件。 上面下载完sdk后解压缩,放到你习惯的位置,然后配置环境变量,以笔者mac环境为例

cat .bash_profile export PATH="$PATH: /Library/Android/sdk/platform-tools" export PATH="$PATH:/usr/local/opt/gradle/gradle-4.1/bin" export PATH="$PATH: /Library/Android/sdk/ndk-bundle" export PATH="$PATH: /Library/flutter/bin" -----> flutter环境变量 export PATH="$PATH:~/Library/kotlinc/bin"

windows环境配置跟JAVA_HOME配置一样,放到 PATH 就可以。安装完sdk后可以用 flutter doctor检查依赖关系, 如果正常的话 flutter doctor会输出类似下面的结果

flutter doctor ╔════════════════════════════════════════════════════════════════════════════╗ ║ WARNING: your installation of Flutter is 43 days old. ║ ║ ║ ║ To update to the latest version, run "flutter upgrade". ║ ╚════════════════════════════════════════════════════════════════════════════╝ Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.12 16A323, locale zh-Hans-CN) [!] Android toolchain - develop for Android devices (Android SDK 27.0.3) ✗ Android license status unknown. [!] iOS toolchain - develop for iOS devices ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer ✗ libimobiledevice and ideviceinstaller are not installed. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup [✓] Android Studio (version 3.1) [✓] Connected devices (1 available)

‘✗’表示缺失的依赖,基本上只要保证 Flutter 和 Android Studio 这两项是 [✓] 就可以了。除非还想做ios开发, 那么把 IOS toolchain 中缺失的依赖也按照提示装上就行。

安装插件

Android Studio的flutter插件也很简单,需要两个依赖,一个是 Dart 语言插件,一个是 Flutter插件。 · 连续按3次shift然后搜 plugins,或者在 Preferences > Plugins(Mac) / File>Settings>Plugins(Win) 中打开插件配置 · 搜索 Dart 和 flutter 安装两个插件后按提示重启Studio就行。

第一个Flutter app

一切正常的话,在重启后的File选项中可以看到新建Flutter项目的选项,选上它之后跟新建普通Android app一样就行。 这里新建的Flutter HelloWorld 工程很简单,demo上的数字会随着按钮的点击自增。 main.dart 是主入口,代码比较简单,有看过之前小编关于 Flutter的介绍的文章应该能看明白。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue,),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

`

到此就完成第一个Flutter app了。目前Flutter相关的资料中英文都有,而且相当容易上手。 有兴趣的可以加群互相学习。

原文发布于微信公众号 - Android每日一讲(gh_f053f29083b9)

原文发表时间:2018-07-13

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

2762
来自专栏Java架构沉思录

Node.js 三大特点你都懂了吗

在Java、PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说,理论上,一个8GB内存的服务器...

1173
来自专栏数据小魔方

Excel多工作薄合并

今天要给大家介绍一下Excel多工作表合并的技巧! 由于Excel工作薄文件可以包含多个工作表,所以合并起来要比Word麻烦! 目前还无法单纯通过Excel界面...

3146
来自专栏米扑专栏

Node.js 安装与开发

4818
来自专栏coder修行路

aiohttp文档翻译-server(一)

一个 request handler 必须是一个coroutine (协程), 它接受一个Request实例作为其唯一参数,并返回一个Response 实例,如...

1332
来自专栏lgp20151222

tar包和jar包和war包的区别?

tar:tar是*nix下的打包工具,生成的包通常也用tar作为扩展名,其实tar只是负责打包,不一定有压缩,事实上可以压缩,也可以不压缩,通常你看到xxxx....

1142
来自专栏软件开发

Node.js开发Web后台服务

一、简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/...

1.5K9
来自专栏IT派

静态站点生成器:makesite.py

通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们!

1563
来自专栏企鹅号快讯

使用技巧精讲

1、快速建立连接 单击顶部活动菜单栏上的“快速建立连接按钮”(Alt+Q),如图1 图1 单击按钮后,弹出图2所示的窗口 ? 图2 Protocol:默认SSH...

2195
来自专栏云计算教程系列

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

1582

扫码关注云+社区

领取腾讯云代金券