flutter 微信语言选择_flutter跨平台聊天实例|flutter仿微信界面

框架技术

编码/技术：Vscode + 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+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,

);

}

}

鉴于flutter基于dart语言，需要安装Dart Sdk / Flutter Sdk，至于如何搭建开发环境，可以去官网查阅文档资料

使用vscode编辑器，可先安装Dart 、Flutter 、Flutter widget snippets等扩展插件

flutter图标及IconData自定义图标

使用系统图标组件： Icon(Icons.search)

使用IconData方式： Icon(IconData(0xe60e, fontFamily:"iconfont"), size:24.0)

使用第二种方式需要先下载阿里图标库字体文件，然后在pubspec.yaml中引入字体

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实现微信未读圆点消息|红点提示

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

);

}

}

GStyle.badge(0, isdot:true) GStyle.badge(13)

GStyle.badge(29, color: Colors.orange, height: 15.0, width: 15.0)

flutter长按弹出菜单|无限制宽高弹窗

通过InkWell组件提供的onTapDown事件获取坐标点实现

// 长按弹窗

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: [

Positioned(

top: isTop ? _globalPositionY : _globalPositionY - 200.0,

left: isLeft ? _globalPositionX : _globalPositionX - 120.0,

width: 120.0,

child: Material(

...

),

)

],

);

}

);

}

flutter如何去掉AlertDialog弹窗宽高限制？

使用盒子组件SizedBox和无限制容器UnconstrainedBox实现；

void _showCardPopup(BuildContext context) {

showDialog(

context: context,

builder: (context) {

return UnconstrainedBox(

constrainedAxis: Axis.vertical,

child: SizedBox(

width: 260,

child: AlertDialog(

content: Container(

...

),

elevation: 0,

contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),

),

),

);

}

);

}

okay，基于flutter实战聊天室项目就分享到这里，希望能喜欢~~

最后附上两个实例项目