本节目标

  • 程序基础结构
  • 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