Flutter仿微信开源项目,持续更新中
- Flutter仿微信项目,已开源🚀🚀🚀
- 说明
- 效果预览
- 开发进度说明
- 未来计划
- 项目结构说明
- 组件封装示例
- 最后
- 持续更新中...
Flutter仿微信项目,已开源🚀🚀🚀
重磅开源!持续更新中…
开源地址:https://gitee.com/ruirui-study/flutter_weixin_dart35
项目环境
- flutter 3.24.3
- dart 3.5
说明
本项目是纯flutter
仿微信项目,主要是还原了微信的界面,暂时没加入具体的功能,主要是为了帮助大家学习与熟悉Flutter组件库、插件、dart等语法的使用。
看完本项目,你将学到如下内容:
- 熟悉Flutter常用组件库,如按钮,输入框,文本、布局、定位、图片、图标等的使用
- 了解Flutter组件的封装、抽离、组合等,类似与Vue
- 了解组件之间的传值、全局传值、事件等
- 了解组件的生命周期
- 学习使用第三方库;
- 打包、配置、发布项目等。
效果预览
开发进度说明
- 项目初始化
- 配置路由、主题
- 封装权限管理
- 封装公共页、toast、dialog等组件
- 四个tab页
- 聊天页、信息页
- 朋友圈页、拍照、选择图片
- 我的页、钱包页、个人信息页、服务页
- 各种具体的聊天页
- 发布朋友圈页
- 聊天列表各种状态的完善
- 搜索页
- 扫一扫等功能
- 全局状态管理
- 登录页、注册页,退出等功能
未来计划
- 完善主要的各个页码
- 全局状态管理优化
- 完善项目文档
- 加入有后台请求的版本
项目结构说明
组件封装示例
封装公共组件common_page.dart
,具体参数见代码注释
import 'package:flutter/material.dart';
import '/utils/setting.dart';
// 公共页面组件
class CommonPage extends StatelessWidget {
final String? title; // 可选的 页面标题
final Widget child; // 页面组件
final List<Widget>? actions; // 可选的操作按钮列表
final Color? appBarBgColor; // 可选的 appBar 背景色
final bool? isShowLine; // 是否显示底部的细线
const CommonPage({
super.key,
this.title,
required this.child,
this.actions,
this.appBarBgColor,
this.isShowLine
});
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: DefaultColor.primary,
appBar: AppBar(
title: title == null ? null : Text(title!, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500)) ,
centerTitle: true,
backgroundColor: appBarBgColor ?? DefaultColor.primary,
actions: actions ?? const [],
// leading: IconButton(
// icon: const Icon(Icons.arrow_back_ios), // 这里设置你的自定义图标
// onPressed: () => Navigator.of(context).pop(),
// ),
bottom: (isShowLine != null && isShowLine! ) ? PreferredSize(
preferredSize: const Size.fromHeight(1.0),
child: Container(
color: const Color(0xE3DEDEFF),
height: 1.0,
),
) : null,
),
body: Container(
color: DefaultColor.primary,
child: child,
),
);
}
}
其他页面直接引入并使用
import 'package:flutter/material.dart';
import '/components/page/common.dart';
class ContactPage extends StatelessWidget {
const ContactPage({super.key});
Widget build(BuildContext context) {
return CommonPage(
title: '通讯录',
actions: [const SearchAction(), popupMenuWidget()],
child: Container(
color: Colors.white,
child: const ContactWidget(),
),
);
}
}
类似地,还封装了dialog
组件,示例代码如下
import 'package:flutter/material.dart';
// 封装确定弹框
Future<bool?> customShowDialog(BuildContext context, {
String? title = '',
required String tipText,
String? confirmText = '确定',
String? cancelText = '取消',
}) {
return showDialog<bool>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: title == '' || title == null ? null : Text(title),
content: Text(tipText),
actions: <Widget>[
TextButton(
style: TextButton.styleFrom(
textStyle: Theme.of(context).textTheme.labelLarge,
),
child: Text(cancelText!),
onPressed: () {
Navigator.pop(context, false);
},
),
TextButton(
style: TextButton.styleFrom(
textStyle: Theme.of(context).textTheme.labelLarge,
),
child: Text(confirmText!),
onPressed: () {
Navigator.pop(context, true);
},
),
],
);
},
);
}
最后
想学习好flutter
,需要投入一定的精力,因为这毕竟算是一门新语言,嵌套虽然多,但是都是可以拆解的。
本人也是前端开发,个人感觉Flutter
和Vue
有相似的地方,给大家推荐几个学习网站
- Flutter官网:https://flutter.cn/
- dart官网:https://dart.cn/
- flutter电子书:https://book.flutterchina.club/
- flutter图标网:https://fluttericon.cn/
- flutter插件库(类似于npn):https://pub-web.flutter-io.cn/