AppBar Version 1

First Version:
 - home icon (left)
 - placeholder (left)
 - flags (right)

lib/main.dart

@@ -20,24 +20,22 @@ class MyApp extends StatelessWidget {
         )
       ],
       child: MaterialApp(
-        theme: ThemeData(
+          theme: ThemeData(
-          colorScheme: const ColorScheme(
+            colorScheme: const ColorScheme(
-            primary: Color.fromRGBO(236, 92, 61, 1),
+                primary: Color.fromRGBO(236, 92, 61, 1),
-            onPrimary: Color.fromRGBO(240, 240, 240, 1),
+                onPrimary: Color.fromRGBO(240, 240, 240, 1),
-            secondary: Color.fromRGBO(203, 203, 203, 1),
+                secondary: Color.fromRGBO(203, 203, 203, 1),
-            onSecondary: Color.fromRGBO(60, 60, 60, 1),
+                onSecondary: Color.fromRGBO(60, 60, 60, 1),
-            error: Colors.red,
+                error: Colors.red,
-            onError: Colors.white,
+                onError: Colors.white,
-            surface: Colors.white,
+                surface: Colors.white,
-            onSurface: Color.fromRGBO(60, 60, 60, 1),
+                onSurface: Color.fromRGBO(60, 60, 60, 1),
-            brightness: Brightness.light,
+                brightness: Brightness.light,
-            tertiary: Color.fromRGBO(251, 216, 17, 0),
+                tertiary: Color.fromRGBO(251, 216, 17, 0),
-            onTertiary: Color.fromRGBO(60, 60, 60, 1)
+                onTertiary: Color.fromRGBO(60, 60, 60, 1)),
+            useMaterial3: true,
           ),
-          useMaterial3: true,
+          home: const MyHome()),
-        ),
-        home: const MyHome()
-      ),
     );
   }
 }
@@ -48,36 +46,102 @@ class MyHome extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(
+            Icons.home,
+            size: 36,
+            color: Theme.of(context).colorScheme.onPrimary,
+          ),
+          onPressed: () {
+            // Aktion für diesen Button
+          },
+        ),
+        title: Container(
+          height: 40,
+          decoration: BoxDecoration(
+            color: Theme.of(context)
+                .colorScheme
+                .primaryContainer, // Hintergrundfarbe des Textfelds
+            borderRadius: BorderRadius.circular(15),
+          ),
+          alignment: Alignment.centerLeft,
+          child: Text(
+            "Placeholder",
+            style: TextStyle(
+              color: Theme.of(context).colorScheme.onPrimary,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+        backgroundColor: Theme.of(context).colorScheme.primary,
+        actions: [
+          IconButton(
+            icon: Image.asset(
+              'assets/flags/de.png',
+              width: 34,
+              height: 24,
+              fit: BoxFit.cover,
+            ), // Erster Button rechts
+            onPressed: () {
+              // Aktion für diesen Button
+            },
+          ),
+          IconButton(
+            icon: Image.asset(
+              'assets/flags/fr.png',
+              width: 34,
+              height: 24,
+              fit: BoxFit.cover,
+            ), // Zweiter Button rechts
+            onPressed: () {
+              // Aktion für diesen Button
+            },
+          ),
+          IconButton(
+            icon: Image.asset(
+              'assets/flags/en.png',
+              width: 34,
+              height: 24,
+              fit: BoxFit.cover,
+            ), // Dritter Button rechts
+            onPressed: () {
+              // Aktion für diesen Button
+            },
+          ),
+        ],
+      ),
       body: Container(),
       bottomNavigationBar: GNav(
-          onTabChange: (index) {
+        onTabChange: (index) {},
-
+        gap: 8,
-          },
+        backgroundColor: Theme.of(context).colorScheme.secondary,
-          gap: 8,
+        color: Theme.of(context).colorScheme.onSurface,
-          backgroundColor: Theme.of(context).colorScheme.secondary,
+        activeColor: Theme.of(context).colorScheme.onPrimary,
-          color: Theme.of(context).colorScheme.onSurface,
+        tabBackgroundColor: Theme.of(context).colorScheme.primary,
-          activeColor: Theme.of(context).colorScheme.onPrimary,
+        tabs: const [
-          tabBackgroundColor: Theme.of(context).colorScheme.primary,
+          GButton(
-          tabs: const [
+            icon: Icons.food_bank,
-            GButton(
+            text: "Essen",
-              icon: Icons.food_bank,
+          ),
-              text: "Essen",
+          GButton(
-            ),GButton(
+            icon: Icons.room,
-              icon: Icons.room,
+            text: "Ambiente",
-              text: "Ambiente",
+          ),
-            ),GButton(
+          GButton(
-              icon: Icons.person,
+            icon: Icons.person,
-              text: "Service",
+            text: "Service",
-            ),GButton(
+          ),
-              icon: Icons.question_mark,
+          GButton(
-              text: "Verschläge",
+            icon: Icons.question_mark,
-            ), GButton(
+            text: "Verschläge",
-              icon: Icons.add_rounded,
+          ),
-              text: "Verbesserungen",
+          GButton(
-            ),
+            icon: Icons.add_rounded,
-          ],
+            text: "Verbesserungen",
-        ),
+          ),
+        ],
+      ),
     );
   }
 }

pubspec.yaml

@@ -54,7 +54,8 @@ dev_dependencies:
 
 # The following section is specific to Flutter packages.
 flutter:
-
+  assets:
+    - assets/flags/
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.