design: Improve create story page design

This commit is contained in:
Christian Pauly 2022-02-05 09:58:47 +01:00 committed by Krille Fear
parent 6dae4cca94
commit 566b9155d1
2 changed files with 69 additions and 33 deletions

View File

@ -1,3 +1,4 @@
import 'dart:async';
import 'dart:io'; import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -35,12 +36,25 @@ class AddStoryController extends State<AddStoryPage> {
bool get hasMedia => image != null || video != null; bool get hasMedia => image != null || video != null;
void updateColors() => hasMedia bool hasText = false;
? null
: setState(() { Timer? _updateColorsCooldown;
backgroundColor = controller.text.color;
backgroundColorDark = controller.text.darkColor; void updateColors() {
}); if (hasText != controller.text.isNotEmpty) {
setState(() {
hasText = controller.text.isNotEmpty;
});
}
_updateColorsCooldown?.cancel();
_updateColorsCooldown = Timer(
const Duration(seconds: 3),
() => setState(() {
backgroundColor = controller.text.color;
backgroundColorDark = controller.text.darkColor;
}),
);
}
void importMedia() async { void importMedia() async {
final picked = await FilePickerCross.importFromStorage( final picked = await FilePickerCross.importFromStorage(
@ -88,6 +102,11 @@ class AddStoryController extends State<AddStoryPage> {
}); });
} }
void reset() => setState(() {
image = video = null;
controller.clear();
});
void postStory() async { void postStory() async {
if (video == null && image == null && controller.text.isEmpty) return; if (video == null && image == null && controller.text.isEmpty) return;
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
@ -150,7 +169,6 @@ class AddStoryController extends State<AddStoryPage> {
backgroundColorDark = text.darkColor; backgroundColorDark = text.darkColor;
final shareContent = Matrix.of(context).shareContent; final shareContent = Matrix.of(context).shareContent;
// ignore: unnecessary_null_comparison
if (shareContent != null) { if (shareContent != null) {
final shareFile = shareContent.tryGet<MatrixFile>('file')?.detectFileType; final shareFile = shareContent.tryGet<MatrixFile>('file')?.detectFileType;

View File

@ -4,7 +4,6 @@ import 'package:flutter/services.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:video_player/video_player.dart'; import 'package:video_player/video_player.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import 'add_story.dart'; import 'add_story.dart';
class AddStoryView extends StatelessWidget { class AddStoryView extends StatelessWidget {
@ -34,24 +33,13 @@ class AddStoryView extends StatelessWidget {
], ],
), ),
), ),
actions: controller.hasMedia actions: [
? null if (controller.hasMedia)
: [ IconButton(
IconButton( icon: const Icon(Icons.delete_outlined),
icon: const Icon(Icons.photo_outlined), onPressed: controller.reset,
onPressed: controller.importMedia, ),
), ],
if (PlatformInfos.isMobile)
IconButton(
icon: const Icon(Icons.camera_alt_outlined),
onPressed: controller.capturePhoto,
),
if (PlatformInfos.isMobile)
IconButton(
icon: const Icon(Icons.video_camera_back_outlined),
onPressed: controller.captureVideo,
),
],
), ),
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
body: Stack( body: Stack(
@ -104,7 +92,7 @@ class AddStoryView extends StatelessWidget {
? null ? null
: Colors.black.withOpacity(0.5), : Colors.black.withOpacity(0.5),
), ),
onEditingComplete: controller.updateColors, onChanged: (_) => controller.updateColors(),
decoration: InputDecoration( decoration: InputDecoration(
border: InputBorder.none, border: InputBorder.none,
hintText: controller.hasMedia hintText: controller.hasMedia
@ -123,12 +111,42 @@ class AddStoryView extends StatelessWidget {
), ),
], ],
), ),
floatingActionButton: FloatingActionButton.extended( floatingActionButton: Column(
onPressed: controller.postStory, mainAxisSize: MainAxisSize.min,
label: Text(L10n.of(context)!.publish), children: [
backgroundColor: Theme.of(context).colorScheme.surface, FloatingActionButton(
foregroundColor: Theme.of(context).colorScheme.onSurface, onPressed: controller.captureVideo,
icon: const Icon(Icons.send_rounded), backgroundColor: controller.backgroundColorDark,
foregroundColor: Colors.white,
heroTag: null,
child: const Icon(Icons.video_camera_front_outlined),
),
const SizedBox(height: 16),
FloatingActionButton(
onPressed: controller.capturePhoto,
backgroundColor: controller.backgroundColorDark,
foregroundColor: Colors.white,
heroTag: null,
child: const Icon(Icons.camera_alt_outlined),
),
const SizedBox(height: 16),
FloatingActionButton(
onPressed: controller.importMedia,
backgroundColor: controller.backgroundColorDark,
foregroundColor: Colors.white,
heroTag: null,
child: const Icon(Icons.photo_outlined),
),
if (controller.hasMedia || controller.hasText) ...[
const SizedBox(height: 16),
FloatingActionButton(
onPressed: controller.postStory,
backgroundColor: Theme.of(context).colorScheme.surface,
foregroundColor: Theme.of(context).colorScheme.onSurface,
child: const Icon(Icons.send_rounded),
),
],
],
), ),
); );
} }