Switch to material 3

lib/app.dart

@@ -1,9 +1,9 @@
-/// Defines any global app configuration. 
-/// 
+/// Defines any global app configuration.
+///
 /// Usually this page is reserved for theming, navigation, and startup logic.
-/// 
-/// This library is the final touch that ties the app together, so it may depend on any other 
-/// library (except for main.dart).  
+///
+/// This library is the final touch that ties the app together, so it may depend on any other
+/// library (except for main.dart).
 library app;
 
 import "package:flutter/material.dart";
@@ -14,7 +14,10 @@ import "package:rover_dashboard/widgets.dart";
 /// The classic Binghamton green.
 const binghamtonGreen = Color(0xff005943);
 
-/// The main class for the app. 
+/// An accent color for [binghamtonGreen].
+const secondaryColor = Color(0xff404F48);
+
+/// The main class for the app.
 class RoverControlDashboard extends ReusableReactiveWidget<SettingsModel> {
   /// Creates the main app.
   RoverControlDashboard() : super(models.settings);
@@ -26,20 +29,32 @@ class RoverControlDashboard extends ReusableReactiveWidget<SettingsModel> {
     debugShowCheckedModeBanner: false,
     themeMode: models.isReady ? model.dashboard.themeMode : ThemeMode.system,
     theme: ThemeData(
-      useMaterial3: false,
-      colorScheme: const ColorScheme.light(
-        primary: binghamtonGreen,
-        secondary: binghamtonGreen,
+      colorScheme: ColorScheme.fromSeed(
+        seedColor: binghamtonGreen,
+        secondary: secondaryColor,
       ),
       appBarTheme: const AppBarTheme(
         backgroundColor: binghamtonGreen,
         foregroundColor: Colors.white,
       ),
+      dropdownMenuTheme: const DropdownMenuThemeData(
+        textStyle: TextStyle(fontWeight: FontWeight.normal),
+      ),
     ),
-    darkTheme: ThemeData.from(
-      colorScheme: const ColorScheme.dark(
-        primary: binghamtonGreen,
-        secondary: binghamtonGreen,
+    darkTheme: ThemeData(
+      colorScheme: ColorScheme.fromSeed(
+        brightness: Brightness.dark,
+        seedColor: binghamtonGreen,
+        surface: const Color.fromRGBO(40, 40, 40, 1),
+        secondary: secondaryColor,
+        onSecondary: Colors.white,
+      ),
+      dropdownMenuTheme: const DropdownMenuThemeData(
+        textStyle: TextStyle(fontWeight: FontWeight.normal),
+      ),
+      appBarTheme: const AppBarTheme(
+        backgroundColor: binghamtonGreen,
+        foregroundColor: Colors.white,
       ),
     ),
     routes: {

lib/src/pages/arm.dart

@@ -229,7 +229,8 @@ class ArmPage extends ReactiveWidget<ArmModel> {
   Widget build(BuildContext context, ArmModel model) => Column(
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: [
-      Row(  // The header at the top
+      PageHeader(  // The header at the top
+        pageIndex: index,
         children: [
           const SizedBox(width: 8),
           Text("Arm Graphs", style: context.textTheme.headlineMedium),
@@ -254,9 +255,9 @@ class ArmPage extends ReactiveWidget<ArmModel> {
               child: Icon(Icons.sync),
             ),
           const SizedBox(width: 8),
-          ViewsSelector(index: index),
         ],
       ),
+      const SizedBox(height: 10),
       const Text(
         "Side View (click for IK)",
         textAlign: TextAlign.center,
@@ -267,12 +268,10 @@ class ArmPage extends ReactiveWidget<ArmModel> {
           letterSpacing: 1,
         ),
       ),
-      const SizedBox(height: 10),
       Expanded(
         child: Card(
           margin: const EdgeInsets.all(16),
           elevation: 16,
-          color: context.colorScheme.surfaceContainerHighest,
           child: MouseRegion(
             onHover: model.onHover,
             onExit: model.cancelIK,
@@ -302,7 +301,7 @@ class ArmPage extends ReactiveWidget<ArmModel> {
         child: Card(
           margin: const EdgeInsets.all(16),
           elevation: 16,
-          color: context.colorScheme.surfaceContainerHighest,
+          color: context.colorScheme.surfaceContainer,
           child: CustomPaint(
             painter: ArmPainterTop(swivelAngle: model.arm.base.currentAngle),
           ),

lib/src/pages/controller.dart

@@ -44,8 +44,8 @@ class ControllersPage extends ReactiveWidget<ControllersViewModel> {
   @override
   Widget build(BuildContext context, ControllersViewModel model) => Column(
     children: [
-      const SizedBox(height: 16),
-      Row(
+      PageHeader(
+        pageIndex: index,
         children: [
           const Spacer(),
           const Text("Controller: "),
@@ -74,7 +74,6 @@ class ControllersPage extends ReactiveWidget<ControllersViewModel> {
             child: const Text("Vibrate"),
           ),
           const Spacer(),
-          ViewsSelector(index: index),
         ],
       ),
       Expanded(

lib/src/pages/drive.dart

@@ -192,12 +192,16 @@ class DrivePage extends ReactiveWidget<PositionModel> {
 	Widget build(BuildContext context, PositionModel model) => Column(
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: [
-      Row(children: [  // The header at the top
-        const SizedBox(width: 8),
-        Text("Drive", style: context.textTheme.headlineMedium),
-        const Spacer(),
-        ViewsSelector(index: index),
-      ],),
+      PageHeader(
+        pageIndex: index,
+        children: [
+          // The header at the top
+          const SizedBox(width: 8),
+          Text("Drive", style: context.textTheme.headlineMedium),
+          const Spacer(),
+        ],
+      ),
+      const SizedBox(height: 4),
       Expanded(
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,

lib/src/pages/electrical.dart

@@ -102,22 +102,32 @@ class ElectricalPage extends ReactiveWidget<ElectricalModel> {
 	Widget build(BuildContext context, ElectricalModel model) => Column(
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: [
-      Row(children: [  // The header at the top
-        const SizedBox(width: 8),
-        Text("Electrical", style: context.textTheme.headlineMedium), 
-        const SizedBox(width: 12),
-        const Spacer(),
-        Text(model.axis ? "Horizontal" : "Vertical", style: context.textTheme.labelLarge),
-        const SizedBox(width: 12),
-        Switch(
-          value: model.axis,
-          onChanged: (bool value) => model.changeDirection(),
-        ),
-        const SizedBox(width: 8),
-        ElevatedButton.icon(icon: const Icon(Icons.clear), label: const Text("Clear all"), onPressed: model.clear),
-        const SizedBox(width: 8),
-        ViewsSelector(index: index),
-      ],),
+      PageHeader(
+        pageIndex: index,
+        children: [
+          // The header at the top
+          const SizedBox(width: 8),
+          Text("Electrical", style: context.textTheme.headlineMedium),
+          const SizedBox(width: 12),
+          const Spacer(),
+          Text(
+            model.axis ? "Horizontal" : "Vertical",
+            style: context.textTheme.labelLarge,
+          ),
+          const SizedBox(width: 12),
+          Switch(
+            value: model.axis,
+            onChanged: (bool value) => model.changeDirection(),
+          ),
+          const SizedBox(width: 8),
+          ElevatedButton.icon(
+            icon: const Icon(Icons.clear),
+            label: const Text("Clear all"),
+            onPressed: model.clear,
+          ),
+          const SizedBox(width: 8),
+        ],
+      ),
       if (model.axis) Expanded(child:
         Row(children: [
           for (final graph in _getGraphs(model))

lib/src/pages/home.dart

@@ -16,6 +16,8 @@ class SocketSwitcher extends ReusableReactiveWidget<Sockets> {
     value: model.rover,
     onChanged: model.setRover,
     focusNode: FocusNode(),
+    dropdownColor: context.colorScheme.secondary,
+    style: const TextStyle(color: Colors.white),
     items: [
       for (final type in RoverType.values) DropdownMenuItem(
         value: type,

lib/src/pages/rocks.dart

@@ -8,7 +8,7 @@ class RockModel with ChangeNotifier {
     const Rock(
       "Shale",
       "assets/Rocks_Minerals_Images/Shale.jpg",
-      "Has to be a carbonate-rich enviroment to cause dark coloring",
+      "Has to be a carbonate-rich environment to cause dark coloring",
     ),
     const Rock(
       "Mudstone",
@@ -18,7 +18,7 @@ class RockModel with ChangeNotifier {
      const Rock(
       "Limestone",
       "assets/Rocks_Minerals_Images/Limestone.jpg",
-      "Off white-gray, shallow marine enviroments, could contain fossils, chalky \n   \u2022 oolite, Chalk, Dense Limestone, Crystalline Limestone, Coquina, Micrite, Tavertine",
+      "Off white-gray, shallow marine environments, could contain fossils, chalky \n   \u2022 oolite, Chalk, Dense Limestone, Crystalline Limestone, Coquina, Micrite, Tavertine",
     ),
     const Rock(
       "Dolomites/Dolostones",
@@ -48,7 +48,7 @@ class RockModel with ChangeNotifier {
     const Rock(
       "Carbonates",
       "assets/Rocks_Minerals_Images/Carbonate.jpg",
-      "Precipitate from water \n   \u2022 Fizzies when hydrochloric acid is placed on it",
+      "Precipitate from water \n   \u2022 Fizzles when hydrochloric acid is placed on it",
     ),
     const Rock(
       "Hematite",
@@ -92,10 +92,16 @@ class RockModel with ChangeNotifier {
 
   /// Filters the [rocks] by the [query] and saves it to [filteredRocks].
   void search(String input) => notifyListeners();
+
+  /// Clears the search query.
+  void clear() {
+    controller.clear();
+    search("");
+  }
 }
 
 /// Contains data and knowledge about a specific rock type.
-class Rock{
+class Rock {
   /// The name of the rock.
   final String name;
 
@@ -121,30 +127,42 @@ class RocksPage extends ReactiveWidget<RockModel> {
   const RocksPage({required this.index});
 
   @override
-  Widget build(BuildContext context, RockModel model) => ListView(
-    shrinkWrap: true,
+  Widget build(BuildContext context, RockModel model) => Column(
     children: [
-      Row(
+      PageHeader(
+        pageIndex: index,
         children: [
-          Text(
-            "Rocks & Minerals",
-            style: context.textTheme.headlineMedium,
+          Padding(
+            padding: const EdgeInsets.all(4),
+            child: Text(
+              "Rocks & Minerals",
+              style: context.textTheme.headlineMedium,
+            ),
           ),
           const Spacer(),
-          ViewsSelector(index: index),
         ],
       ),
-      Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
-        child: SearchBar(
-          hintText: "Search for a rock or characteristic",
-          hintStyle: WidgetStatePropertyAll(context.textTheme.bodyMedium),
-          controller: model.controller,
-          onChanged: model.search,
+      Expanded(
+        child: ListView(
+          shrinkWrap: true,
+          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+          children: [
+            SearchBar(
+              hintText: "Search for a rock or characteristic",
+              hintStyle: WidgetStatePropertyAll(context.textTheme.bodyMedium),
+              controller: model.controller,
+              onChanged: model.search,
+              backgroundColor: WidgetStatePropertyAll(context.colorScheme.surfaceBright),
+              trailing: [
+                IconButton(onPressed: model.clear, icon: const Icon(Icons.clear)),
+              ],
+            ),
+            const SizedBox(height: 12),
+            for (final rock in model.filteredRocks)
+              RockWidget(rock),
+          ],
         ),
       ),
-      for (final rock in model.filteredRocks)
-        RockWidget(rock),
     ],
   );
 }
@@ -157,42 +175,28 @@ class RockWidget extends StatelessWidget {
   const RockWidget(this.rock);
 
   @override
-  Widget build(BuildContext context) => Row(
-    children: <Widget>[
-      Expanded(
-        child: Container(
-          decoration: BoxDecoration(
-            border: Border.all(
-                color: const Color.fromARGB(255, 212, 218, 228),),
-          ),
-          padding: const EdgeInsets.all(40),
-          child: Text(rock.name),
-        ),
+  Widget build(BuildContext context) => Container(
+    decoration: BoxDecoration(
+      border: Border.all(
+        color: context.colorScheme.onSurface,
       ),
-      Expanded(
-        child: Container(
-          decoration: BoxDecoration(
-            border: Border.all(
-                color: const Color.fromARGB(255, 212, 218, 228),),
-            image:  DecorationImage(
-              image: AssetImage(rock.image),
-              fit: BoxFit.contain,
-            ),
-          ),
-          padding: const EdgeInsets.all(50),
+    ),
+    child: Row(
+      children: <Widget>[
+        Expanded(
+          child: Text(rock.name, textAlign: TextAlign.center,),
         ),
-      ),
-      Expanded(
-        flex: 3,
-        child: Container(
-          decoration: BoxDecoration(
-            border: Border.all(
-                color: const Color.fromARGB(255, 212, 218, 228),),
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.all(10),
+            child: Image.asset(rock.image),
           ),
-          padding: const EdgeInsets.all(40),
+        ),
+        Expanded(
+          flex: 3,
           child: Text(rock.description),
         ),
-      ),
-    ],
+      ],
+    ),
   );
 }