✍ 经典开场

我想到最浪漫的事情,是为了自己最浪漫的事情而坚持.

🔔 发言代表

首先,为什么会选择学习 Flutter ？

其次,自己在毕业以后 想干什么 ？

最后,自己 会什么 和 机会凭什么给你 ？

💻 通过上述的三个问题已经困扰了我很久,我始终无法给出 一份完美的答卷.

❓学了计算机快有五年了,自己能通过计算机能给自己以后的生活能改变什么;也许自己的境界达不到别人的高度,互联网也许是一个 让人可以暴富的一条道路,而我却没有找到属于我自己的方向;很多方面都在学习,却没有自己的一些拿手作品;同时,在编程方面的根基没有牢固, 也导致自己的思维固定在了一个维度,难以突破.

✅ 直到偶然的机会,让我看到了腾讯、阿里巴巴、字节跳动、Google Pay等很多公司都相继使用了Flutter,因此, 我就想找时间学习一下Flutter.终于,在这个假期我终于与繁琐的课表暂时告别一个段落,同时我也是如愿的开始学习Flutter.

🎯 项目目标

通过学习Flutter语言的学习,扩大一下知识面.

📆 项目时间

启动时间:2023年

🚗 学习进度

60%

📜 项目资料

1.Flutter来源

Flutter是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App. 它最大的特点就是跨平台、以及高性能. 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发.

2.Flutter优势

Flutter是谷歌基于Dart语言开发的一款跨平台的App开发框架。它针对的开发者是全部开发者。它的性 能相比RN、Ionic这样的框架要更好一些。

🎢 项目纪要

七月

1. 2023-07-01

  • ✅ 1.网上查询Flutter的深处环境
  • ✅2.未来Flutter的发展趋势
  • ✅ 3.Flutter环境搭建

2. 2023-07-02

  • ✅ 1.学习Flutter前必备的知识
  • ✅ 2.Dart环境搭配

3. 2023-07-03

  • ✅ 1.Dart学习

Dart语言

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
//构造函数就是我们在实例化类的时候自动触发得方法
class Persion {
  String name = 'aa';
  int age = 1;

  //  默认构造器函数
  /*Persion(String name, int age) {
      this.name = name;
      this.age = age;
  }*/
  //默认构造器函数简写
  Persion(this.name, this.age);

  //命名构造函数
  Persion.now(){
    print('我是一个普通命名构造函数');
    var date = new DateTime.now();
    print('当前时间:{$date}');
  }

  void printInfo() {
    print('${this.name}-----------${this.age}');
  }
}

void main() {
  Persion p1 = new Persion('小红', 18);
  p1.printInfo();

  Persion p2 = new Persion('大红', 19);
  p2.printInfo();

  Persion now = new Persion.now();
}

4. 2023-07-04

  • ✅ 1.了解Flutter
  • ✅ 2.Flutter环境安装

    • 💦 不得不承认这个环境安装是我搞得最久的一次,各种奇葩的错误全让我给遇上了,不过最后还好,全部都一一解决了

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
//入门程序
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好 Flutter")),
        body: const MyApp()
    ),
  ));
}

// 新建一个组件 自定义Body组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
        child: Text(
          "你好 flutter 我是一个自定义组件MyApp",
          textDirection: TextDirection.ltr,
          style: TextStyle(fontSize: 40.0, color: Color.fromARGB(99, 247, 17, 208)),
        )
    );
  }
}

5. 2023-07-05

  • ✅ 1.了解Flutter
  • ✅ 2.认识Flutter
  • 1、MaterialApp

    MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

  • 2、Scaffold

    Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet
    的API。

矩阵

6. 2023-07-06

  • ✅ 1.学习Flutter
  • GridView网格布局组件介绍

    GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件GridView实现布局。

矩阵

GridView网格布局

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
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        color: Colors.blue,
        child: Text(
          '这是第$i条数据',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        ),
        // height: 400, //设置高度没有反应
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0,
      //水平子 Widget 之间间距
      mainAxisSpacing: 20.0,
      //垂直子 Widget 之间间距
      padding: const EdgeInsets.all(10),
      crossAxisCount: 2,
      //一行的 Widget 数量
      childAspectRatio: 0.8,
      //宽度和高度的比例
      children: _getListData(),
    );
  }
}

7. 2023-07-07

  • ✅ 1.学习Flutter
  • 弹性布局（Flex Expanded）

    Row 和 Column 都继承自 Flex ，参数基本相同，所以能使用Flex的地方基本上都可以使用 Row 或 Column 。 Flex 本身功能是很强大的，它也可以和
    Expanded 组件配合实现弹性布局 。

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('水平弹性布局'),
          ),
          body: const HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
            flex: 2,
            child: IconContainer(
              Icons.home,
              color: Colors.green,
            )),
        Expanded(
          flex: 1,
          child: IconContainer(
            Icons.search,
            color: Colors.orange,
          ),
        )
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {super.key, this.color = Colors.red, this.size = 32});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      color: color,
      child: Center(
        child: Icon(
          icon,
          size: size,
          color: Colors.blueGrey,
        ),
      ),
    );
  }
}

  • Stack

    Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位 布局

8. 2023-07-08

  • ✅ 1.学习Flutter
  • Wrap组件

    Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Column表现几乎一致。但
    Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上
    去扩展显示。

搜索

Wrap组件

9. 2023-07-09

  • ✅ 1.学习Flutter

10. 2023-07-10

  • ✅ 1.学习Flutter

11. 2023-07-11

  • ✅ 1.学习Flutter

12. 2023-07-12

  • ✅ 1.学习Flutter

13. 2023-07-13

  • ✅ 1.学习Flutter

14. 2023-07-14

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

15. 2023-07-15

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

16. 2023-07-16

  • ✅ 1.学习Flutter

17. 2023-07-17

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming

18. 2023-07-18

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming

19. 2023-07-19

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming

20. 2023-07-20

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming

21. 2023-07-21

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming

22. 2023-07-22

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

23. 2023-07-23

  • ✅ 1.学习Flutter

24. 2023-07-24

  • ✅ 1.学习Flutter
  • ✅ 2.学习Swimming
  • ✅ 2.摆烂

25. 2023-07-25

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

26. 2023-07-26

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

27. 2023-07-27

  • ✅ 1.学习Flutter
  • ✅ 2.摆烂

🎈 总结

首先,学习这麽久Flutter真的感觉它很方便和快捷,但是中途有一段时间有各种事情就在摆烂,导致有一部分知识点没有全部学完,还有很多的知识点没有分享在此文章上, 真的很遗憾……
其次,就是学习游泳这件事情非常的爽歪歪,刚开始和刷的好的一起去游泳,只能说惨不忍睹,别人都在1.8M的地方游泳,而我们只敢在1.6M的地方游泳,真的全游泳池最搞笑的;
可惜,好久不长,他去和生活对线了,而我还在和游泳池对线;不知道吃了多少的水后,终于我以为我学会了游泳,当时我就去挑战了1.8M,含泪喝下游泳池的矿泉水.😭
最后,在和朋友一起去游泳池,终于在7月的某一天学会了,去挑战了2M的游泳池,顺利的游完.😊

🧠 完美收官

你可以没有梦想，但至少能把握今天.