Skip to content

Commit bf102a3

Browse files
ggurdinggurdin
authored
chore: some UI/UX to bottom nav bar navigation (#2190)
1 parent 1855953 commit bf102a3

File tree

5 files changed

+145
-220
lines changed

5 files changed

+145
-220
lines changed

‎lib/config/routes.dart

+10-7
Original file line numberDiff line numberDiff line change
@@ -692,11 +692,14 @@ abstract class AppRoutes {
692692
GoRouterState state,
693693
Widget child,
694694
) =>
695-
FluffyThemes.isColumnMode(context)
696-
? noTransitionPageBuilder(context, state, child)
697-
: MaterialPage(
698-
key: state.pageKey,
699-
restorationId: state.pageKey.value,
700-
child: child,
701-
);
695+
// #Pangea
696+
noTransitionPageBuilder(context, state, child);
697+
// FluffyThemes.isColumnMode(context)
698+
// ? noTransitionPageBuilder(context, state, child)
699+
// : MaterialPage(
700+
// key: state.pageKey,
701+
// restorationId: state.pageKey.value,
702+
// child: child,
703+
// );
704+
// Pangea#
702705
}

‎lib/pangea/activity_suggestions/activity_suggestions_area.dart

+9-44
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33

44
import 'package:flutter/material.dart';
55

6-
import 'package:collection/collection.dart';
7-
86
import 'package:fluffychat/config/themes.dart';
97
import 'package:fluffychat/pangea/activity_planner/activity_plan_model.dart';
108
import 'package:fluffychat/pangea/activity_planner/activity_plan_request.dart';
@@ -44,37 +42,6 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
4442
double get cardPadding => _isColumnMode ? 8.0 : 0.0;
4543
double get cardWidth => _isColumnMode ? 225.0 : 150.0;
4644

47-
void _scrollToItem(int index) {
48-
final viewportDimension = _scrollController.position.viewportDimension;
49-
final double scrollOffset = _isColumnMode
50-
? index * cardWidth - (viewportDimension / 2) + (cardWidth / 2)
51-
: (index + 1) * (cardHeight + 8.0);
52-
final maxScrollExtent = _scrollController.position.maxScrollExtent;
53-
final safeOffset = scrollOffset.clamp(0.0, maxScrollExtent);
54-
if (safeOffset == _scrollController.offset) {
55-
return;
56-
}
57-
_scrollController.animateTo(
58-
safeOffset,
59-
duration: FluffyThemes.animationDuration,
60-
curve: FluffyThemes.animationCurve,
61-
);
62-
}
63-
64-
// void _scrollToNextItem(AxisDirection direction) {
65-
// final currentOffset = _scrollController.offset;
66-
// final scrollAmount = _isColumnMode ? cardWidth : cardHeight;
67-
68-
// _scrollController.animateTo(
69-
// (direction == AxisDirection.left
70-
// ? currentOffset - scrollAmount
71-
// : currentOffset + scrollAmount)
72-
// .clamp(0.0, _scrollController.position.maxScrollExtent),
73-
// duration: FluffyThemes.animationDuration,
74-
// curve: FluffyThemes.animationCurve,
75-
// );
76-
// }
77-
7845
Future<void> _setActivityItems() async {
7946
final ActivityPlanRequest request = ActivityPlanRequest(
8047
topic: "",
@@ -91,17 +58,16 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
9158
);
9259
final resp = await ActivitySearchRepo.get(request);
9360
_activityItems.addAll(resp.activityPlans);
94-
setState(() {});
61+
if (mounted) setState(() {});
9562
}
9663

9764
@override
9865
Widget build(BuildContext context) {
9966
final List<Widget> cards = _activityItems
100-
.mapIndexed((i, activity) {
67+
.map((activity) {
10168
return ActivitySuggestionCard(
10269
activity: activity,
10370
onPressed: () {
104-
_scrollToItem(i);
10571
showDialog(
10672
context: context,
10773
builder: (context) {
@@ -142,14 +108,13 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
142108
),
143109
),
144110
)
145-
: SizedBox.expand(
146-
child: SingleChildScrollView(
147-
controller: _scrollController,
148-
child: Wrap(
149-
alignment: WrapAlignment.spaceEvenly,
150-
runSpacing: 16.0,
151-
children: cards,
152-
),
111+
: SizedBox(
112+
width: MediaQuery.of(context).size.width,
113+
child: Wrap(
114+
alignment: WrapAlignment.spaceEvenly,
115+
runSpacing: 16.0,
116+
spacing: 4.0,
117+
children: cards,
153118
),
154119
);
155120
}

‎lib/pangea/activity_suggestions/suggestions_page.dart

+62-57
Original file line numberDiff line numberDiff line change
@@ -15,67 +15,72 @@ class SuggestionsPage extends StatelessWidget {
1515
Widget build(BuildContext context) {
1616
final theme = Theme.of(context);
1717
final isColumnMode = FluffyThemes.isColumnMode(context);
18-
return Padding(
19-
padding: EdgeInsets.symmetric(
20-
horizontal: isColumnMode ? 36.0 : 8.0,
21-
vertical: isColumnMode ? 24.0 : 8.0,
22-
),
23-
child: SafeArea(
24-
child: Column(
25-
mainAxisSize: MainAxisSize.min,
26-
children: [
27-
if (!isColumnMode) const LearningProgressIndicators(),
28-
Padding(
29-
padding: EdgeInsets.only(
30-
left: isColumnMode ? 12.0 : 4.0,
31-
right: isColumnMode ? 12.0 : 4.0,
32-
top: 16.0,
33-
bottom: 16.0,
34-
),
35-
child: Row(
36-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
37-
children: [
38-
Text(
39-
L10n.of(context).learnByTexting,
40-
style: isColumnMode
41-
? theme.textTheme.titleLarge
42-
?.copyWith(fontWeight: FontWeight.bold)
43-
: theme.textTheme.titleMedium?.copyWith(
44-
fontWeight: FontWeight.bold,
45-
),
46-
),
47-
Container(
48-
decoration: BoxDecoration(
49-
color: theme.colorScheme.surfaceContainerHighest,
50-
borderRadius: BorderRadius.circular(36.0),
18+
return SafeArea(
19+
child: SingleChildScrollView(
20+
child: Padding(
21+
padding: EdgeInsets.symmetric(
22+
horizontal: isColumnMode ? 36.0 : 4.0,
23+
vertical: 16.0,
24+
),
25+
child: Column(
26+
mainAxisSize: MainAxisSize.min,
27+
children: [
28+
if (!isColumnMode)
29+
Padding(
30+
padding:
31+
EdgeInsets.symmetric(horizontal: isColumnMode ? 0 : 12.0),
32+
child: const LearningProgressIndicators(),
33+
),
34+
Padding(
35+
padding: EdgeInsets.only(
36+
left: isColumnMode ? 12.0 : 4.0,
37+
right: isColumnMode ? 12.0 : 4.0,
38+
top: 16.0,
39+
bottom: 16.0,
40+
),
41+
child: Row(
42+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
43+
children: [
44+
Text(
45+
L10n.of(context).learnByTexting,
46+
style: isColumnMode
47+
? theme.textTheme.titleLarge
48+
?.copyWith(fontWeight: FontWeight.bold)
49+
: theme.textTheme.titleMedium?.copyWith(
50+
fontWeight: FontWeight.bold,
51+
),
5152
),
52-
padding: const EdgeInsets.symmetric(
53-
vertical: 6.0,
54-
horizontal: 10.0,
55-
),
56-
child: Row(
57-
spacing: 8.0,
58-
children: [
59-
PangeaLogoSvg(
60-
width: 16.0,
61-
forceColor: theme.colorScheme.primary,
62-
),
63-
Text(
64-
AppConfig.applicationName,
65-
style: theme.textTheme.titleSmall?.copyWith(
66-
fontWeight: FontWeight.bold,
53+
Container(
54+
decoration: BoxDecoration(
55+
color: theme.colorScheme.surfaceContainerHighest,
56+
borderRadius: BorderRadius.circular(36.0),
57+
),
58+
padding: const EdgeInsets.symmetric(
59+
vertical: 6.0,
60+
horizontal: 10.0,
61+
),
62+
child: Row(
63+
spacing: 8.0,
64+
children: [
65+
PangeaLogoSvg(
66+
width: 16.0,
67+
forceColor: theme.colorScheme.primary,
68+
),
69+
Text(
70+
AppConfig.applicationName,
71+
style: theme.textTheme.titleSmall?.copyWith(
72+
fontWeight: FontWeight.bold,
73+
),
6774
),
68-
),
69-
],
75+
],
76+
),
7077
),
71-
),
72-
],
78+
],
79+
),
7380
),
74-
),
75-
const Flexible(
76-
child: ActivitySuggestionsArea(),
77-
),
78-
],
81+
const ActivitySuggestionsArea(),
82+
],
83+
),
7984
),
8085
),
8186
);

‎lib/pangea/analytics_summary/learning_progress_indicators.dart

+41-34
Original file line numberDiff line numberDiff line change
@@ -113,44 +113,51 @@ class LearningProgressIndicatorsState
113113
cursor: SystemMouseCursors.click,
114114
child: GestureDetector(
115115
onTap: () => context.go("/rooms/settings"),
116-
child: Stack(
117-
children: [
118-
FutureBuilder<Profile>(
119-
future: client.fetchOwnProfile(),
120-
builder: (context, snapshot) => Stack(
121-
alignment: Alignment.center,
122-
children: [
123-
Material(
124-
color: Colors.transparent,
125-
borderRadius: BorderRadius.circular(99),
126-
child: Avatar(
127-
mxContent: snapshot.data?.avatarUrl,
128-
name: snapshot.data?.displayName ??
129-
client.userID!.localpart,
130-
size: 60,
116+
child: Padding(
117+
padding: const EdgeInsets.only(
118+
bottom: 8.0,
119+
right: 8.0,
120+
),
121+
child: Stack(
122+
clipBehavior: Clip.none, // Allow overflow
123+
children: [
124+
FutureBuilder<Profile>(
125+
future: client.fetchOwnProfile(),
126+
builder: (context, snapshot) => Stack(
127+
alignment: Alignment.center,
128+
children: [
129+
Material(
130+
color: Colors.transparent,
131+
borderRadius: BorderRadius.circular(99),
132+
child: Avatar(
133+
mxContent: snapshot.data?.avatarUrl,
134+
name: snapshot.data?.displayName ??
135+
client.userID!.localpart,
136+
size: 60,
137+
),
131138
),
132-
),
133-
],
134-
),
135-
),
136-
Positioned(
137-
bottom: -3,
138-
right: -3,
139-
child: Container(
140-
decoration: BoxDecoration(
141-
borderRadius: BorderRadius.circular(15),
142-
color: Theme.of(context).colorScheme.surfaceBright,
139+
],
143140
),
144-
padding: const EdgeInsets.all(4.0),
145-
child: Icon(
146-
size: 14,
147-
Icons.settings_outlined,
148-
color: Theme.of(context).colorScheme.primary,
149-
weight: 1000,
141+
),
142+
Positioned(
143+
bottom: -3,
144+
right: -3,
145+
child: Container(
146+
decoration: BoxDecoration(
147+
borderRadius: BorderRadius.circular(15),
148+
color: Theme.of(context).colorScheme.surfaceBright,
149+
),
150+
padding: const EdgeInsets.all(4.0),
151+
child: Icon(
152+
size: 14,
153+
Icons.settings_outlined,
154+
color: Theme.of(context).colorScheme.primary,
155+
weight: 1000,
156+
),
150157
),
151158
),
152-
),
153-
],
159+
],
160+
),
154161
),
155162
),
156163
),

0 commit comments

Comments
 (0)