Flutter仿微信，高度还原，开源

news2024/11/22 11:44:40

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
  });

  @override
  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});

  @override
  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);
            },
          ),
        ],
      );
    },
  );
}