beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Made a layout of 'Location' screen with animations

Browse source
This commit is contained in:
ashilkn 2023-03-28 12:46:35 +05:30
parent f2dc641749
commit 93935374e1
2 changed files with 177 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
lib/ui/viewer/file_details/location_tags_widget.dart
View file

@ -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<double> coordinates;
@ -66,7 +68,16 @@ class _LocationTagsWidgetState extends State<LocationTagsWidget> {
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,

165
lib/ui/viewer/location/location_screen.dart Normal file
View file

@ -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: <Widget>[
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),
],
),
);
}
}