mobile bluesky app made with flutter
lazurite.stormlightlabs.org/
mobile
bluesky
flutter
feat: responsive feed layout and post footer
+186
-118
+32
-32
lib/core/router/app_router.dart
+32
-32
lib/core/router/app_router.dart
···
120
120
path: '/saved',
121
121
builder: (context, state) => SavedPostsScreen(accountDid: context.read<String>()),
122
122
),
123
-
GoRoute(
124
-
path: '/messages',
125
-
parentNavigatorKey: _rootNavigatorKey,
126
-
builder: (context, state) => const ConvoListScreen(),
127
-
routes: [
128
-
GoRoute(
129
-
path: ':id',
130
-
builder: (context, state) {
131
-
final convoId = state.pathParameters['id']!;
132
-
final args = state.extra as MessageThreadRouteArgs?;
133
-
return BlocProvider(
134
-
create: (_) => MessageBloc(
135
-
convoRepository: context.read<ConvoRepository>(),
136
-
currentUserDid: context.read<String>(),
137
-
),
138
-
child: MessageThreadScreen(convoId: convoId, title: args?.title ?? 'Conversation'),
139
-
);
140
-
},
141
-
),
142
-
],
143
-
),
144
-
GoRoute(
145
-
path: '/settings',
146
-
parentNavigatorKey: _rootNavigatorKey,
147
-
builder: (context, state) => const SettingsScreen(),
148
-
routes: [
149
-
GoRoute(path: 'about', builder: (context, state) => const AboutScreen()),
150
-
GoRoute(path: 'logs', builder: (context, state) => const LogsScreen()),
151
-
GoRoute(path: 'devtools', builder: (context, state) => const DevToolsScreen()),
152
-
],
153
-
),
154
123
StatefulShellRoute.indexedStack(
155
124
builder: (context, state, navigationShell) {
156
125
if (!context.read<AuthBloc>().state.isAuthenticated) {
···
187
156
GoRoute(
188
157
path: '/',
189
158
builder: (context, state) => const HomeFeedScreen(),
190
-
routes: [GoRoute(path: 'feeds', builder: (context, state) => const FeedManagementScreen())],
159
+
routes: [
160
+
GoRoute(path: 'feeds', builder: (context, state) => const FeedManagementScreen()),
161
+
GoRoute(
162
+
path: 'messages',
163
+
builder: (context, state) => const ConvoListScreen(),
164
+
routes: [
165
+
GoRoute(
166
+
path: ':id',
167
+
builder: (context, state) {
168
+
final convoId = state.pathParameters['id']!;
169
+
final args = state.extra as MessageThreadRouteArgs?;
170
+
return BlocProvider(
171
+
create: (_) => MessageBloc(
172
+
convoRepository: context.read<ConvoRepository>(),
173
+
currentUserDid: context.read<String>(),
174
+
),
175
+
child: MessageThreadScreen(convoId: convoId, title: args?.title ?? 'Conversation'),
176
+
);
177
+
},
178
+
),
179
+
],
180
+
),
181
+
GoRoute(
182
+
path: 'settings',
183
+
builder: (context, state) => const SettingsScreen(),
184
+
routes: [
185
+
GoRoute(path: 'about', builder: (context, state) => const AboutScreen()),
186
+
GoRoute(path: 'logs', builder: (context, state) => const LogsScreen()),
187
+
GoRoute(path: 'devtools', builder: (context, state) => const DevToolsScreen()),
188
+
],
189
+
),
190
+
],
191
191
),
192
192
],
193
193
),
+28
lib/features/feed/presentation/widgets/feed_layout_view.dart
+28
lib/features/feed/presentation/widgets/feed_layout_view.dart
···
49
49
Widget _buildGrid(BuildContext context) {
50
50
final width = MediaQuery.of(context).size.width;
51
51
final columns = feedColumnCount(width);
52
+
if (columns == 1) {
53
+
return _buildSingleColumnGrid(context);
54
+
}
52
55
final tileWidth = (width - ((columns - 1) * _gridSpacing)) / columns;
53
56
54
57
return RefreshIndicator(
···
64
67
mainAxisSpacing: _gridSpacing,
65
68
// Grid cards have a square media region plus fixed author/body/footer chrome.
66
69
mainAxisExtent: tileWidth + _gridCardChromeHeight,
70
+
),
71
+
),
72
+
if (isLoadingMore)
73
+
const SliverToBoxAdapter(
74
+
child: Center(
75
+
child: Padding(padding: EdgeInsets.all(16), child: CircularProgressIndicator()),
76
+
),
77
+
),
78
+
],
79
+
),
80
+
);
81
+
}
82
+
83
+
Widget _buildSingleColumnGrid(BuildContext context) {
84
+
return RefreshIndicator(
85
+
onRefresh: onRefresh,
86
+
child: CustomScrollView(
87
+
controller: scrollController,
88
+
slivers: [
89
+
SliverPadding(
90
+
padding: const EdgeInsets.fromLTRB(12, 8, 12, 12),
91
+
sliver: SliverList.separated(
92
+
itemCount: itemCount,
93
+
itemBuilder: gridItemBuilder,
94
+
separatorBuilder: (_, _) => const SizedBox(height: 12),
67
95
),
68
96
),
69
97
if (isLoadingMore)
+1
-1
lib/features/feed/presentation/widgets/post_card_with_actions.dart
+1
-1
lib/features/feed/presentation/widgets/post_card_with_actions.dart
···
146
146
onLongPressSave: () => unawaited(_onToggleSave(context)),
147
147
onCloudSave: () => unawaited(_onCloudSave(context)),
148
148
onCloudUnsave: () => unawaited(_onCloudUnsave(context)),
149
-
showCounts: variant == PostCardVariant.linear,
149
+
showCounts: true,
150
150
);
151
151
},
152
152
);
+13
-9
test/features/feed/presentation/home_feed_screen_test.dart
+13
-9
test/features/feed/presentation/home_feed_screen_test.dart
···
75
75
76
76
group('FeedLayoutView — grid architecture', () {
77
77
testWidgets('shows SliverGrid when architecture is grid', (tester) async {
78
-
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid));
78
+
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid, screenWidth: 720));
79
79
expect(find.byType(SliverGrid), findsOneWidget);
80
80
expect(find.byType(CustomScrollView), findsOneWidget);
81
81
});
···
89
89
testWidgets('uses 1 column at width < 600', (tester) async {
90
90
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid, screenWidth: 400));
91
91
92
-
final grid = tester.widget<SliverGrid>(find.byType(SliverGrid));
93
-
final delegate = grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
94
-
expect(delegate.crossAxisCount, 1);
92
+
expect(find.byType(SliverGrid), findsNothing);
93
+
expect(find.byType(SliverList), findsOneWidget);
94
+
});
95
+
96
+
testWidgets('uses tighter single-column padding at phone widths', (tester) async {
97
+
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid, screenWidth: 400));
98
+
99
+
final padding = tester.widget<SliverPadding>(find.byType(SliverPadding));
100
+
expect(padding.padding, const EdgeInsets.fromLTRB(12, 8, 12, 12));
95
101
});
96
102
97
103
testWidgets('uses 2 columns at width 600–839', (tester) async {
···
119
125
});
120
126
121
127
testWidgets('allocates extra height beyond the square media region', (tester) async {
122
-
const screenWidth = 400.0;
123
-
124
-
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid, screenWidth: screenWidth));
128
+
await tester.pumpWidget(_buildSubject(architecture: FeedArchitecture.grid, screenWidth: 720));
125
129
126
130
final grid = tester.widget<SliverGrid>(find.byType(SliverGrid));
127
131
final delegate = grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
128
-
const tileWidth = screenWidth;
132
+
const tileWidth = (720.0 - 1.0) / 2;
129
133
130
134
expect(delegate.mainAxisExtent, isNotNull);
131
135
expect(delegate.mainAxisExtent!, greaterThan(tileWidth + 100));
···
168
172
169
173
await tester.pumpWidget(
170
174
MediaQuery(
171
-
data: const MediaQueryData(size: Size(400, 800)),
175
+
data: const MediaQueryData(size: Size(720, 800)),
172
176
child: MaterialApp(
173
177
home: Scaffold(
174
178
body: BlocProvider<SettingsCubit>.value(