selfprivacy.org.app/lib/ui/components/progress_bar/progress_bar.dart
aliaksei tratseuski dd81053f42 refactor(UI): Rewrite onboarding page
rewrote OnboardingPage:
* decomposed into separate widgets
* now content stays centered on wide screens (set so width won't expand further than 480px)
* pageController is now properly disposed
* added some more code changes to
    * main (error widget builder)
    * brand_header (centerTitle instead of empty actions list)
    * console_page (listener callback fix, used gaps instead of SizedBox'es, added keys to list items)
    * service_page (just cleaner build method)
	* removed some dead code

Co-authored-by: Aliaksei Tratseuski <aliaksei.tratseuski@gmail.com>
Reviewed-on: https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org.app/pulls/444
Co-authored-by: aliaksei tratseuski <misterfourtytwo@noreply.git.selfprivacy.org>
Co-committed-by: aliaksei tratseuski <misterfourtytwo@noreply.git.selfprivacy.org>
2024-02-08 13:59:52 +02:00

59 lines
1.6 KiB
Dart

import 'package:flutter/material.dart';
class ProgressBar extends StatefulWidget {
const ProgressBar({
required this.steps,
required this.activeIndex,
super.key,
});
final int activeIndex;
final List<String> steps;
@override
State<ProgressBar> createState() => _ProgressBarState();
}
class _ProgressBarState extends State<ProgressBar> {
@override
Widget build(final BuildContext context) {
final double progress =
1 / widget.steps.length * (widget.activeIndex + 0.3);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: const Color(0xFFDDDDDD),
borderRadius: BorderRadius.circular(5),
),
child: LayoutBuilder(
builder: (final _, final constraints) => AnimatedContainer(
width: constraints.maxWidth * progress,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.surfaceVariant,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).colorScheme.primary,
Theme.of(context).colorScheme.secondary,
],
),
),
duration: const Duration(
milliseconds: 300,
),
),
),
),
],
);
}
}