本节目标

  • 程序基础结构
  • pubspec.yaml 配置
  • 布局,样式使用

目录文件结构

名称 说明
lib Flutter 代码
android Android 项目
ios IOS 项目
test 测试目录
.idea IDEA 编辑器配置
pubspec.yaml Flutter 配置文件
pubspec.lock 包版本锁定
build 编译目录

一、编写最基础 helloword

  • 步骤
1
2
3
1. 第一步 runApp(...)
2. 第二步 MaterialApp(...)
3. 第三步 指定 widget Text(...)
  • 代码
1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

main(List<String> args) {
// 第一步 runApp(...)
runApp(
// 第二步 MaterialApp
MaterialApp(
// 第三步 指定 widget
home: Text('hello word!'),
));
}

二、采用界面脚手架 标题 侧栏 正文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
main(List<String> args) {
// 第一步 runApp(...)
runApp(
// 第二步 MaterialApp
MaterialApp(
// 第三步 指定 widget
home:
// 第四步 页面脚手架
Scaffold(
// 第五步 程序标题
appBar: AppBar(
title: Text('我们第一个程序'),
),
// 第六步 侧栏
drawer: Drawer(
child: Text('侧栏'),
),
// 正文
body: Text('hello word!'),
),
));
}

三、布局 样式 图片

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
main(List<String> args) {
// 第一步 runApp(...)
runApp(
// 第二步 MaterialApp
MaterialApp(
// 第三步 指定 widget
home:
// 第四步 页面脚手架
Scaffold(
// 第五步 程序标题
appBar: AppBar(
title: Text('我们第一个程序'),
),
// 第六步 侧栏
drawer: Drawer(
child: Text('侧栏'),
),
// 正文
body:
// 居中
Center(
child: Column(
children: <Widget>[
// 载入图片
Image.asset('assets/p1.jpg'),
// 文字
Text(
'雷神',
// 样式
style: TextStyle(fontSize: 28, color: Colors.red),
),
],
),
),
),
));
}

代码

https://github.com/ducafecat/flutter-learn/tree/master/helloword

参考


© 猫哥

https://ducafecat.tech