Home » Flutter项目 » Flutter项目

Flutter项目

编 辑:Y ┊ 时 间:2022年07月22日 ┊ 访问: 19 次

一. 创建Flutter项目

创建Flutter项目有两种方式:通过命令行创建 和 通过开发工具创建

1.1. 通过命令行创建

通过命令行创建非常简单,在终端输入以下命令即可:

  • 注意:Flutter的名称不要包含特殊的字符,另外不可以使用驼峰标识
  • 创建完之后使用自己喜欢的开发工具打开即可
flutter create learn_flutter

46086-l6fxq7a5hv.png

1.2. 通过开发工具创建

我这里也可以直接通过Android Studio来进行创建:

选择Start a new Flutter project,之后填写相关的信息即可,这里不再赘述

47872-kv4mwdiihhh.png

默认项目分析:

  • 我们之前已经分析过目录结构了,在目录下有一个lib文件夹,里面会存放我们编写的Flutter代码;
  • 打开发现里面有一个main.dart,它是我们Flutter启动的入口文件,里面有main函数;

作为初学者,我的建议是将其中所有的代码全部删除掉,从零去创建里面的代码,这样我们才能对Flutter应用程序的结构非常清晰;

二. 开始Flutter代码

2.1. Hello World

2.1.1. Hello World的需求

做任何的开发,我们都是从祖传的Hello World开始,那么现在我们的需求来了:

  • 在界面中心位置,显示一个Hello World;

2.1.2. Hello World的实现

下面,我们就动手开始编写Hello World:

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

27594-lpzacpevd1g.png

当然,上面的代码我们已经实现了在界面上显示Hello World:

  • 但是没有居中,字体也有点小;
  • 这些问题,我们放到后面再来解决,先搞懂目前的几行代码;

上面的代码我们有一些比较熟悉,有一些并不清楚是什么:

  • 比如我们知道Dart程序的入口都是main函数,而FlutterDart编写的,所以入口也是main函数;
  • 但是我们导入的Material是什么呢?
  • 另外,我们在main函数中调用了一个runApp()函数又是什么呢?

下面,我们对不认识的代码进行一些分析。




Copyright © 2026 Y 版权所有.网站运行:13年238天21小时23分