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

View File

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