Skip to content

Commit

Permalink
Merge pull request #18 from canopas/refactor-home-tab-ui
Browse files Browse the repository at this point in the history 
Refactor home tab UI
  • Loading branch information
@cp-mayank
cp-mayank authored May 22, 2024
2 parents b32e041 + 7d6456d commit 0e85483
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 42 deletions.
2 changes: 1 addition & 1 deletion khelo/lib/domain/formatter/date_formatter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ extension DateFormatter on DateTime {
switch (type) {
case DateFormatType.dateAndTime:
return DateFormat(
'EEE, MMM dd yyyy ${context.is24HourFormat ? 'HH:mm' : 'hh:mm a'}')
'EEE, dd MMM yyyy ${context.is24HourFormat ? 'HH:mm' : 'hh:mm a'}')
.format(this);
case DateFormatType.date:
return DateFormat(
Expand Down
110 changes: 69 additions & 41 deletions khelo/lib/ui/flow/home/home_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ import 'package:khelo/components/app_page.dart';
import 'package:khelo/components/error_screen.dart';
import 'package:khelo/components/image_avatar.dart';
import 'package:khelo/domain/extensions/context_extensions.dart';
import 'package:khelo/domain/extensions/enum_extensions.dart';
import 'package:khelo/domain/formatter/date_formatter.dart';
import 'package:khelo/ui/app_route.dart';
import 'package:khelo/ui/flow/home/home_view_model.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:style/animations/on_tap_scale.dart';
import 'package:style/extensions/context_extensions.dart';
import 'package:style/indicator/progress_indicator.dart';
import 'package:style/page_views/expandable_page_view.dart';
import 'package:style/text/app_text_style.dart';

class HomeScreen extends ConsumerStatefulWidget {
Expand All @@ -24,6 +23,7 @@ class HomeScreen extends ConsumerStatefulWidget {

class _HomeScreenState extends ConsumerState<HomeScreen>
with AutomaticKeepAliveClientMixin, WidgetsBindingObserver {
final _controller = PageController(keepPage: true, viewportFraction: 0.9);
late HomeViewNotifier notifier;
bool _wantKeepAlive = true;

Expand Down Expand Up @@ -81,12 +81,7 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
}

if (state.matches.isNotEmpty) {
return ListView(
padding: context.mediaQueryPadding,
children: [
_matchCardSlider(context, state),
],
);
return _matchCardSlider(context, state);
} else {
return _emptyMatchView(context);
}
Expand All @@ -96,11 +91,42 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
BuildContext context,
HomeViewState state,
) {
return ExpandablePageView(
itemCount: state.matches.length,
itemBuilder: (context, index) {
return _matchCell(context, state.matches[index]);
},
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(
height: 187,
child: state.matches.length == 1
? Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: _matchCell(context, state.matches.first),
)
: PageView.builder(
padEnds: false,
controller: _controller,
itemCount: state.matches.length,
itemBuilder: (context, index) {
return _matchCell(context, state.matches[index]);
},
),
),
const SizedBox(height: 16),
if (state.matches.length >= 2) ...[
SmoothPageIndicator(
controller: _controller,
count: state.matches.length,
effect: ExpandingDotsEffect(
expansionFactor: 2,
dotHeight: 8,
dotWidth: 8,
dotColor: context.colorScheme.containerHigh,
activeDotColor: context.colorScheme.secondary,
),
)
],
],
),
);
}

Expand All @@ -109,26 +135,25 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
onTap: () => AppRoute.matchDetailTab(matchId: match.id ?? "INVALID ID")
.push(context),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
padding: const EdgeInsets.all(16),
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
border: Border.all(color: context.colorScheme.outline),
borderRadius: BorderRadius.circular(20),
color: context.colorScheme.containerLow,
border: Border.all(color: context.colorScheme.secondary),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_matchDetailView(context, match),
const SizedBox(height: 24),
_teamScore(
context,
match.teams.first,
match.teams.elementAt(1).wicket,
match.current_playing_team_id == match.teams.first.team.id,
),
const SizedBox(
height: 8,
),
const SizedBox(height: 8),
_teamScore(
context,
match.teams.elementAt(1),
Expand All @@ -138,7 +163,6 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
const SizedBox(
height: 8,
),
_matchDetailView(context, match),
],
),
),
Expand All @@ -156,7 +180,7 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
ImageAvatar(
initial: team.team.name[0].toUpperCase(),
imageUrl: team.team.profile_img_url,
size: 35,
size: 32,
),
const SizedBox(width: 8),
Expanded(
Expand All @@ -166,16 +190,16 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
style: AppTextStyle.subtitle1.copyWith(
color: isCurrentlyPlaying
? context.colorScheme.primary
: context.colorScheme.textPrimary)),
: context.colorScheme.textSecondary)),
),
Text.rich(TextSpan(
text: "${team.run}-$wicket",
style: AppTextStyle.header3
style: AppTextStyle.subtitle2
.copyWith(color: context.colorScheme.textPrimary),
children: [
TextSpan(
text: " ${team.over}",
style: AppTextStyle.subtitle2
style: AppTextStyle.body2
.copyWith(color: context.colorScheme.textSecondary),
)
]))
Expand All @@ -187,22 +211,26 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
BuildContext context,
MatchModel match,
) {
return Column(
children: [
Divider(
color: context.colorScheme.outline,
thickness: 2,
),
Text(
"${match.ground} - ${match.match_type.getString(context)} - ${context.l10n.match_list_overs_title(match.number_of_over)}",
style: AppTextStyle.subtitle2
.copyWith(color: context.colorScheme.textPrimary),
),
Text(match.start_time.format(context, DateFormatType.dateAndTime),
style: AppTextStyle.subtitle2
.copyWith(color: context.colorScheme.textPrimary)),
],
);
return Text.rich(
overflow: TextOverflow.ellipsis,
TextSpan(
text: match.start_time.format(context, DateFormatType.dateAndTime),
style: AppTextStyle.body2
.copyWith(color: context.colorScheme.textPrimary),
children: [
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Container(
height: 5,
width: 5,
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: context.colorScheme.textPrimary,
),
)),
TextSpan(text: match.ground)
]));
}

Widget _emptyMatchView(BuildContext context) {
Expand Down
8 changes: 8 additions & 0 deletions khelo/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1185,6 +1185,14 @@ packages:
description: flutter
source: sdk
version: "0.0.99"
smooth_page_indicator:
dependency: "direct main"
description:
name: smooth_page_indicator
sha256: "725bc638d5e79df0c84658e1291449996943f93bacbc2cec49963dbbab48d8ae"
url: "https://pub.dev"
source: hosted
version: "1.1.0"
source_gen:
dependency: transitive
description:
Expand Down
1 change: 1 addition & 0 deletions khelo/pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ dependencies:
image_cropper: ^5.0.1
cached_network_image: ^3.3.1
fluttertoast: ^8.2.4
smooth_page_indicator: ^1.1.0
flutter_svg: ^2.0.10+1

# picker
Expand Down

0 comments on commit 0e85483

Please sign in to comment.