File Bubble Design
This commit is contained in:
parent
63fc1fe772
commit
8be0fa3957
|
@ -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,15 +140,12 @@ 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,
|
|
||||||
child: Container(
|
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(),
|
color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(),
|
||||||
border:
|
border: Border.all(color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(), width: 1),
|
||||||
Border.all(color: fromMe ? Provider.of<Settings>(context).theme.messageFromMeBackgroundColor() : Provider.of<Settings>(context).theme.messageFromOtherBackgroundColor(), width: 1),
|
|
||||||
borderRadius: BorderRadius.only(
|
borderRadius: BorderRadius.only(
|
||||||
topLeft: Radius.circular(borderRadiousEh),
|
topLeft: Radius.circular(borderRadiousEh),
|
||||||
topRight: Radius.circular(borderRadiousEh),
|
topRight: Radius.circular(borderRadiousEh),
|
||||||
|
@ -137,13 +153,8 @@ class FileBubbleState extends State<FileBubble> {
|
||||||
bottomRight: fromMe ? Radius.zero : Radius.circular(borderRadiousEh),
|
bottomRight: fromMe ? Radius.zero : Radius.circular(borderRadiousEh),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: Center(
|
|
||||||
widthFactor: 1.0,
|
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: EdgeInsets.all(9.0),
|
padding: EdgeInsets.all(9.0),
|
||||||
child: Wrap(alignment: WrapAlignment.start, children: [
|
|
||||||
Center(
|
|
||||||
widthFactor: 1.0,
|
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: fromMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
|
crossAxisAlignment: fromMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
|
||||||
mainAxisAlignment: fromMe ? MainAxisAlignment.end : MainAxisAlignment.start,
|
mainAxisAlignment: fromMe ? MainAxisAlignment.end : MainAxisAlignment.start,
|
||||||
|
@ -151,8 +162,7 @@ class FileBubbleState extends State<FileBubble> {
|
||||||
children: fromMe
|
children: fromMe
|
||||||
? [wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]
|
? [wdgMessage, Visibility(visible: widget.interactive, child: wdgDecorations)]
|
||||||
: [wdgSender, isPreview ? Container() : 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(
|
||||||
|
padding: EdgeInsets.all(10),
|
||||||
|
width: 500,
|
||||||
|
height: 550,
|
||||||
|
child: Column(children: [
|
||||||
|
meta,
|
||||||
|
Container(
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 300,
|
height: 300,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
image: DecorationImage(
|
image: DecorationImage(
|
||||||
image: Image.file(myFile).image,
|
image: Image.file(myFile, cacheHeight: 1024, cacheWidth: 1024).image,
|
||||||
fit: BoxFit.scaleDown
|
fit: BoxFit.fitWidth,
|
||||||
)
|
filterQuality: FilterQuality.none,
|
||||||
|
)),
|
||||||
),
|
),
|
||||||
),Icon(Icons.arrow_downward)]),
|
Icon(Icons.arrow_downward)
|
||||||
))
|
]),
|
||||||
);
|
)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue