cwtch.im
/
cwtch-ui
10
11
Fork 17
Code Issues 89 Pull Requests 1 Projects 2 Releases 28 Wiki Activity

File Bubble Design

This commit is contained in:
Sarah Jamie Lewis 2021-12-14 15:37:27 -08:00
parent 63fc1fe772
commit 8be0fa3957
1 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
lib/widgets/filebubble.dart
View File

@ -2,6 +2,7 @@ import 'dart:io';
import 'package:cwtch/config.dart'; import 'package:cwtch/config.dart';
import 'package:cwtch/models/message.dart'; import 'package:cwtch/models/message.dart';
import 'package:cwtch/widgets/malformedbubble.dart';
import 'package:file_picker_desktop/file_picker_desktop.dart'; import 'package:file_picker_desktop/file_picker_desktop.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -59,7 +60,7 @@ class FileBubbleState extends State<FileBubble> {
senderDisplayStr = Provider.of<MessageMetadata>(context).senderHandle; senderDisplayStr = Provider.of<MessageMetadata>(context).senderHandle;
} }
} }
return LayoutBuilder(builder: (context, constraints) {
var wdgSender = Center( var wdgSender = Center(
widthFactor: 1, widthFactor: 1,
child: SelectableText(senderDisplayStr + '\u202F', child: SelectableText(senderDisplayStr + '\u202F',
@ -83,11 +84,29 @@ class FileBubbleState extends State<FileBubble> {
var lpath = path.toLowerCase(); var lpath = path.toLowerCase();
if (lpath.endsWith("jpg") || lpath.endsWith("jpeg") || lpath.endsWith("png") || lpath.endsWith("gif") || lpath.endsWith("webp") || lpath.endsWith("bmp")) { if (lpath.endsWith("jpg") || lpath.endsWith("jpeg") || lpath.endsWith("png") || lpath.endsWith("gif") || lpath.endsWith("webp") || lpath.endsWith("bmp")) {
if (myFile == null) { if (myFile == null) {
setState(() { myFile = new File(path); }); setState(() {
myFile = new File(path);
});
} }
isPreview = true; isPreview = true;
wdgDecorations = GestureDetector(child: Image.file(myFile!, width: 200), onTap:(){pop(myFile!, wdgMessage);},); wdgDecorations = GestureDetector(
child: Image.file(
myFile!,
cacheWidth: 2048, // limit the amount of space the image can decode too, we keep this high-ish to allow quality previews...
filterQuality: FilterQuality.medium,
fit: BoxFit.fill,
alignment: Alignment.center,
width: constraints.maxWidth,
isAntiAlias: false,
errorBuilder: (context, error, stackTrace) {
return MalformedBubble();
},
),
onTap: () {
pop(myFile!, wdgMessage);
},
);
} else { } else {
wdgDecorations = Text(AppLocalizations.of(context)!.fileSavedTo + ': ' + path + '\u202F'); wdgDecorations = Text(AppLocalizations.of(context)!.fileSavedTo + ': ' + path + '\u202F');
} }
@ -121,38 +140,29 @@ class FileBubbleState extends State<FileBubble> {
])); ]));
} }
return LayoutBuilder(builder: (context, constraints) {
//print(constraints.toString()+", "+constraints.maxWidth.toString()); return Container(
return Center( constraints: constraints,
widthFactor: 1.0, decoration: BoxDecoration(
child: Container( color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(),
decoration: BoxDecoration( border: Border.all(color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(), width: 1),
color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(), borderRadius: BorderRadius.only(
border: topLeft: Radius.circular(borderRadiousEh),
Border.all(color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(), width: 1), topRight: Radius.circular(borderRadiousEh),
borderRadius: BorderRadius.only( bottomLeft: fromMe ? Radius.circular(borderRadiousEh) : Radius.zero,
topLeft: Radius.circular(borderRadiousEh), bottomRight: fromMe ? Radius.zero : Radius.circular(borderRadiousEh),
topRight: Radius.circular(borderRadiousEh), ),
bottomLeft: fromMe ? Radius.circular(borderRadiousEh) : Radius.zero, ),
bottomRight: fromMe ? Radius.zero : Radius.circular(borderRadiousEh), child: Padding(
), padding: EdgeInsets.all(9.0),
), child: Column(
child: Center( crossAxisAlignment: fromMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
widthFactor: 1.0, mainAxisAlignment: fromMe ? MainAxisAlignment.end : MainAxisAlignment.start,
child: Padding( mainAxisSize: MainAxisSize.min,
padding: EdgeInsets.all(9.0), children: fromMe
child: Wrap(alignment: WrapAlignment.start, children: [ ? [wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]
Center( : [wdgSender, isPreview ? Container() : wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]),
widthFactor: 1.0, ));
child: Column(
crossAxisAlignment: fromMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
mainAxisAlignment: fromMe ? MainAxisAlignment.end : MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: fromMe
? [wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]
: [wdgSender, isPreview ? Container() : wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]),
)
])))));
}); });
} }
@ -313,17 +323,24 @@ class FileBubbleState extends State<FileBubble> {
await showDialog( await showDialog(
context: context, context: context,
builder: (_) => Dialog( builder: (_) => Dialog(
child: Container(padding: EdgeInsets.all(10), width: 500, height: 550, child:Column(children:[meta,Container( child: Container(
width: 300, padding: EdgeInsets.all(10),
height: 300, width: 500,
decoration: BoxDecoration( height: 550,
image: DecorationImage( child: Column(children: [
image: Image.file(myFile).image, meta,
fit: BoxFit.scaleDown Container(
) width: 300,
), height: 300,
),Icon(Icons.arrow_downward)]), decoration: BoxDecoration(
)) image: DecorationImage(
); image: Image.file(myFile, cacheHeight: 1024, cacheWidth: 1024).image,
fit: BoxFit.fitWidth,
filterQuality: FilterQuality.none,
)),
),
Icon(Icons.arrow_downward)
]),
)));
} }
} }