[READ ONLY MIRROR] Open Source TikTok alternative built on AT Protocol
github.com/sprksocial/client
flutter
atproto
video
dart
style: small design system tweaks
+27
-162
-94
lib/src/core/design_system/components/atoms/toggles/toggle.dart
-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
+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
+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
-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
+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
-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
-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
-
}