flutter+dart聊天實例|flutter仿微信App聊天界面

3
回復
546
查看
打印 上一主題 下一主題
[復制鏈接]

25

主題

30

帖子

328

安幣

攻城獅

Rank: 3Rank: 3

樓主
發表于 2020-5-14 18:17:24 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
本帖最后由 xiaoyan2015 于 2020-5-14 18:19 編輯

flutter是google在開發者大會上發布的跨平臺應用開發框架,有谷歌強大的技術支撐,收到很多開發者的追捧。作為前端開發也需要學習了解一下。
今天給大家分享的是基于Flutter+Dart+chewie+image_picker+photo_view等技術開發的仿微信界面聊天室,實現了消息+表情、圖片查看、長按菜單、視頻/紅包/朋友圈等功能。



技術框架
編碼/技術:Vscode + Flutter 1.12.13/Dart 2.7.0視頻組件:chewie: ^0.9.7
圖片/拍照:image_picker: ^0.6.6+1
圖片預覽組件:photo_view: ^0.9.2
彈窗組件:SimpleDialog/AlertDialog/SnackBar(flutter封裝自定義)
本地存儲:shared_preferences: ^0.5.7+1
字體圖標:阿里iconfont字體圖標庫

[JavaScript] 查看源文件 復制代碼
/**
 * @tpl Flutter入口頁面 | Q:282310962
 */

import 'package:flutter/material.dart';

// 引入公共樣式
import 'styles/common.dart';

// 引入底部Tabbar頁面導航
import 'components/tabbar.dart';

// 引入地址路由
import 'router/routes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: GStyle.appbarColor,
      ),
      home: TabBarPage(),
      onGenerateRoute: onGenerateRoute,
    );
  }
}













flutter自定義圖標組件
自定義圖標,如使用阿里圖標iconfont如何實現,這時就需要用到IconData來實現自定義圖標了。Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)
使用IconData需要先下載阿里圖標庫字體文件,然后在pubspec.yaml中引入字體


[JavaScript] 查看源文件 復制代碼
class GStyle {
    // __ 自定義圖標
    static iconfont(int codePoint, {double size = 16.0, Color color}) {
        return Icon(
            IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true),
            size: size,
            color: color,
        );
    }
}


flutter實現未讀消息圓點提醒
在app中,類似如下紅點提醒很常見,平時微信中就有見到,可以flutter沒有提供這種組件,只能自定義實現了。

[JavaScript] 查看源文件 復制代碼
class GStyle {
    // 消息紅點
    static badge(int count, {Color color = Colors.red, bool isdot = false, double height = 18.0, double width = 18.0}) {
        final _num = count > 99 ? '···' : count;
        return Container(
            alignment: Alignment.center, height: !isdot ? height : height/2, width: !isdot ? width : width/2,
            decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(100.0)),
            child: !isdot ? Text('$_num', style: TextStyle(color: Colors.white, fontSize: 12.0)) : null
        );
    }
}


flutter實現長按彈窗菜單
在flutter中實現類似微信長按彈出 復制/置頂聊天/刪除

[JavaScript] 查看源文件 復制代碼
InkWell(
    splashColor: Colors.grey[200],
    child: Container(...),
    onTapDown: (TapDownDetails details) {
        _globalPositionX = details.globalPosition.dx;
        _globalPositionY = details.globalPosition.dy;
    },
    onLongPress: () {
        _showPopupMenu(context);
    },
),


[JavaScript] 查看源文件 復制代碼
// 長按彈窗
double _globalPositionX = 0.0; //長按位置的橫坐標
double _globalPositionY = 0.0; //長按位置的縱坐標
void _showPopupMenu(BuildContext context) {
    // 確定點擊位置在左側還是右側
    bool isLeft = _globalPositionX > MediaQuery.of(context).size.width/2 ? false : true;
    // 確定點擊位置在上半屏幕還是下半屏幕
    bool isTop = _globalPositionY > MediaQuery.of(context).size.height/2 ? false : true;

    showDialog(
      context: context,
      builder: (context) {
        return Stack(
          children: <Widget>[
            Positioned(
              top: isTop ? _globalPositionY : _globalPositionY - 200.0,
              left: isLeft ? _globalPositionX : _globalPositionX - 120.0,
              width: 120.0,
              child: Material(
                ...
              ),
            )
          ],
        );
      }
    );
}


Okay,基于Flutter/Dart開發仿微信界面應用app聊天實例就介紹到這里,后續會繼續分享更多實例項目,希望大家能喜歡!



分享到:  QQ好友和群 QQ空間 微信
收藏
收藏0
支持
支持0
反對
反對0

2

主題

440

帖子

7578

安幣

碼皇(巴士元老)

Rank: 8Rank: 8

沙發
發表于 2020-6-1 09:02:59 | 只看該作者
我只是路過打醬油的。

2

主題

440

帖子

7578

安幣

碼皇(巴士元老)

Rank: 8Rank: 8

板凳
發表于 2020-6-1 09:03:22 | 只看該作者
在哪里下載示例呢?

3

主題

663

帖子

5001

安幣

碼皇(巴士元老)

Rank: 8Rank: 8

QQ達人

地板
發表于 2020-6-1 11:03:44 | 只看該作者
...
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

在柳州学什么小吃赚钱 美女与野兽捕鱼游戏 股票在线行情查询 云南时时彩开奖记录 东方6十1开奖结果查询七乐彩 网盛棋牌app 多乐彩11选开奖结果 香港一发千万二尾主四码 华东联销15选5开奖 捕龙达人内购破解版下载 天天贵阳麻将官方网站