From 93935374e1fa132ae2786387d84176ea4a199a1b Mon Sep 17 00:00:00 2001 From: ashilkn Date: Tue, 28 Mar 2023 12:46:35 +0530 Subject: [PATCH] Made a layout of 'Location' screen with animations --- .../file_details/location_tags_widget.dart | 13 +- lib/ui/viewer/location/location_screen.dart | 165 ++++++++++++++++++ 2 files changed, 177 insertions(+), 1 deletion(-) create mode 100644 lib/ui/viewer/location/location_screen.dart diff --git a/lib/ui/viewer/file_details/location_tags_widget.dart b/lib/ui/viewer/file_details/location_tags_widget.dart index b30fd2c46..c3c553e91 100644 --- a/lib/ui/viewer/file_details/location_tags_widget.dart +++ b/lib/ui/viewer/file_details/location_tags_widget.dart @@ -6,6 +6,8 @@ import "package:photos/ui/components/buttons/chip_button_widget.dart"; import "package:photos/ui/components/buttons/inline_button_widget.dart"; import "package:photos/ui/components/info_item_widget.dart"; import 'package:photos/ui/viewer/location/add_location_sheet.dart'; +import "package:photos/ui/viewer/location/location_screen.dart"; +import "package:photos/utils/navigation_util.dart"; class LocationTagsWidget extends StatefulWidget { final List coordinates; @@ -66,7 +68,16 @@ class _LocationTagsWidgetState extends State { leadingIcon = Icons.pin_drop_outlined; hasChipButtons = true; }); - final result = locationTags.map((e) => ChipButtonWidget(e)).toList(); + final result = locationTags + .map( + (e) => ChipButtonWidget( + e, + onTap: () { + routeToPage(context, const LocationScreen()); + }, + ), + ) + .toList(); result.add( ChipButtonWidget( null, diff --git a/lib/ui/viewer/location/location_screen.dart b/lib/ui/viewer/location/location_screen.dart new file mode 100644 index 000000000..899598e90 --- /dev/null +++ b/lib/ui/viewer/location/location_screen.dart @@ -0,0 +1,165 @@ +import "package:flutter/material.dart"; +import "package:photos/core/constants.dart"; +import "package:photos/theme/ente_theme.dart"; +import "package:photos/ui/components/text_input_widget.dart"; +import "package:photos/ui/components/title_bar_title_widget.dart"; +import "package:photos/ui/components/title_bar_widget.dart"; +import "package:photos/ui/viewer/location/radius_picker_widget.dart"; + +class LocationScreen extends StatelessWidget { + const LocationScreen({super.key}); + + @override + Widget build(BuildContext context) { + final editNotifier = ValueNotifier(false); + return Scaffold( + body: CustomScrollView( + primary: false, + slivers: [ + TitleBarWidget( + flexibleSpaceTitle: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + ValueListenableBuilder( + valueListenable: editNotifier, + builder: (context, value, _) { + Widget child; + if (value as bool) { + child = SizedBox( + key: ValueKey(value), + width: double.infinity, + child: const TitleBarTitleWidget( + title: "Edit location", + ), + ); + } else { + child = SizedBox( + key: ValueKey(value), + width: double.infinity, + child: const TitleBarTitleWidget( + title: "Location name", + ), + ); + } + return AnimatedSwitcher( + switchInCurve: Curves.easeInExpo, + switchOutCurve: Curves.easeOutExpo, + duration: const Duration(milliseconds: 200), + child: child, + ); + }, + ), + Text( + "51 memories", + style: getEnteTextTheme(context).smallMuted, + ), + ], + ), + actionIcons: [ + IconButton( + onPressed: () { + editNotifier.value = !editNotifier.value; + }, + icon: const Icon(Icons.edit_rounded), + ) + ], + ), + SliverList( + delegate: SliverChildListDelegate([ + ValueListenableBuilder( + valueListenable: editNotifier, + builder: (context, value, _) { + return AnimatedCrossFade( + firstCurve: Curves.easeInOutExpo, + secondCurve: Curves.easeInOutExpo, + sizeCurve: Curves.easeInOutExpo, + firstChild: const LocationEditingWidget(), + secondChild: const SizedBox.shrink(), + crossFadeState: editNotifier.value + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + duration: const Duration(milliseconds: 300), + ); + }, + ), + //Gallery here + Container( + width: double.infinity, + height: 300, + color: Colors.teal, + ), + Container( + width: double.infinity, + height: 300, + color: Colors.red, + ), + Container( + width: double.infinity, + height: 300, + color: Colors.orange, + ), + ]), + ), + ], + ), + ); + } +} + +class LocationEditingWidget extends StatelessWidget { + const LocationEditingWidget({super.key}); + + @override + Widget build(BuildContext context) { + final selectedIndexNotifier = ValueNotifier(defaultRadiusValueIndex); + final textTheme = getEnteTextTheme(context); + return Padding( + padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 8), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const TextInputWidget(borderRadius: 2), + const SizedBox(height: 20), + Row( + children: [ + Container( + width: 48, + height: 48, + color: Colors.amber, + ), + Expanded( + child: Padding( + padding: const EdgeInsets.fromLTRB(12, 4.5, 16, 4.5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Center point", + style: textTheme.body, + ), + const SizedBox(height: 4), + Text( + "Coordinates", + style: textTheme.miniMuted, + ), + ], + ), + ), + ), + IconButton( + onPressed: () {}, + icon: const Icon(Icons.edit), + color: getEnteColorScheme(context).strokeMuted, + ), + ], + ), + const SizedBox(height: 20), + RadiusPickerWidget(selectedIndexNotifier), + ], + ), + ); + } +}