[mob] Show people in grid view

This commit is contained in:
Neeraj Gupta 2024-11-06 14:25:42 +05:30
parent 0e27e1c928
commit 6e86c7dff0
2 changed files with 24 additions and 26 deletions

View File

@ -9,6 +9,7 @@ import "package:photos/models/search/search_result.dart";
import "package:photos/models/search/search_types.dart"; import "package:photos/models/search/search_types.dart";
import "package:photos/ui/common/loading_widget.dart"; import "package:photos/ui/common/loading_widget.dart";
import "package:photos/ui/viewer/search/result/searchable_item.dart"; import "package:photos/ui/viewer/search/result/searchable_item.dart";
import "package:photos/ui/viewer/search_tab/people_section.dart";
class PeopleAllPage extends StatefulWidget { class PeopleAllPage extends StatefulWidget {
final SectionType sectionType; final SectionType sectionType;
@ -61,6 +62,7 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
), ),
), ),
title: Text(widget.sectionType.sectionTitle(context)), title: Text(widget.sectionType.sectionTitle(context)),
centerTitle: false,
), ),
body: Expanded( body: Expanded(
child: Padding( child: Padding(
@ -76,15 +78,15 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
); );
} }
return GridView.builder( return GridView.builder(
padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: MediaQuery.of(context).size.width > 600 crossAxisCount: MediaQuery.of(context).size.width > 600
? 4 ? 4
: 3, // Dynamically adjust columns based on screen width : 3, // Dynamically adjust columns based on screen width
crossAxisSpacing: 10, crossAxisSpacing: 8,
mainAxisSpacing: 10, mainAxisSpacing: 0,
childAspectRatio: childAspectRatio:
0.85, // Adjust this value to control item height ratio 0.78, // Adjust this value to control item height ratio
), ),
itemCount: sectionResults.length, itemCount: sectionResults.length,
physics: const BouncingScrollPhysics(), physics: const BouncingScrollPhysics(),
@ -93,13 +95,8 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
itemBuilder: (context, index) { itemBuilder: (context, index) {
Widget resultWidget; Widget resultWidget;
if (sectionResults[index] is GenericSearchResult) { if (sectionResults[index] is GenericSearchResult) {
final result = resultWidget = PeopleRowItem(
sectionResults[index] as GenericSearchResult; searchResult: sectionResults[index],
resultWidget = SearchableItemWidget(
sectionResults[index],
onResultTap: result.onResultTap != null
? () => result.onResultTap!(context)
: null,
); );
} else { } else {
resultWidget = SearchableItemWidget( resultWidget = SearchableItemWidget(

View File

@ -119,7 +119,7 @@ class _PeopleSectionState extends State<PeopleSection> {
], ],
), ),
const SizedBox(height: 2), const SizedBox(height: 2),
SearchExampleRow(_examples, widget.sectionType), PeopleRow(_examples, widget.sectionType),
], ],
), ),
) )
@ -163,11 +163,11 @@ class _PeopleSectionState extends State<PeopleSection> {
} }
} }
class SearchExampleRow extends StatelessWidget { class PeopleRow extends StatelessWidget {
final SectionType sectionType; final SectionType sectionType;
final List<SearchResult> examples; final List<SearchResult> examples;
const SearchExampleRow(this.examples, this.sectionType, {super.key}); const PeopleRow(this.examples, this.sectionType, {super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -175,7 +175,7 @@ class SearchExampleRow extends StatelessWidget {
final scrollableExamples = <Widget>[]; final scrollableExamples = <Widget>[];
examples.forEachIndexed((index, element) { examples.forEachIndexed((index, element) {
scrollableExamples.add( scrollableExamples.add(
SearchExample( PeopleRowItem(
searchResult: examples.elementAt(index), searchResult: examples.elementAt(index),
), ),
); );
@ -193,9 +193,9 @@ class SearchExampleRow extends StatelessWidget {
} }
} }
class SearchExample extends StatelessWidget { class PeopleRowItem extends StatelessWidget {
final SearchResult searchResult; final SearchResult searchResult;
const SearchExample({required this.searchResult, super.key}); const PeopleRowItem({required this.searchResult, super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -204,9 +204,9 @@ class SearchExample extends StatelessWidget {
int.tryParse(searchResult.name()) != null); int.tryParse(searchResult.name()) != null);
late final double width; late final double width;
if (textScaleFactor <= 1.0) { if (textScaleFactor <= 1.0) {
width = 85.0; width = 120.0;
} else { } else {
width = 85.0 + ((textScaleFactor - 1.0) * 64); width = 120.0 + ((textScaleFactor - 1.0) * 64);
} }
final heroTag = final heroTag =
searchResult.heroTag() + (searchResult.previewThumbnail()?.tag ?? ""); searchResult.heroTag() + (searchResult.previewThumbnail()?.tag ?? "");
@ -238,19 +238,20 @@ class SearchExample extends StatelessWidget {
child: SizedBox( child: SizedBox(
width: width, width: width,
child: Padding( child: Padding(
padding: const EdgeInsets.only(left: 6, right: 6, top: 8), padding: const EdgeInsets.only(left: 4, right: 4, top: 8),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
SizedBox( SizedBox(
width: 64, width: 100,
height: 64, height: 100,
child: searchResult.previewThumbnail() != null child: searchResult.previewThumbnail() != null
? Hero( ? Hero(
tag: heroTag, tag: heroTag,
child: ClipRRect( child: ClipRRect(
borderRadius: borderRadius: const BorderRadius.all(
const BorderRadius.all(Radius.elliptical(16, 12)), Radius.elliptical(16, 12),
),
child: searchResult.type() != ResultType.faces child: searchResult.type() != ResultType.faces
? ThumbnailWidget( ? ThumbnailWidget(
searchResult.previewThumbnail()!, searchResult.previewThumbnail()!,
@ -285,7 +286,7 @@ class SearchExample extends StatelessWidget {
} }
}, },
child: Padding( child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 16), padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Text( child: Text(
"Add name", "Add name",
maxLines: 1, maxLines: 1,
@ -296,7 +297,7 @@ class SearchExample extends StatelessWidget {
), ),
) )
: Padding( : Padding(
padding: const EdgeInsets.only(top: 10, bottom: 16), padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Text( child: Text(
searchResult.name(), searchResult.name(),
maxLines: 2, maxLines: 2,