💄 Start working on the UI

- Add bottom NavBar - Add top bar - Start working on the `Mixing` Tab
2024-02-25 19:36:49 +01:00
parent b0feaaaf98
commit 4a6155769c
5 changed files with 282 additions and 0 deletions
--- a/lib/mixing_card.dart
+++ b/lib/mixing_card.dart
@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+class MixingCard extends StatefulWidget {
+  final String name;
+  const MixingCard({super.key, this.name = "Unknown"});
+
+  @override
+  State<MixingCard> createState() => _MixingCardState();
+}
+
+class _MixingCardState extends State<MixingCard> {
+  double _sliderValue = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    var labelStyle = Theme.of(context)
+        .textTheme
+        .labelLarge
+        ?.apply(color: Theme.of(context).colorScheme.primary);
+    return Card(
+      margin: const EdgeInsets.all(0),
+      shadowColor: Colors.transparent,
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(left: 15, right: 15, top: 15),
+            child: Row(
+              children: [
+                Expanded(child: Text(widget.name, style: labelStyle)),
+                IconButton.filledTonal(
+                    isSelected: true,
+                    onPressed: () {},
+                    icon: const Icon(Icons.mic_off_outlined)),
+                const SizedBox(width: 5),
+                IconButton.outlined(
+                    isSelected: false,
+                    onPressed: () {},
+                    icon: const Icon(Icons.unfold_more))
+              ],
+            ),
+          ),
+          Transform.translate(
+            offset: Offset.fromDirection(0, 0),
+            child: SizedBox(
+              width: MediaQuery.of(context).size.width + 180,
+              child: Slider(
+                  value: _sliderValue,
+                  secondaryTrackValue: 1,
+                  min: 0,
+                  max: 4,
+                  label: _sliderValue.toStringAsFixed(2),
+                  onChanged: (val) {
+                    setState(() {
+                      _sliderValue = val;
+                    });
+                  }),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}