大地老师 Flutter课件

Flutter 创建 App

1
2
3
4
5
6
# 创建 app
flutter create flutter-app
#进入到项目里
cd flutter-app 
#用 vscode 打开当前项目
code .

Flutter 目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Flutter
 └── flutter_app
     ├── analysis_options.yaml
     ├── android # 安卓平台 资源文件
     │   ├── app
     │   ├── build.gradle
     │   ├── flutter_app_android.iml
     │   ├── gradle
     │   ├── gradle.properties
     │   ├── gradlew
     │   ├── gradlew.bat
     │   ├── local.properties
     │   └── settings.gradle
     ├── flutter_app.iml
     ├── ios # IOS平台 资源文件
     │   ├── Flutter
     │   ├── Runner
     │   ├── Runner.xcodeproj
     │   └── Runner.xcworkspace
     ├── lib
     │   ├── dynamicListView.dart
     │   ├── extendsTest.dart
     │   ├── genericType.dart
     │   ├── gridView.dart
     │   ├── image.dart
     │   ├── lateralListView.dart
     │   ├── listView.dart
     │   ├── main.dart
     │   └── text.dart
     ├── linux # linux平台 资源文件
     │   ├── CMakeLists.txt
     │   ├── flutter
     │   ├── main.cc
     │   ├── my_application.cc
     │   └── my_application.h
     ├── macos
     │   ├── Flutter
     │   ├── Runner
     │   ├── Runner.xcodeproj
     │   └── Runner.xcworkspace
     ├── pubspec.lock
     ├── pubspec.yaml # 项目依赖 以及版本号
     ├── README.md
     ├── test
     │   └── widget_test.dart
     ├── web # web平台 资源文件
     │   ├── favicon.png
     │   ├── icons
     │   ├── index.html
     │   └── manifest.json
     └── windows # windows平台 资源文件
         ├── CMakeLists.txt
         ├── flutter
         └── runner

需要关注的文件和文件夹:
lib: flutter相关代码，编写的代码会放到这个文件夹内!
pubspec.yaml: 项目配置文件, 项目依赖包管理!
analysis_options.yaml: 分析dart语法文件!
test: 测试代码文件!

打包所需要关注的文件夹:
android
ios
windows
mac
这些文件夹，用来配置 app应用图标，以及启动页相关配置!

Flutter 入口

lib/main.dart

1
2
3
4
5
6
import 'package:flutter/material.dart';

void main(List<String> args) {
  return runApp(MyApp());
}

MaterialApp 组件

MaterialApp是一个主题组件，内置了常用的样式功能组件!
常用的属性:
home(主页)
title(标题)
color(颜色)
theme(主题)
routes(路由)

Scaffold 组件

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API;
主要属性:
appBar: 显示在界面顶部 AppBar,类似于页面中的 header;
body: 当前界面所显示的主要内容, 类似与页面中的 body！
drawer: 抽屉菜单控件!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Hello Flutter!'),
      ),
      body: const Center(
        child: Text(
          'Hello Flutter!',
          textAlign: TextAlign.center,
          textDirection:TextDirection.ltr,
          style: TextStyle(
            color: Colors.blue,
            fontSize: 30,
          ),
        ),
      ),
    ),
  ));
}

Widget 自定义组件

在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget 和 StatefulWidgetfulWidget!
StatelessWidget: 是无状态组件，状态不可变的 Widget!
StatefulWidgetfulWidget: 是有状态组件，持有的状态可能在 Widget 生命周期改变!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Hello Flutter!'),
      ),
      body: MyApp();
    ),
  ));
}

// StatelessWidget 是抽象类， 需要实现 build 抽象方法!
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
        child: Text(
          'Hello Flutter!',
          textAlign: TextAlign.center,
          textDirection:TextDirection.ltr,
          style: TextStyle(
            color: Colors.blue,
            fontSize: 30,
          ),
        ),
      );
  }
}

MaterialApp 去掉 debug 图标

1
2
3
return MaterialApp(
  debugShowCheckedModeBanner: false,
)