[READ ONLY MIRROR] Open Source TikTok alternative built on AT Protocol
github.com/sprksocial/client
flutter
atproto
video
dart
better input for description on review pages (#63)
melhorzin ne
authored by
Davi Rodrigues
and committed by
GitHub
fdd26fbe
da7bd407
+104
-41
+52
-20
lib/src/features/posting/ui/pages/image_review_page.dart
+52
-20
lib/src/features/posting/ui/pages/image_review_page.dart
···
284
284
),
285
285
),
286
286
const SizedBox(height: 20),
287
-
Container(
288
-
padding: const EdgeInsets.all(12),
289
-
decoration: BoxDecoration(
290
-
color: Theme.of(context).colorScheme.surface,
291
-
borderRadius: BorderRadius.circular(8),
292
-
),
293
-
child: TextField(
294
-
controller: _descriptionController,
295
-
style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
296
-
maxLines: 5,
297
-
maxLength: 300,
298
-
decoration: InputDecoration(
299
-
hintText: 'Add a description... (optional)',
300
-
hintStyle: TextStyle(color: Theme.of(context).colorScheme.onSurface.withAlpha(100)),
301
-
border: InputBorder.none,
302
-
contentPadding: EdgeInsets.zero,
303
-
isDense: true,
304
-
counterText: '',
305
-
),
306
-
),
287
+
// Description input with character count
288
+
Builder(
289
+
builder: (context) {
290
+
final theme = Theme.of(context);
291
+
final textLength = _descriptionController.text.runes.length;
292
+
293
+
return Column(
294
+
crossAxisAlignment: CrossAxisAlignment.start,
295
+
children: [
296
+
Material(
297
+
elevation: 0,
298
+
color: Colors.transparent,
299
+
borderRadius: BorderRadius.circular(12),
300
+
child: TextField(
301
+
controller: _descriptionController,
302
+
maxLength: 300,
303
+
maxLines: 4,
304
+
style: theme.textTheme.bodyLarge?.copyWith(color: theme.colorScheme.onSurface),
305
+
decoration: InputDecoration(
306
+
hintText: 'Add a description... (optional)',
307
+
hintStyle: theme.textTheme.bodyLarge?.copyWith(color: theme.colorScheme.onSurfaceVariant),
308
+
border: OutlineInputBorder(
309
+
borderRadius: BorderRadius.circular(12),
310
+
borderSide: BorderSide(color: theme.colorScheme.outline, width: 1),
311
+
),
312
+
enabledBorder: OutlineInputBorder(
313
+
borderRadius: BorderRadius.circular(12),
314
+
borderSide: BorderSide(color: theme.colorScheme.outline, width: 1),
315
+
),
316
+
focusedBorder: OutlineInputBorder(
317
+
borderRadius: BorderRadius.circular(12),
318
+
borderSide: BorderSide(color: theme.colorScheme.primary, width: 2),
319
+
),
320
+
filled: true,
321
+
fillColor: theme.colorScheme.surfaceContainerHighest,
322
+
contentPadding: const EdgeInsets.all(16),
323
+
counterText: '',
324
+
),
325
+
onChanged: (_) => setState(() {}),
326
+
),
327
+
),
328
+
const SizedBox(height: 8),
329
+
Align(
330
+
alignment: Alignment.centerRight,
331
+
child: Text(
332
+
'$textLength/300',
333
+
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
334
+
),
335
+
),
336
+
],
337
+
);
338
+
},
307
339
),
308
340
const SizedBox(height: 20),
309
341
// Bluesky Cross-posting Switch
+52
-21
lib/src/features/posting/ui/pages/video_review_page.dart
+52
-21
lib/src/features/posting/ui/pages/video_review_page.dart
···
241
241
},
242
242
),
243
243
const SizedBox(height: 20),
244
-
// Description field
245
-
Container(
246
-
padding: const EdgeInsets.all(12),
247
-
decoration: BoxDecoration(
248
-
color: Theme.of(context).colorScheme.surface,
249
-
borderRadius: BorderRadius.circular(8),
250
-
),
251
-
child: TextField(
252
-
controller: _descriptionController,
253
-
style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
254
-
maxLines: 5,
255
-
maxLength: 300,
256
-
decoration: InputDecoration(
257
-
hintText: 'Add a description... (optional)',
258
-
hintStyle: TextStyle(color: Theme.of(context).colorScheme.onSurface.withAlpha(100)),
259
-
border: InputBorder.none,
260
-
contentPadding: EdgeInsets.zero,
261
-
isDense: true,
262
-
counterText: '',
263
-
),
264
-
),
244
+
// Description input with character count
245
+
Builder(
246
+
builder: (context) {
247
+
final theme = Theme.of(context);
248
+
final textLength = _descriptionController.text.runes.length;
249
+
250
+
return Column(
251
+
crossAxisAlignment: CrossAxisAlignment.start,
252
+
children: [
253
+
Material(
254
+
elevation: 0,
255
+
color: Colors.transparent,
256
+
borderRadius: BorderRadius.circular(12),
257
+
child: TextField(
258
+
controller: _descriptionController,
259
+
maxLength: 300,
260
+
maxLines: 4,
261
+
style: theme.textTheme.bodyLarge?.copyWith(color: theme.colorScheme.onSurface),
262
+
decoration: InputDecoration(
263
+
hintText: 'Add a description... (optional)',
264
+
hintStyle: theme.textTheme.bodyLarge?.copyWith(color: theme.colorScheme.onSurfaceVariant),
265
+
border: OutlineInputBorder(
266
+
borderRadius: BorderRadius.circular(12),
267
+
borderSide: BorderSide(color: theme.colorScheme.outline, width: 1),
268
+
),
269
+
enabledBorder: OutlineInputBorder(
270
+
borderRadius: BorderRadius.circular(12),
271
+
borderSide: BorderSide(color: theme.colorScheme.outline, width: 1),
272
+
),
273
+
focusedBorder: OutlineInputBorder(
274
+
borderRadius: BorderRadius.circular(12),
275
+
borderSide: BorderSide(color: theme.colorScheme.primary, width: 2),
276
+
),
277
+
filled: true,
278
+
fillColor: theme.colorScheme.surfaceContainerHighest,
279
+
contentPadding: const EdgeInsets.all(16),
280
+
counterText: '',
281
+
),
282
+
onChanged: (_) => setState(() {}),
283
+
),
284
+
),
285
+
const SizedBox(height: 8),
286
+
Align(
287
+
alignment: Alignment.centerRight,
288
+
child: Text(
289
+
'$textLength/300',
290
+
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
291
+
),
292
+
),
293
+
],
294
+
);
295
+
},
265
296
),
266
297
const SizedBox(height: 20),
267
298
// Bluesky Cross-posting Switch