selfprivacy.org.app/lib/ui/components/progress_bar/progress_bar.dart

141 lines
3.9 KiB
Dart
Raw Normal View History

2020-12-30 14:13:25 +00:00
import 'package:flutter/material.dart';
import 'package:selfprivacy/config/brand_colors.dart';
import 'package:selfprivacy/config/text_themes.dart';
import 'package:selfprivacy/logic/cubit/app_settings/app_settings_cubit.dart';
import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
class ProgressBar extends StatefulWidget {
2022-05-24 18:55:39 +00:00
const ProgressBar({
2021-03-15 15:39:44 +00:00
required this.steps,
required this.activeIndex,
final super.key,
2022-06-05 19:36:32 +00:00
});
2020-12-30 14:13:25 +00:00
final int activeIndex;
final List<String> steps;
@override
State<ProgressBar> createState() => _ProgressBarState();
2020-12-30 14:13:25 +00:00
}
class _ProgressBarState extends State<ProgressBar> {
@override
2022-06-05 19:36:32 +00:00
Widget build(final BuildContext context) {
final double progress =
1 / widget.steps.length * (widget.activeIndex + 0.3);
2022-06-05 19:36:32 +00:00
final bool isDark = context.watch<AppSettingsCubit>().state.isDarkModeOn;
final TextStyle style =
isDark ? progressTextStyleDark : progressTextStyleLight;
2021-01-06 17:35:57 +00:00
2022-06-05 19:36:32 +00:00
final Iterable<Container> allSteps = widget.steps.asMap().map(
(final i, final step) {
final Container value = _stepTitle(index: i, style: style, step: step);
2021-01-06 17:35:57 +00:00
return MapEntry(i, value);
},
).values;
2022-06-05 19:36:32 +00:00
final List<Widget> odd = [];
final List<Widget> even = [];
2021-01-06 17:35:57 +00:00
2022-06-05 19:36:32 +00:00
int i = 0;
for (final Container step in allSteps) {
2021-01-06 17:35:57 +00:00
if (i.isEven) {
even.add(step);
} else {
odd.add(step);
}
2021-02-03 19:51:07 +00:00
i++;
2021-01-06 17:35:57 +00:00
}
2021-02-17 16:20:09 +00:00
2021-03-31 11:37:39 +00:00
odd.insert(
0,
2022-05-24 18:55:39 +00:00
const SizedBox(
2021-03-31 11:37:39 +00:00
width: 10,
),
);
2021-06-20 21:08:52 +00:00
odd.add(
2022-05-24 18:55:39 +00:00
const SizedBox(
2021-06-20 21:08:52 +00:00
width: 20,
2021-03-31 11:37:39 +00:00
),
);
2020-12-30 14:13:25 +00:00
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
2021-01-06 17:35:57 +00:00
BrandText.h2('Progress'),
2022-05-24 18:55:39 +00:00
const SizedBox(height: 10),
2021-03-31 11:37:39 +00:00
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
2022-05-24 18:55:39 +00:00
children: even,
2021-03-31 11:37:39 +00:00
),
2022-05-24 18:55:39 +00:00
const SizedBox(height: 7),
2020-12-30 14:13:25 +00:00
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: BrandColors.gray4,
borderRadius: BorderRadius.circular(5),
),
child: LayoutBuilder(
2022-06-05 19:36:32 +00:00
builder: (final _, final constraints) => AnimatedContainer(
width: constraints.maxWidth * progress,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: BrandColors.stableGradientColors,
2020-12-30 14:13:25 +00:00
),
2022-06-05 19:36:32 +00:00
),
duration: const Duration(
milliseconds: 300,
),
),
2020-12-30 14:13:25 +00:00
),
2021-01-06 17:35:57 +00:00
),
2022-05-24 18:55:39 +00:00
const SizedBox(height: 5),
2021-01-06 17:35:57 +00:00
Row(
2021-03-31 11:37:39 +00:00
mainAxisAlignment: MainAxisAlignment.spaceBetween,
2022-05-24 18:55:39 +00:00
children: odd,
2021-01-06 17:35:57 +00:00
),
2020-12-30 14:13:25 +00:00
],
);
}
2021-01-06 17:35:57 +00:00
2021-03-31 11:37:39 +00:00
Container _stepTitle({
2022-06-05 19:36:32 +00:00
required final int index,
2021-03-15 15:39:44 +00:00
TextStyle? style,
2022-06-05 19:36:32 +00:00
final String? step,
2021-01-06 17:35:57 +00:00
}) {
2022-06-05 19:36:32 +00:00
final bool isActive = index == widget.activeIndex;
final bool checked = index < widget.activeIndex;
2021-01-06 17:35:57 +00:00
2021-03-15 15:39:44 +00:00
style = isActive ? style!.copyWith(fontWeight: FontWeight.w700) : style;
2021-03-31 11:37:39 +00:00
return Container(
2022-05-24 18:55:39 +00:00
padding: const EdgeInsets.only(left: 10),
2021-03-31 11:37:39 +00:00
height: 20,
alignment: Alignment.center,
2021-01-06 17:35:57 +00:00
child: RichText(
2021-03-31 11:37:39 +00:00
textAlign: TextAlign.justify,
2021-01-06 17:35:57 +00:00
text: TextSpan(
style: progressTextStyleLight,
children: [
if (checked)
const WidgetSpan(
child: Padding(
padding: EdgeInsets.only(bottom: 2, right: 2),
child: Icon(BrandIcons.check, size: 11),
),
)
else
TextSpan(text: '${index + 1}.', style: style),
2021-01-06 17:35:57 +00:00
TextSpan(text: step, style: style)
],
),
),
);
}
2020-12-30 14:13:25 +00:00
}