flutter3-chat：基于flutter3.x+dart3聊天实例|flutter3仿微信App界面

最新推荐文章于 2024-05-13 09:42:02 发布
置顶 最新推荐文章于 2024-05-13 09:42:02 发布
阅读量1.8k 收藏 23
点赞数 34
分类专栏： flutter3+dart3 flutter/dart实例 文章标签： flutter3-chat flutter3+dart3 flutter3仿微信 flutter聊天app flutter3微信朋友圈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/136051099
版权

flutter3_wchat全新跨平台flutter3.0仿微信app聊天应用。

基于多端跨平台技术flutter3+dart3+materialUI+shared_preferences+easy_refresh全新研发的一款仿微信app应用聊天实战项目。实现发送文字emoj消息+gif动图、长按仿微信发送语音、图片预览、红包及朋友圈等功能。

在这里插入图片描述

使用技术

编码工具：vscode
技术框架：flutter3.16.5+dart3.2.3
UI组件库：material-design3
弹窗组件：showDialog/SimpleDialog/showModalBottomSheet/AlertDialog
图片预览：photo_view^0.14.0
缓存组件：shared_preferences^2.2.2
下拉组件：easy_refresh^3.3.4
toast提示框：toast^0.3.0
网址预览组件：url_launcher^6.2.4

在这里插入图片描述
在这里插入图片描述
flutter3开发的应用支持运行到 android/ios/macos/linux/windows/web 等多个平台。

在这里插入图片描述

项目结构

通过flutter create xxx命令创建项目，目录结构如下图：

在这里插入图片描述
导航栏采用全屏沉浸式，支持透明背景图。

在这里插入图片描述
在项目开发初期，大家需要自行配置flutter/dart开发环境SDK。
https://flutter.dev/
https://flutter.cn/
https://pub.flutter-io.cn/
https://www.dartcn.com/

如果使用vscode开发项目，可自行按住flutter/dart扩展。

在这里插入图片描述
通过flutter doctor来检查所需环境是否缺失。一切准备就绪接 下来就是愉快的开发了。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
既然看到了这里，是不是感觉还不错~~😁

开发初期是在windows调试比较方便，也可以运行到web上。后期可以直接打包apk运行到手机上。
运行到桌面默认是1280大小，大家可以修改windows/runner/main.cpp文件里面窗口尺寸，适应手机端。

在这里插入图片描述

如果大家习惯在模拟器上面运行调试项目，下面列出了一些常见的模拟器及端口连接。

在这里插入图片描述
通过adb connect连接上模拟器之后，flutter devices查看当前连接设备，执行flutter run命令即可运行项目到指定的模拟器。

入口main.dart

/// flutter入口文件

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:toast/toast.dart';

// 引入公共样式
import 'styles/index.dart';

// 引入底部tabbar
import 'components/tabbar.dart';

// 引入路由管理
import 'router/index.dart';

// 错误模块
import '../views/error/index.dart';

void main() {
	runApp(const MyApp());
}

DateTime? lastPopTime;

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

  // 退出app提示
  Future<bool> appOnPopInvoked(didPop) async {
    if(lastPopTime == null || DateTime.now().difference(lastPopTime!) > const Duration(seconds: 2)) {
      lastPopTime = DateTime.now();
      Toast.show('再按一次退出应用');
      return false;
    }
    SystemNavigator.pop();
    return true;
  }
  
	@override
	Widget build(BuildContext context){
    ToastContext().init(context);

		return MaterialApp(
			title: 'Flutter Chat',
			debugShowCheckedModeBanner: false,
			theme: ThemeData(
				primaryColor: FStyle.primaryColor,
				useMaterial3: true,
        // windows桌面端字体粗细不一样
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
			),
			// home: const FTabBar(),
      home: PopScope(
        // canPop: false,
        onPopInvoked: appOnPopInvoked,
        child: const FTabBar(),
      ),
      // 初始路由
      // initialRoute: '/',
      // 自定义路由
			onGenerateRoute: onGenerateRoute,
      // 错误路由
      onUnknownRoute: (settings) {
        return MaterialPageRoute(builder: (context) => const Error());
      },
		);
	}
}

Flutter3圆角/渐变背景色

在这里插入图片描述
如上图：flutter实现文本框圆角及按钮圆角渐变色。

Container(
  height: 40.0,
  margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xffdddddd)),
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: Row(
    children: [
      Expanded(
        child: TextField(
          keyboardType: TextInputType.phone,
          controller: fieldController,
          decoration: InputDecoration(
            hintText: '输入手机号',
            suffixIcon: Visibility(
              visible: authObj['tel'].isNotEmpty,
              child: InkWell(
                hoverColor: Colors.transparent,
                highlightColor: Colors.transparent,
                splashColor: Colors.transparent,
                onTap: handleClear,
                child: const Icon(Icons.clear, size: 16.0,),
              )
            ),
            contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 12.0),
            border: const OutlineInputBorder(borderSide: BorderSide.none),
          ),
          onChanged: (value) {
            setState(() {
              authObj['tel'] = value;
            });
          },
        ),
      )
    ],
  ),
),

通过Container组件gradient实现渐变色。

Container(
  margin: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 30.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    // 自定义按钮渐变色
    gradient: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xFF0091EA), Color(0xFF07C160)
      ],
    )
  ),
  child: SizedBox(
    width: double.infinity,
    height: 45.0,
    child: FilledButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.transparent),
        shadowColor: MaterialStateProperty.all(Colors.transparent),
        shape: MaterialStatePropertyAll(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0))
        )
      ),
      onPressed: handleSubmit,
      child: const Text('登录', style: TextStyle(fontSize: 18.0),),
    ),
  )
),

flutter3登录验证60s倒计时

在这里插入图片描述

Timer? timer;
String vcodeText = '获取验证码';
bool disabled = false;
int time = 60;

// 60s倒计时
void handleVcode() {
  if(authObj['tel'] == '') {
    snackbar('手机号不能为空');
  }else if(!Utils.checkTel(authObj['tel'])) {
    snackbar('手机号格式不正确');
  }else {
    setState(() {
      disabled = true;
    });
    startTimer();
  }
}
startTimer() {
  timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    setState(() {
      if(time > 0) {
        vcodeText = '获取验证码(${time--})';
      }else {
        vcodeText = '获取验证码';
        time = 60;
        disabled = false;
        timer.cancel();
      }
    });
  });
  snackbar('短信验证码已发送，请注意查收', color: Colors.green);
}

Flutter3全屏沉浸导航状态栏渐变

在这里插入图片描述
由于AppBar提供的background属性不能设置渐变颜色，但是可以使用flexibleSpace属性 配合Container组件gradient实现导航栏渐变背景色。

AppBar(
  title: Text('Flutter3-Chat'),
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0xFF0091EA), Color(0xFF07C160)
        ],
      )
    ),
  )
),

flutter自定义badge红点/iconfont图标

在这里插入图片描述

FStyle.badge(23)
FStyle.badge(2, color: Colors.pink, height: 10.0, width: 10.0)
FStyle.badge(0, isdot: true)

自定义图标使用的阿里iconfont图表库。
在这里插入图片描述
在pubspec.yaml中引入字体文件。
在这里插入图片描述

class FStyle {
  // 自定义iconfont图标
  static iconfont(int codePoint, {double size = 16.0, Color? color}) {
    return Icon(
      IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true),
      size: size,
      color: color,
    );
  }

  // 自定义Badge红点
  static badge(int count, {
    Color color = Colors.redAccent,
    bool isdot = false,
    double height = 18.0,
    double width = 18.0
  }) {
    final num = count > 99 ? '99+' : count;
    return Container(
      alignment: Alignment.center,
      height: isdot ? height / 2 : height,
      width: isdot ? width / 2 : width,
      decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(100.00)),
      child: isdot ? null : Text('$num', style: const TextStyle(color: Colors.white, fontSize: 12.0)),
    );
  }
}

Flutter3仿微信快捷下拉菜单

在这里插入图片描述
通过flutter提供的PopupMenuButton组件实现功能。

PopupMenuButton(
  icon: FStyle.iconfont(0xe62d, size: 17.0),
  offset: const Offset(0, 50.0),
  tooltip: '',
  color: const Color(0xFF353535),
  itemBuilder: (BuildContext context) {
    return <PopupMenuItem>[
      popupMenuItem(0xe666, '发起群聊', 0),
      popupMenuItem(0xe75c, '添加朋友', 1),
      popupMenuItem(0xe603, '扫一扫', 2),
      popupMenuItem(0xe6ab, '收付款', 3),
    ];
  },
  onSelected: (value) {
    switch(value) {
      case 0:
        print('发起群聊');
        break;
      case 1:
        Navigator.pushNamed(context, '/addfriends');
        break;
      case 2:
        print('扫一扫');
        break;
      case 3:
        print('收付款');
        break;
    }
  },
)

// 下拉菜单项
static popupMenuItem(int codePoint, String title, value) {
  return PopupMenuItem(
    value: value,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        const SizedBox(width: 10.0,),
        FStyle.iconfont(codePoint, size: 21.0, color: Colors.white),
        const SizedBox(width: 10.0,),
        Text(title, style: const TextStyle(fontSize: 16.0, color: Colors.white),),
      ],
    ),
  );
}

flutter弹窗展示

项目中使用到了flutter各种弹窗应用场景。
在这里插入图片描述

// 关于弹窗
void aboutAlertDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return UnconstrainedBox(
        constrainedAxis: Axis.vertical,
        child: SizedBox(
          width: 320.0,
          child: AlertDialog(
            contentPadding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
            backgroundColor: Colors.white,
            surfaceTintColor: Colors.white,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
            content: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset('assets/images/logo.png', width: 90.0, height: 90.0, fit: BoxFit.cover,),
                  const SizedBox(height: 10.0),
                  const Text('Flutter3-WChat', style: TextStyle(color: Color(0xFF0091EA), fontSize: 22.0),),
                  const SizedBox(height: 5.0),
                  const Text('基于flutter3+dart3开发跨平台仿微信App聊天实例。', style: TextStyle(color: Colors.black45),),
                  const SizedBox(height: 20.0),
                  Text('©2024/01 Andy   Q: 282310962', style: TextStyle(color: Colors.grey[400], fontSize: 12.0),),
                ],
              ),
            ),
          ),
        ),
      );
    }
  );
}

// 二维码名片弹窗
void qrcodeAlertDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return UnconstrainedBox(
        constrainedAxis: Axis.vertical,
        child: SizedBox(
          width: 320.0,
          child: AlertDialog(
            contentPadding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
            backgroundColor: const Color(0xFF07C160),
            surfaceTintColor: const Color(0xFF07C160),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0)),
            content: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset('assets/images/qrcode.png', width: 250.0, fit: BoxFit.cover,),
                  const SizedBox(height: 15.0),
                  const Text('扫一扫，加我公众号', style: TextStyle(color: Colors.white60, fontSize: 14.0,),),
                ],
              ),
            ),
          ),
        ),
      );
    }
  );
}

// 退出登录弹窗
void logoutAlertDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: const Text('确定要退出登录吗？', style: TextStyle(fontSize: 16.0),),
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
        elevation: 2.0,
        actionsPadding: const EdgeInsets.all(15.0),
        actions: [
          TextButton(
            onPressed: () {Navigator.of(context).pop();},
            child: const Text('取消', style: TextStyle(color: Colors.black54),)
          ),
          TextButton(
            onPressed: handleLogout,
            child: const Text('退出登录', style: TextStyle(color: Colors.red),)
          ),
        ],
      );
    }
  );
}

Flutter3实现微信群聊九宫格图像组

在这里插入图片描述
支持1-9张图片不同的排列组合。

const size = 44.0; // 默认一张图片尺寸
const padding = 2.0;
const margin = 2.0;

int row = 0; // 图片行数
int col = 0; // 图片列数

class GroupAvatar extends StatelessWidget {
  const GroupAvatar({
    super.key,
    this.avatars,
  });

  final List<String>? avatars;

  // 创建图片
  createImage(String avatar, double width) {
    return Image.asset(
      avatar,
      height: width,
      width: width,
      fit: BoxFit.fill,
    );
  }

  // 顶部一张图片
  avatarOne(List<Widget> stacks, Widget child, int count, i, imgWidth, left, top) {
    // ...
  }

  // 顶部两张图片
  avatarTwo(List<Widget> stacks, Widget child, int count, i, imgWidth, left, top) {
    // ...
  }

  // 其它情况
  avatarOther(List<Widget> stacks, Widget child, int count, i, imgWidth, left, top, colMax) {
    // ...
  }

  @override
  Widget build(BuildContext context){
    var count = avatars?.length;
    int colMax;
    List<Widget> icons = [];
    List<Widget> stacks = [];
    double imgWidth;

    if(count! == 1) {
      return SizedBox(
        width: size,
        height: size,
        child: createImage(avatars![0], size),
      );
    }

    if(count >= 5) {
      colMax = 3;
      imgWidth = (size - (padding * colMax) - margin) / colMax;
    }else {
      colMax = 2;
      imgWidth = (size - (padding * colMax) - margin) / colMax;
    }

    for(var i = 0; i < count; i++) {
      icons.add(createImage(avatars![i], imgWidth));
    }

    row = 0;
    col = 0;
    var centerTop = 0.0;
    if(count == 2 || count == 5 || count == 6) {
      centerTop = (imgWidth + margin) / 2;
    }

    for(var i = 0; i < count; i++) {
      var left = imgWidth * row + padding * (row + 1);
      var top = imgWidth * col + padding *  col + centerTop;
      switch(count) {
        case 3:
        case 7:
          avatarOne(stacks, icons[i], count, i, imgWidth, left, top);
          break;
        case 5:
        case 8:
          avatarTwo(stacks, icons[i], count, i, imgWidth, left, top);
          break;
        default:
          avatarOther(stacks, icons[i], count, i, imgWidth, left, top, colMax);
          break;
      }
    }

    return Container(
      width: size,
      height: size,
      color: const Color(0xFFEEEEEE),
      padding: const EdgeInsets.only(top: padding),
      child: Stack(
        children: stacks,
      ),
    );
  }
}

flutter聊天功能模块

在这里插入图片描述

// 输入框
Offstage(
  offstage: voiceBtnEnable,
  child: TextField(
    decoration: const InputDecoration(
      isDense: true,
      hoverColor: Colors.transparent,
      contentPadding: EdgeInsets.all(8.0),
      border: OutlineInputBorder(borderSide: BorderSide.none),
    ),
    style: const TextStyle(fontSize: 16.0,),
    maxLines: null,
    controller: editorController,
    focusNode: editorFocusNode,
    cursorColor: const Color(0xFF07C160),
    onChanged: (value) {},
  ),
),

文本框支持文字/emoj输入，多行文本输入。输入链接，消息自动转换为网址通过浏览器打开。

在这里插入图片描述
仿微信按住说话语音面板模块。

// 语音
Offstage(
  offstage: !voiceBtnEnable,
  child: GestureDetector(
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
      ),
      alignment: Alignment.center,
      height: 40.0,
      width: double.infinity,
      child: Text(voiceTypeMap[voiceType], style: const TextStyle(fontSize: 15.0),),
    ),
    onPanStart: (details) {
      setState(() {
        voiceType = 1;
        voicePanelEnable = true;
      });
    },
    onPanUpdate: (details) {
      Offset pos = details.globalPosition;
      double swipeY = MediaQuery.of(context).size.height - 120;
      double swipeX = MediaQuery.of(context).size.width / 2 + 50;
      setState(() {
        if(pos.dy >= swipeY) {
          voiceType = 1; // 松开发送
        }else if (pos.dy < swipeY && pos.dx < swipeX) {
          voiceType = 2; // 左滑松开取消
        }else if (pos.dy < swipeY && pos.dx >= swipeX) {
          voiceType = 3; // 右滑语音转文字
        }
      });
    },
    onPanEnd: (details) {
      // print('停止录音');
      setState(() {
        switch(voiceType) {
          case 1:
            Toast.show('发送录音文件', duration: 1, gravity: 1);
            voicePanelEnable = false;
            break;
          case 2:
            Toast.show('取消发送', duration: 1, gravity: 1);
            voicePanelEnable = false;
            break;
          case 3:
            Toast.show('语音转文字', duration: 1, gravity: 1);
            voicePanelEnable = true;
            voiceToTransfer = true;
            break;
        }
        voiceType = 0;
      });
    },
  ),
),

在这里插入图片描述
flutter3绘制箭头，flutter提供了自定义绘图画板能力。

// 绘制气泡箭头
class ArrowShape extends CustomPainter {
  ArrowShape({
    required this.arrowColor,
    this.arrowSize = 7,
  });

  final Color arrowColor; // 箭头颜色
  final double arrowSize; // 箭头大小

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = arrowColor;

    var path = Path();
    path.lineTo(-arrowSize, 0);
    path.lineTo(0, arrowSize);
    path.lineTo(arrowSize, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

OK，综上就是flutter3/dart3开发跨平台聊天应用的一些知识分享。

最后附上两个最近的实例项目

在这里插入图片描述

xiaoyan_2018
关注
  • 34
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
使用Flutter构建ChatGPT客户端：快速入门指南
前端达人
03-20 5139
开篇在本篇博客文章中，我们将通过OpenAI的API构建一个简单的对话界面，与ChatGPT进行聊天。近来OpenAI和ChatGPT的热度很高，尤其是最近发布的GPT-4。这类工具的大量使用案例已经涌现出来，但目前人们最常用ChatGPT的方式是通过chat.openai.com进行聊天。我一直在使用ChatGPT来激发灵感、编写一些Flutter代码片段，甚至是撰写这篇博客文章的大纲！当然，它...
flutter开发的即时聊天应用
weixin_61071294的博客
03-04 3953
Flutter是近两年非常火的跨端的前端框架，选择用Flutter开发聊天应用，我们思考了很久，团队从Flutter 1.0 开始接触，用Flutter开发了几个小型的应用，跳了不少坑，特别是与H5应用混合开发的时候那酸爽，只有弄过的人才知道，好在团队小伙伴都趟出来了。后来Flutter更新到2.0，各种兼容性好很多，同时支持编译成WEB及Windows应用，我们也试着在各平台完成了一些DEMO，效果都还不错，所以嘿嘿！ 下面列出主要用到的第三方插件 sqflite: ^2.0.2 flutter_w
flutter开发的app案例，，掌握了这些Android高级工程师必备知识,
2401_83641314的博客
03-20 734
应用层：负责处理特定的应用程序细节 HTTP、FTP、DNS传输层：为两台主机提供端到端的基础通信 TCP、UDP网络层：控制分组传输、路由选择等 IP链路层：操作系统设备驱动程序、网卡相关接口TCP 连接；可靠；有序；面向字节流；速度慢；较重量；全双工；适用于文件传输、浏览器等UDP 无连接；不可靠；无序；面向报文；速度快；轻量；适用于即时通讯、视频通话等A：你能听到吗？ B：我能听到，你能听到吗？ A：我能听到，开始吧A 和 B 两方都要能确保：我说的话，你能听到；你说的话，我能听到。所以需要三次握手A
|flutter仿微信界面聊天室
大灰狼的小绵羊哥哥的博客
05-14 3128
1、项目介绍 Flutter是目前比较流行的跨平台开发技术，凭借其出色的性能获得很多前端技术爱好者的关注，比如阿里闲鱼，美团，腾讯等大公司都有投入相关案例生产使用。 flutter_chatroom项目是基于Flutter+Dart+chewie+photo_view+image_picker等技术开发的跨平台仿微信app聊天界面应用，实现了消息/表情发送、图片预览、长按菜单、红包/小视频/朋友圈等功能。 2、技术框架 使用技术：Flutter 1.12.13/Dart 2....
推荐项目：Flutter与Firebase构建的聊天应用示例 — Chat Demo
最新发布
gitblog_00016的博客
05-13 300
推荐项目：Flutter与Firebase构建的聊天应用示例 — Chat Demo 项目地址:https://gitcode.com/duytq94/flutter-chat-demo 项目介绍 Chat Demo 是一个由 Flutter 框架和 Firebase 后端服务构建的实时聊天应用程序。该项目不仅提供了完整的登录功能，支持通过 Google 账户登录，还具备了发送文本、图片以及表情贴...
Flutter实战一Flutter聊天应用（十）
咖啡花园
06-20 4705
首先，我们要修复一下之前几篇文章中存在的缺陷。在发送超过两行的消息时，屏幕上显示的消息不会自动换行，会超出最大宽度。我们可以通过将Text包装在Container控件中，再添加一个width属性，使其获得一个不超出屏幕大小的宽度。class ChatMessage extends StatelessWidget { //... @override Widget build(BuildCo
flutter 实战项目 仿微信
baidu_40537062的博客
04-15 1111
下面的专题讲得不错，github上的项目代码，本人亲测是可以跑通的 flutter 微信项目专题 wechat_demo - github
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
分享课程——基于Flutter 3.x 实战跨平台仿抖音App混合开发，完整版视频课程下载。 Flutter 3已发布，跨平台支持性更好。本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的...
flutter-notes-app:基于Fluttter的笔记应用程序，支持照片笔记！
05-26
它是使用Dart在Google Flutter Framework之上构建的。 Tizeno可以帮助您创建快速笔记，照片笔记等。 可以更改便笺的颜色，将其标记为已加星标或已存档，创建照片便笺并将其保存在本地，并将所有内容存储在SQLite...
stream-chat-dart:Dart SDK-使用GetStream.io建立聊天
05-09
:house: 程序包stream_chat已移至 ，其中包含与Flutter SDK for Stream相关的所有程序包。 请查看以了解更多有关我们如何迈出一步来帮助开发人员在尽可能短的时间内构建出色的应用程序的更多信息。
Inshorts-Clone-The-News-App:使用flutter和newsapi.org API简化新闻应用程序克隆
04-05
| |-- global.dart final String apikey = "YOUR_KEY" ; 特征 暗模式 多国语言支持[英文，हिंदी，मराठी，ಕನ್ನಡ] 将新闻卡作为图像共享 离线阅读 共享新闻卡上的水印 网页浏览 屏幕截图 发现 喂养 ...
使用DartAngel和Flutter构建实时聊天应用程序
08-10
使用Dart - Angel 和 Flutter 构建实时聊天应用程序
flutter-websocket-lan-chat：:speech_balloon:适用于Android和IOS的Flutter LAN-chat应用程序，它使用Dart中的Websocket〜Flutter.dev项目
02-04
Flutter WebSocket局域网聊天 :speech_balloon: 使用此Flutter应用程序在局域网上聊天。结构体该存储库包含2个主要项目： 位于websocket文件夹下的websocket项目。 Flutter项目实际上是除websocket文件夹以外的所有...
探索Flutter Chat: 构建高效、美观的聊天应用
gitblog_00010的博客
04-24 490
探索Flutter Chat: 构建高效、美观的聊天应用 项目地址:https://gitcode.com/shichunlei/flutter_chat 在移动开发领域，寻找一款能够帮助开发者快速构建高质量应用的框架是至关重要的。Flutter Chat 是一个开放源码的项目，它利用Google的 Flutter 框架，为开发者提供了一个快速创建功能齐全的聊天应用程序的基础模板。 项目简介 Fl...
基于Flutter3+bitsdojo_window+Getx桌面端仿微信EXE
码农ICoding
03-02 1233
flutter3-dart3-winchat基于flutter3+dart3+getx+bitsdojo_window+file_picker+media_kit等技术开发桌面端仿微信聊天exe实战项目。实现了聊天消息、通讯录、收藏、朋友圈、短视频、我的等页面模块。
我用Flutter开发了一个类似微信可运行小程序的App
POHOU23的博客
07-21 2608
Flutter的前端动画设计如此之优秀，在国内小程序是非常重要的技术平台，是否正如“术业有专攻”将Flutter框架应用到小程序端？然后通过能够让小程序运行在App的运行时技术方案（如FinClip）等，组合成「小程序+App」的Hybird开发方案？...
flutter+dart聊天室|flutter仿微信界面聊天App实例
码农ICoding
05-13 6315
基于Flutter+Dart+photo_view+image_picker+video_player等技术开发跨平台实战仿微信聊天应用。实现消息发送/表情gif、图片预览、红包/视频号/朋友圈等功能。 运用技术 技术框架：Flutter 1.12.13/Dart 2.7.0 视频组件：chewie: ^0.9.7 图片/拍照：image_picker: ^0.6.6+1 图片预览组件：photo_view: ^0.9.2 本地存储：shared_preferences: ^0.5.7..
Flutter实战一Flutter聊天应用（六）
热门推荐
咖啡花园
06-09 1万+
我们将使用Google登录来验证应用程序的用户。Google登录功能可让用户使用其Google帐户（与Gmail、Play、照片和其他Google服务所使用的帐户相同的帐户）进行安全登录。我们还可以根据与用户的Google帐户相关联的个人资料和身份信息，个性化用户体验。用户登录后，我们可以使用个人资料照片个性化聊天消息头像。要添加对Google登录的支持，我们将使用google_sign_in插件，
Flutter 3 发布了(文末推荐一个免费的在线Flutter学习教程)
Dotnet9的专栏
05-13 1042
翻译自 Tim Sneath 2022年5月12日的文章 《Introducing Flutter 3》 作者 ： Tim Sneath 翻译 ： 沙漠尽头的狼(谷歌翻译加持) 链接 ： Introducing Flutter 3(英文原文) 我们在手机、桌面和网站开发上进行多平台UI开发的历程达到了顶峰。 我们很高兴地宣布，作为Google I/O主题演讲的一部分推出Flutter 3。Flutter 3完成了我们从以移动为中心到多平台框架的路线图，提供了对macOS和Linux桌面应用的支持，.
基于 flutter 3.x 仿抖音跨平台混合开发
07-28
基于 Flutter 3.x 进行仿抖音跨平台混合开发，是一种使用最新版本的Flutter框架来开发类似抖音的应用程序的方法。 Flutter是一种跨平台的开发框架，可以让开发者使用同一套代码同时在iOS和Android平台上构建高性能的应用程序。它提供了丰富的UI组件和工具，使开发过程更加简单和高效。 要实现仿抖音的跨平台混合开发，首先需要对抖音的功能和界面进行分析和设计。然后，使用Flutter框架来实现这些功能和界面。 Flutter提供了丰富的UI组件，如按钮、文本、图片、视频播放等，可以用于构建抖音的各种界面元素。开发者可以使用Dart语言来编写业务逻辑，同时可以使用Flutter提供的hot reload功能实时预览和调试应用程序。 为了实现跨平台开发，开发者可以使用Flutter的多平台支持。Flutter可以生成原生的iOS和Android应用程序，以及Web和桌面应用程序。这使得开发者可以在不同的平台上发布和部署仿抖音的应用程序。 在开发过程中，开发者可以使用Flutter的插件来集成各种第三方功能和服务，如视频播放、数据存储、社交分享等。这些插件可以帮助开发者更加方便地实现仿抖音的各种功能。 总之，基于Flutter 3.x进行仿抖音跨平台混合开发，是一种高效、灵活的开发方法。通过使用Flutter框架和相关工具，开发者可以快速构建出功能完善、界面精美的仿抖音应用程序，并在多个平台上进行发布和部署。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值