一、 创建项目
两种方式:
1. 终端命令创建
通过命令行创建非常简单,在终端输入以下命令即可:flutter create learn_flutter
Flutter的名称不要包含特殊的字符,不可以使用驼峰标识
创建完之后使用自己喜欢的开发工具打开即可
2. 开发工具创建
我这里也可以直接通过Android Studio
3. 初始程序分析
初始工程分析:
我们之前已经分析过目录结构了,在目录下有一个lib文件夹,里面会存放我们编写的Flutter代码;
打开发现里面有一个main.dart,它是我们Flutter启动的入口文件,里面有main函数;
初始代码分析:
这是一个计数器的案例程序,点击右下角的 + 符号,上面显示的数字会递增;
但是我们第一次接触main.dart中的代码,可能会发现很多不认识的代码,不知道这个内容是如何编写出来的;
作为初学者,我的建议是将其中所有的代码全部删除掉,从零去创建里面的代码,这样我们才能对Flutter应用程序的结构非常清晰;
二. 第一个Flutter工程Hello World
2.1、Hello World
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
2.2、代码分析
2.2.1、 runApp和Widget
void runApp(Widget app) {
..
}
Widget :小部件或者组件Flutter中万物皆Widget;
在我们iOS或者Android开发中,我们的界面有很多种类的划分:应用(Application)、视图控制器(View Controller)、活动(Activity)、View(视图)、Button(按钮)等等;
但是在Flutter中,这些东西都是不同的Widget而已;
也就是我们整个应用程序中所看到的内容几乎都是Widget,甚至是内边距的设置,我们也需要使用一个叫Padding的Widget来做;
runApp函数让我们传入的就是一个Widget:
但是我们现在没有Widget,怎么办呢?
我们可以导入Flutter默认已经给我们提供的Material库,来使用其中的很多内置Widget;
2.2.2、 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,
});
}
StatelessWidget简单介绍:
StatelessWidget继承自Widget;
abstract class StatelessWidget extends Widget {
// ...省略代码
}