design: Floating input bar

This commit is contained in:
Krille Fear 2021-11-06 11:18:32 +01:00
parent 0fe32596de
commit 66cae6cc85
1 changed files with 248 additions and 232 deletions

View File

@ -1,5 +1,6 @@
import 'dart:ui';
import 'package:fluffychat/config/themes.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@ -505,14 +506,21 @@ class ChatView extends StatelessWidget {
),
),
),
const Divider(height: 1),
if (controller.showScrollDownButton)
const Divider(
height: 1,
),
if (controller.room.canSendDefaultMessages &&
controller.room.membership == Membership.join &&
!controller.showEmojiPicker)
Container(
decoration: BoxDecoration(
Padding(
padding: EdgeInsets.all(
FluffyThemes.isColumnMode(context) ? 16.0 : 8.0),
child: Material(
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
elevation: 4,
color: Theme.of(context).scaffoldBackgroundColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -521,7 +529,8 @@ class ChatView extends StatelessWidget {
SizedBox(
height: 56,
child: TextButton(
onPressed: controller.forwardEventsAction,
onPressed:
controller.forwardEventsAction,
child: Row(
children: <Widget>[
const Icon(Icons
@ -544,8 +553,8 @@ class ChatView extends StatelessWidget {
controller.replyAction,
child: Row(
children: <Widget>[
Text(
L10n.of(context).reply),
Text(L10n.of(context)
.reply),
const Icon(Icons
.keyboard_arrow_right),
],
@ -555,8 +564,8 @@ class ChatView extends StatelessWidget {
: SizedBox(
height: 56,
child: TextButton(
onPressed:
controller.sendAgainAction,
onPressed: controller
.sendAgainAction,
child: Row(
children: <Widget>[
Text(L10n.of(context)
@ -573,7 +582,8 @@ class ChatView extends StatelessWidget {
]
: <Widget>[
AnimatedContainer(
duration: const Duration(milliseconds: 200),
duration:
const Duration(milliseconds: 200),
height: 56,
width:
controller.inputText.isEmpty ? 56 : 0,
@ -595,8 +605,8 @@ class ChatView extends StatelessWidget {
child: Icon(
Icons.attachment_outlined),
),
title:
Text(L10n.of(context).sendFile),
title: Text(
L10n.of(context).sendFile),
contentPadding:
const EdgeInsets.all(0),
),
@ -607,7 +617,8 @@ class ChatView extends StatelessWidget {
leading: const CircleAvatar(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
child: Icon(Icons.image_outlined),
child:
Icon(Icons.image_outlined),
),
title: Text(
L10n.of(context).sendImage),
@ -620,13 +631,14 @@ class ChatView extends StatelessWidget {
value: 'camera',
child: ListTile(
leading: const CircleAvatar(
backgroundColor: Colors.purple,
backgroundColor:
Colors.purple,
foregroundColor: Colors.white,
child: Icon(
Icons.camera_alt_outlined),
child: Icon(Icons
.camera_alt_outlined),
),
title: Text(
L10n.of(context).openCamera),
title: Text(L10n.of(context)
.openCamera),
contentPadding:
const EdgeInsets.all(0),
),
@ -639,13 +651,14 @@ class ChatView extends StatelessWidget {
value: 'sticker',
child: ListTile(
leading: const CircleAvatar(
backgroundColor: Colors.orange,
backgroundColor:
Colors.orange,
foregroundColor: Colors.white,
child: Icon(Icons
.emoji_emotions_outlined),
),
title: Text(
L10n.of(context).sendSticker),
title: Text(L10n.of(context)
.sendSticker),
contentPadding:
const EdgeInsets.all(0),
),
@ -724,7 +737,8 @@ class ChatView extends StatelessWidget {
enabledBorder: InputBorder.none,
filled: false,
),
onChanged: controller.onInputBarChanged,
onChanged:
controller.onInputBarChanged,
),
),
),
@ -734,9 +748,10 @@ class ChatView extends StatelessWidget {
height: 56,
alignment: Alignment.center,
child: IconButton(
tooltip: L10n.of(context).voiceMessage,
icon:
const Icon(Icons.mic_none_outlined),
tooltip:
L10n.of(context).voiceMessage,
icon: const Icon(
Icons.mic_none_outlined),
onPressed:
controller.voiceMessageAction,
),
@ -755,6 +770,7 @@ class ChatView extends StatelessWidget {
],
),
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 300),
height: controller.showEmojiPicker