创建Flutter项目有两种方式：通过命令行创建 和 通过开发工具创建
1.通过命令行创建非常简单，在终端输入以下命令即可：
**注意：**Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
flutter create learn_flutter
创建完之后使用自己喜欢的开发工具打开即可
2.直接通过Android Studio来进行创建：选择Start a new Flutter project，之后填写相关的信息即可
目录结构
.dart_tool 第三方工具 .idea /.iml 项目当前配置 android/ios 打包环境 lib 代码文件 main.dart 启动入口文件 名字不可更改 test 测试文件 .gitignore git文件忽略 .metadata flutter版本管理 .pubspec.yaml/.pubspec.lock/.packages 依赖 README.md readme文件
打开模拟器
Android Studio 打开tools菜单 → AVD Manager → 运行
命令行
flutter devices //检测模拟器 flutter run //运行
如果卡在 Initializing gradle 原因 ： 可能正在下载gradle zip包，此文件大约100多M，如果网速慢的话，下载很慢，因此卡住。如何解决这个问题
启动方式：
清空main.dart
import 'package:flutter/material.dart';
main() {
//1.runApp函数
runApp(
Center(
child: Text(
"Hello Word",
textDirection: TextDirection.ltr,
style:TextStyle(
fontSize:38,
color: Colors.orange
),
)
)
); //传入一个 Widget Text继承于Widget
}
runApp和Widget
runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的
Flutter中万物皆Widget（万物皆可盘）：在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
但是在Flutter中，这些东西都是不同的Widget而已；
也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；
material是什么
material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
在Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；
Text小部件分析：
我们可以使用Text小部件来完成文字的显示；
我们发现Text小部件继承自StatelessWidget，StatelessWidget继承自Widget；
所以我们可以将Text小部件传入到runApp函数中
属性非常多，但是我们已经学习了Dart语法，所以你会发现只有this.data属性是必须传入的。
class Text extends StatelessWidget {
const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
});
}
改进界面样式
我们在Text小部件外层包装了一个Center部件，让Text作为其child；
并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(
Center(
child: Text(
"Hello World",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 36),
),
)
);
}
改进界面结构
目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。
正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。
我们通过下面的代码来实现：
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("CODERWHY"),
),
body: Center(
child: Text(
"Hello World",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 36),
),
),
),
)
);
}
在最外层包裹一个MaterialApp
这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；
title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；
home：是该应用启动时显示的页面，我们传入了一个Scaffold翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；
重构案例代码
现在我们就可以通过StatelessWidget来对我们的代码进行重构了
因为我们的整个代码都是一些数据展示，没有数据的改变，使用StatelessWidget即可；
每一个weiget就可以拆分成一个class
import 'package:flutter/material.dart';
main()=>runApp(MKAppPage());
/**
* widget:
* 有状态的widget: Statefulwidget在运行过程中有一些状态(data)需要改
* 无状态的widget:Statelesswidget.内容是确定没有状态(data)的改变
*
*/
class MKAppPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MKHomePage()
);
}
}
class MKHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("第一个flutter程序")),
body: MKContentBody(),
);
}
}
class MKContentBody extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
"Hello Word",
style: TextStyle(fontSize: 38, color: Colors.orange),
));
}
}
有状态的Widget：实现点击更改状态，setState需要更改状态
import 'package:flutter/material.dart';
main()=>runApp(MKAppPage());
class MKAppPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MKHomePage()
);
}
}
class MKHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("第一个flutter程序")),
body: MKContentBody(),
);
}
}
class MKContentBody extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return MKContentBodySate();
}
}
class MKContentBodySate extends State<MKContentBody>{
var flag=true;
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(value: flag, onChanged: (value){
setState(() {
flag=value;
});
}),
Text("同意协议",style: TextStyle(fontSize: 20),)
],
));
}
}