💄 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/main.dart
+++ b/lib/main.dart
@ -0,0 +1,114 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:gomix_flutter/mixing_tab.dart';
+import 'package:gomix_flutter/ports_tab.dart';
+import 'package:gomix_flutter/settings_tab.dart';
+
+void main() => runApp(const GoMixClient());
+
+class GoMixClient extends StatelessWidget {
+  const GoMixClient({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.greenAccent),
+        sliderTheme: const SliderThemeData(
+          showValueIndicator: ShowValueIndicator.always,
+        ),
+      ),
+      // darkTheme: ThemeData(
+      //     useMaterial3: true,
+      //     colorScheme: ColorScheme.fromSeed(
+      //         seedColor: Colors.greenAccent, brightness: Brightness.dark)),
+      home: const GoMixHome(),
+    );
+  }
+}
+
+class GoMixHome extends StatefulWidget {
+  const GoMixHome({super.key});
+
+  @override
+  State<GoMixHome> createState() => _GoMixHomeState();
+}
+
+class _GoMixHomeState extends State<GoMixHome> {
+  int currentPageIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    return Scaffold(
+      bottomNavigationBar: NavigationBar(
+        onDestinationSelected: (int index) {
+          setState(() {
+            currentPageIndex = index;
+          });
+        },
+        selectedIndex: currentPageIndex,
+        indicatorColor: theme.colorScheme.secondaryContainer,
+        destinations: <Widget>[
+          NavigationDestination(
+            icon: Transform.rotate(
+                angle: 90 * pi / 180, child: const Icon(Icons.tune_outlined)),
+            label: 'Mixing',
+          ),
+          const NavigationDestination(
+            icon: Icon(Icons.settings_input_component_outlined),
+            label: 'Ports',
+          ),
+          const NavigationDestination(
+            icon: Icon(Icons.settings_outlined),
+            label: 'Settings',
+          ),
+        ],
+      ),
+      appBar: AppBar(
+        title: const Text('go-mix Audio Mixer'),
+        centerTitle: true,
+        leading: IconButton(
+          icon: const Icon(Icons.check_circle_outline),
+          color: theme.colorScheme.inversePrimary,
+          tooltip: 'Connected',
+          onPressed: () {},
+        ),
+        actions: <Widget>[
+          Padding(
+            padding: const EdgeInsets.all(8),
+            child: IconButton(
+              icon: const Icon(Icons.supervised_user_circle_outlined),
+              tooltip: 'Select Server',
+              onPressed: () {
+                Navigator.push(context, MaterialPageRoute<void>(
+                  builder: (BuildContext context) {
+                    return Scaffold(
+                      appBar: AppBar(
+                        title: const Text('Next page'),
+                      ),
+                      body: const Center(
+                        child: Text(
+                          'This is the next page',
+                          style: TextStyle(fontSize: 24),
+                        ),
+                      ),
+                    );
+                  },
+                ));
+              },
+            ),
+          ),
+        ],
+      ),
+      body: <Widget>[
+        const MixingTab(),
+        const PortsTab(),
+        const SettingsTab(),
+      ][currentPageIndex],
+    );
+  }
+}