[READ ONLY MIRROR] Open Source TikTok alternative built on AT Protocol github.com/sprksocial/client
flutter atproto video dart
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: small design system tweaks

+27 -162
-94
lib/src/core/design_system/components/atoms/toggles/toggle.dart
··· 1 - import 'dart:math'; 2 - import 'dart:ui'; 3 - import 'package:flutter/material.dart'; 4 - import 'package:spark/src/core/design_system/tokens/gradients.dart'; 5 - 6 - class Toggle extends StatelessWidget { 7 - const Toggle({ 8 - required this.value, 9 - required this.onChanged, 10 - super.key, 11 - }); 12 - 13 - final bool value; 14 - final ValueChanged<bool> onChanged; 15 - 16 - static const double _width = 44.73; 17 - static const double _height = 22.73; 18 - static const double _thumbSize = 18.73; 19 - static const Duration _animationDuration = Duration(milliseconds: 250); 20 - 21 - @override 22 - Widget build(BuildContext context) { 23 - return GestureDetector( 24 - onTap: () { 25 - onChanged(!value); 26 - }, 27 - child: AnimatedContainer( 28 - duration: _animationDuration, 29 - curve: Curves.easeInOut, 30 - width: _width, 31 - height: _height, 32 - padding: const EdgeInsets.all(2), 33 - decoration: value ? _activeTrackDecoration : _inactiveTrackDecoration, 34 - child: AnimatedAlign( 35 - duration: _animationDuration, 36 - curve: Curves.easeInOut, 37 - alignment: value ? Alignment.centerRight : Alignment.centerLeft, 38 - child: Thumb(thumbSize: _thumbSize, isActive: value), 39 - ), 40 - ), 41 - ); 42 - } 43 - 44 - static final BoxDecoration _activeTrackDecoration = BoxDecoration( 45 - borderRadius: BorderRadius.circular(100), 46 - gradient: const LinearGradient( 47 - transform: GradientRotation(64.15 * pi / 180), 48 - colors: [Color(0xFFFF97CD), Color(0xFFFF349D)], 49 - ), 50 - ); 51 - 52 - static final BoxDecoration _inactiveTrackDecoration = BoxDecoration( 53 - borderRadius: BorderRadius.circular(100), 54 - color: const Color.fromRGBO(255, 255, 255, 0.05), 55 - border: Border.all( 56 - color: const Color.fromRGBO(255, 255, 255, 0.15), 57 - ), 58 - ); 59 - } 60 - 61 - class Thumb extends StatelessWidget { 62 - const Thumb({ 63 - required double thumbSize, 64 - required this.isActive, 65 - super.key, 66 - }) : _thumbSize = thumbSize; 67 - 68 - final double _thumbSize; 69 - final bool isActive; 70 - 71 - @override 72 - Widget build(BuildContext context) { 73 - return Container( 74 - width: _thumbSize, 75 - height: _thumbSize, 76 - decoration: BoxDecoration( 77 - color: isActive ? Colors.white : Colors.white.withAlpha(128), 78 - shape: BoxShape.circle, 79 - ), 80 - child: ClipRRect( 81 - borderRadius: BorderRadius.circular(_thumbSize / 2), 82 - child: BackdropFilter( 83 - filter: ImageFilter.blur(sigmaX: 2.5, sigmaY: 2.5), 84 - child: Container( 85 - decoration: const BoxDecoration( 86 - shape: BoxShape.circle, 87 - gradient: AppGradients.glassStroke, 88 - ), 89 - ), 90 - ), 91 - ), 92 - ); 93 - } 94 - }
+24 -16
lib/src/core/design_system/components/molecules/known_interactions_bar.dart
··· 1 + import 'dart:ui'; 2 + 1 3 import 'package:flutter/material.dart'; 2 4 import 'package:gradient_borders/box_borders/gradient_box_border.dart'; 3 5 import 'package:spark/src/core/design_system/components/atoms/avatar_stack.dart'; ··· 83 85 84 86 @override 85 87 Widget build(BuildContext context) { 86 - return Container( 87 - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6), 88 - decoration: const BoxDecoration( 89 - color: Color(0x33FFFFFF), 90 - borderRadius: BorderRadius.all(Radius.circular(500)), 91 - border: GradientBoxBorder( 92 - gradient: AppGradients.glassStroke, 93 - width: 2, 88 + return ClipRRect( 89 + borderRadius: const BorderRadius.all(Radius.circular(500)), 90 + child: BackdropFilter( 91 + filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), 92 + child: Container( 93 + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6), 94 + decoration: const BoxDecoration( 95 + color: Color(0x33FFFFFF), 96 + borderRadius: BorderRadius.all(Radius.circular(500)), 97 + border: GradientBoxBorder( 98 + gradient: AppGradients.glassStroke, 99 + width: 2, 100 + ), 101 + ), 102 + child: Row( 103 + mainAxisSize: MainAxisSize.min, 104 + children: [ 105 + icon, 106 + const SizedBox(width: 6), 107 + AvatarStack(avatars: avatars), 108 + ], 109 + ), 94 110 ), 95 - ), 96 - child: Row( 97 - mainAxisSize: MainAxisSize.min, 98 - children: [ 99 - icon, 100 - const SizedBox(width: 6), 101 - AvatarStack(avatars: avatars), 102 - ], 103 111 ), 104 112 ); 105 113 }
+1 -2
lib/src/core/design_system/templates/image_review_page_template.dart
··· 4 4 import 'package:spark/src/core/design_system/components/atoms/buttons/app_leading_button.dart'; 5 5 import 'package:spark/src/core/design_system/components/atoms/buttons/long_button.dart'; 6 6 import 'package:spark/src/core/design_system/components/atoms/icons.dart'; 7 - import 'package:spark/src/core/design_system/components/atoms/toggles/toggle.dart'; 8 7 import 'package:spark/src/core/design_system/components/molecules/glass_input.dart'; 9 8 import 'package:spark/src/core/design_system/tokens/colors.dart'; 10 9 import 'package:spark/src/core/design_system/tokens/shapes.dart'; ··· 407 406 color: AppColors.greyWhite, 408 407 ), 409 408 ), 410 - trailing: Toggle(value: value, onChanged: onChanged), 409 + trailing: Switch(value: value, onChanged: onChanged), 411 410 onTap: () => onChanged(!value), 412 411 ), 413 412 ),
+1 -2
lib/src/core/design_system/templates/video_review_page_template.dart
··· 1 1 import 'package:flutter/material.dart'; 2 2 import 'package:spark/src/core/design_system/components/atoms/buttons/app_leading_button.dart'; 3 3 import 'package:spark/src/core/design_system/components/atoms/buttons/long_button.dart'; 4 - import 'package:spark/src/core/design_system/components/atoms/toggles/toggle.dart'; 5 4 import 'package:spark/src/core/design_system/components/molecules/glass_input.dart'; 6 5 import 'package:spark/src/core/design_system/tokens/colors.dart'; 7 6 import 'package:spark/src/core/design_system/tokens/shapes.dart'; ··· 251 250 color: AppColors.greyWhite, 252 251 ), 253 252 ), 254 - trailing: Toggle(value: value, onChanged: onChanged), 253 + trailing: Switch(value: value, onChanged: onChanged), 255 254 onTap: () => onChanged(!value), 256 255 ), 257 256 );
+1 -9
pubspec.lock
··· 347 347 url: "https://pub.dev" 348 348 source: hosted 349 349 version: "0.3.5+3" 350 - carousel_slider: 351 - dependency: "direct main" 352 - description: 353 - name: carousel_slider 354 - sha256: bcc61735345c9ab5cb81073896579e735f81e35fd588907a393143ea986be8ff 355 - url: "https://pub.dev" 356 - source: hosted 357 - version: "5.1.1" 358 350 cbor: 359 351 dependency: transitive 360 352 description: ··· 1870 1862 source: hosted 1871 1863 version: "1.0.1" 1872 1864 web_socket_channel: 1873 - dependency: "direct main" 1865 + dependency: transitive 1874 1866 description: 1875 1867 name: web_socket_channel 1876 1868 sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8
-2
pubspec.yaml
··· 23 23 bluesky: ^1.3.0 24 24 cached_network_image: ^3.3.1 25 25 camera: ^0.11.1 26 - carousel_slider: ^5.0.0 27 26 collection: ^1.19.1 28 27 cupertino_icons: ^1.0.8 29 28 fluentui_system_icons: ^1.1.273 ··· 67 66 synchronized: ^3.1.0 68 67 url_launcher: ^6.2.5 69 68 video_player: ^2.10.0 70 - web_socket_channel: ^3.0.3 71 69 72 70 # Overrides only needed until atproto.dart PR #2224 is merged 73 71 dependency_overrides:
-37
widgetbook/lib/atoms/toggle.dart
··· 1 - import 'package:flutter/material.dart'; 2 - import 'package:spark/src/core/design_system/components/atoms/toggles/toggle.dart'; 3 - import 'package:widgetbook/widgetbook.dart'; 4 - import 'package:widgetbook_annotation/widgetbook_annotation.dart'; 5 - 6 - @UseCase(name: 'interactive', type: Toggle) 7 - Widget buildToggleInteractiveUseCase(BuildContext context) { 8 - final initialValue = context.knobs.boolean( 9 - label: 'initial_value', 10 - initialValue: true, 11 - ); 12 - return _ToggleDemo(initialValue: initialValue); 13 - } 14 - 15 - class _ToggleDemo extends StatefulWidget { 16 - const _ToggleDemo({required this.initialValue}); 17 - final bool initialValue; 18 - @override 19 - State<_ToggleDemo> createState() => _ToggleDemoState(); 20 - } 21 - 22 - class _ToggleDemoState extends State<_ToggleDemo> { 23 - late bool value = widget.initialValue; 24 - 25 - @override 26 - Widget build(BuildContext context) { 27 - return Center( 28 - child: Toggle( 29 - value: value, 30 - onChanged: (v) { 31 - setState(() => value = v); 32 - print('Toggle changed: $v'); 33 - }, 34 - ), 35 - ); 36 - } 37 - }