很简单,按照官网的教程一步步来即可。
环境准备,先下载好sdk。
1.第一步,先下载flutter sdk
下载地址https://flutter.io/docs/get-started/install/macos,解压到你想要保存的目录。
2.android studio安装flutter插件
Preference=>plugins=>browse respositories,搜索flutter,重启android studio
3.这是点击新建flutter 项目
找到根目录的lib目录,把.dart文件的内容替换为下面,如果你的内容粘贴上去代码格式是不对的,你需要右键下,选择 Reformat Code with dartfmt.
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: const Text('Welcome to Flutter'), ), body: const Center( child: const Text('Hello World'), ), ), ); } }
这样我们就可以运行我们的第一个flutter项目了,运行效果
这样我们的第一个hello world项目就ok了
代码说明: 你会看到继承的是extends StatelessWidget,因为在flutter的项目里面,所有都可以看做是插件,这个你们慢慢体会。Scaffold是 Material lib库的,相当于android里面的Appbar Center是一个组件,组件内容会显示在屏幕中间
启动入口是 lib下面的main.dart文件。
目录结构其实和传统的android项目差别不大,区别在于根目录下多了启动入口lib目录
pubspec文件,是管理assert目录下的图片,音频==的,这个以后在说明
这里说名下,如果你想要你修改的某个变量及时生效的话,要调用setState方法
setState(() {
_counter++;
});,关于这个方法, 官方是这样说明的,This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
翻译下就是,这里的代码块会及时生效的,不需要你重新运行打包,这也是我特别喜欢的一个方法终于可以像开发一个前端那样来开发移动端了
附上 :flutter 解析 json,建议大家可以去看下官网dart关于json解析的说明https://api.dartlang.org/stable/2.0.0/dart-convert/JsonCodec-class.html,
用法很简单,比如这段json{"name": "david", "pwd": "123"}, 解析只要Map<String, dynamic> user = json.decode(json); 或者不制定类型。Map userMap = json.decode(json);