编写第一个Flutter App
运行Demo
打开Android Studio菜单项选择 Start a new Flutter project ，进入选项选择默认即可。 进入项目把 gradle 配置镜像源，需要把 google() 和 jcenter 替换成：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }然后再进行gradle sync构建项目。构建好可以在物理机或者虚拟机运行App了。
fltter project项目讲解
|flutter app
--|android/ # Android 环境源码
--|ios/ # iOS 环境源码
--|lib/ # 主要业务源码，我们重心在这开发
--|test/ # 测试环境
--|.gitignore # git上传忽略
--|.metadata # flutter元数据
--|.packages # 拉取依赖包信息
--|pubspec.lock # 依赖包锁
--|pubspec.yaml # 依赖说明Hello World
删除 lib/main.dart 所有内容，并添加下面代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}如果要格式化代码在右键单击Dart代码，然后选择 Reformat Code with dartfmt 。
从上述一段代码来看，风格倒是和现在主流编程风格差不多，都是面向对象编程过程。
- void main() => runApp(MyApp()); 是程序进来第一步执行的函数，这个函数是 MyApp()
- MyApp() 继承 StatelessWidget 方法并且注解解释重写该方法。
- 返回是 MaterialApp widget 组件方法信息。
在Flutter设计理念是：一切皆为组件，即widget。
最小组件
根据上面描述的代码完全可以精简成最少的代码运行App：
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textAlign:TextAlign.right,
textDirection: TextDirection.ltr,
),
),
);
}理解实例
在 Android Studio 新建项目里面包含个简单的项目，来大概了解下项目运行过程：
// 导入 UI 包，Material是 Google Android 特色 UI 风格
import 'package:flutter/material.dart';
// 应用入口，Main方法 => 类似 es6 的箭头函数，方法同样可以写成下面一样
void main() => runApp(MyApp());
//void main() {
// runApp(MyApp())
//}
/**
* 应用结构
* MyApp 继承 `StatelessWidget`这个类，并且重写相关方法
*/
class MyApp extends StatelessWidget {
// 应用程序根节点
@override
Widget build(BuildContext context) {
// MaterialApp 是 Material库中提供的Flutter APP框架，
// 通过它可以设置应用的名称、主题、语言、首页及路由列表等。
// MaterialApp 也是一个 widget。
return MaterialApp(
// 应用名称
title: 'Flutter Demo',
// 程序风格 蓝色
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 程序首页 并且含有`title`参数
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
/**
* 首页页面
* 该组件为 状态管理组件，意味着包含状态值相关业务
*/
class MyHomePage extends StatefulWidget {
// 接受参数
MyHomePage({Key key, this.title}) : super(key: key);
// 定义标题，并且未常量，不可再次赋值
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
/**
* MyHomePage 继承 StatefulWidget 其中的一个`State`状态类，该类用于程序监听状态来实现程序交互
*/
class _MyHomePageState extends State<MyHomePage> {
// int 类型 的变量 `_counter` 初始化为 0
int _counter = 0;
// 叫`_incrementCounter`方法
void _incrementCounter() {
setState(() {
// 如果触发`_incrementCounter`方法就自增`_counter`
_counter++;
});
}
// 构建 UI 界面
@override
Widget build(BuildContext context) {
// Scaffold 是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton。
return Scaffold(
// 导航栏
appBar: AppBar(
// 导航栏标题 参数填入 上面`MyHomePage`带进来的参数
title: Text(widget.title),
),
// 程序正文，内容居中
body: Center(
// 布局组件 Column的作用是将其所有子widget沿屏幕垂直方向依次排列
child: Column(
// 控制主轴方向为居中
mainAxisAlignment: MainAxisAlignment.center,
// 子类组件，以 list 形式展示
children: <Widget>[
// 输出文本内容
Text(
'You have pushed the button this many times:',
),
// 输出文本内容，`$+变量名`可以在字符串中显示，并且style定义输出字符串风格
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
// 页面右下角圆形按钮
floatingActionButton: FloatingActionButton(
// 点击按钮触发
onPressed: _incrementCounter,
// 提示，长按按钮出现悬浮窗提示字段
tooltip: 'Increment',
// 渲染加号的图标
child: Icon(Icons.add),
),
);
}
}当右下角的floatingActionButton按钮被点击之后，会调用 _incrementCounter ，在 _incrementCounter 中，首先会自增 _counter 计数器（状态），然后 setState 会通知Flutter框架状态发生变化，接着， Flutter 会调用 build 方法以新的状态重新构建UI，最终显示在设备屏幕上。
尝试编写一个App
从编写这篇博文就有个写个App的计划，大概是Flutter功能展示方向的App，相信在Github有了一大堆轮子项目，且当对我来说是一个锻炼技术的项目吧，希望在这个项目过程中能够给自己带来App开发思考和设计理念。
原文：https://iiong.com/write-the-flutter-app/
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
