1.创建Flutter项目
创建Flutter项目有两种方式：通过命令行创建和通过开发工具创建
- 通过命令行创建
在终端输命令：flutter create flutter_demo
如果创建项目时想要选择iOS和Android的开发语言，可以使用以下命令：
flutter create -i objc -a java xxapp
flutter create -i swift -a kotlin xxapp
ps：Flutter的名称不要包含特殊的字符，也不可以使用驼峰标识
- 通过开发工具创建
直接通过Android Studio来进行创建，选择Start a new Flutter project，之后填写相关的信息即可。
Android Studio
2. 项目结构
项目结构
3.计数器示例
Flutter项目创建好之后会有一个默认的计数器Demo。运行项目效果图如下：
计数器
每点击一次右下角带“+”号的悬浮按钮，屏幕中央的数字就会加1。在这个示例中，主要Dart代码是在 lib/main.dart 文件中，源码如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
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();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
4.代码分析
- 导入包
import 'package:flutter/material.dart';
此行代码作用是导入了Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言， Flutter默认提供了一套丰富的Material风格的UI组件。
- 应用入口
void main() => runApp(MyApp());
runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的。runApp它接受一个Widget参数，在本示例中它是一个MyApp对象，MyApp()是Flutter应用的根组件。
- 应用结构
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
MyApp类代表Flutter应用，它继承了StatelessWidget类，这也就意味着应用本身也是一个Widget。在Flutter中，大多数东西都是Widget(万物皆Widget)，整个应用程序中所看到的内容几乎都是Widget，包括对齐(alignment)、填充(padding)和布局(layout)等。
Flutter在构建页面时，会调用组件的build方法，Widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础Widget）。
MaterialApp是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个Widget。
home为Flutter应用的首页，它也是一个Widget。
- 首页
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 代码省略
}
MyHomePage 是Flutter应用的首页，它继承自StatefulWidget类，StatefulWidget是一个有状态的组件。StatefulWidget和无状态的组件StatelessWidget有两点不同：StatefulWidget可以拥有状态，这些状态在Widget生命周期中是可以变的，而StatelessWidget是不可变的。StatefulWidget至少由两个类组成：一个StatefulWidget类，一个 State类； StatefulWidget类本身是不变的，但是State类中持有的状态在Widget生命周期中可能会发生变化。_MyHomePageState类是MyHomePage类对应的状态类。
网友评论