flutter图片聊天泡泡_flutter仿微信app聊天|flutter聊天界面实例

鉴于最近Flutter跨平台技术比较火，作为前端开发有必要去学习下，今天给大家分享的是基于flutter+dart+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字体图标库

二、flutter主入口页面main.dart

/**

* @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,

);

}

}复制代码