给flutter初学者的demo全集

立即下载用AI写一个

发布时间：2023-04-04

1人 | 浏览：1644次 | 收藏 |

技术：flutter2.18.1

概述

关于flutter初学内容的demo，一个完整的APP示例，其中包含组件，路由，动画，布局等多种示例

详细

## 概述
demo是照着B站的视频敲的，对于想学习flutter的新手来说作用还是有的，因为视频课程很零散，所以我边看边写了一个app，里边基本介绍了大部分基础的用法，当然进阶的东西，这部分demo是没有的，最近也在忙，有空了再补一部分进阶的东西吧

现在在做的内容是native+flutter混编，其中坑也不少，有时间会慢慢记录一下

## 目录
![](/contentImages/image/20230321/I8drbyKvzNCjQdnFkIk.png)

## 预览
![home](https://s3.bmp.ovh/imgs/2023/03/20/b4d8d0a22fcdfd1a.png)

![side](https://s3.bmp.ovh/imgs/2023/03/20/a4e70357270289d9.png)

![animation](https://s3.bmp.ovh/imgs/2023/03/20/88359eef4b2eee2f.png)

![search](https://s3.bmp.ovh/imgs/2023/03/20/a1e88c9565dd0831.png)

![alert](https://s3.bmp.ovh/imgs/2023/03/20/5e6fe8f921ad4079.png)

## Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)

For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.

- [搭建开发环境点这里](https://book.flutterchina.club/chapter1/install_flutter.html)

## 包含
- 路由管理
- 基础组件（Text、Image、Icon）
- 布局组件
  - 容器组件Container
  - 线性布局Row、Column
  - 弹性布局Flex
  - 流式布局Wrap
  - 层叠布局Stack、Positioned
  - 对齐与相对定位Align
- 容器类组件
  - 填充Padding
  - 装饰容器DecoratedBox
  - 变换Transform
  - 剪裁Clip
  - 页面骨架Scaffold、AppBar
  - 抽屉菜单Drawer
  - 底部Tab导航
  - 页面body
- 可滚动组件
  - GridView
  - ListView
  - TabBarView
  - CustomScrollView 和 Slivers
- 动画
  - 隐式动画
  - 显式动画
  - 交错动画
  - 动画切换组件（AnimatedSwitcher）

## 使用库

- fluttertoast: ^8.0.9
- cached_network_image: ^3.2.2

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

给flutter初学者的demo全集

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子