TabBar mit Dart/Flutter?
Hallo bin gerade dabei eine App mit Flutter zu programmieren und wollte gerade eine TabBar machen, jedoch funktioniert es nicht. Also ich bekomme es hin das sie angezeigt wird, aber sobald ich das einbaue das pro Tab eine andere Seite angezeigt wird, wird mir die Tabbar 5 mal angezeigt. Kann mir jemand helfen und sagen was das Problem ist.
Hier mein Code:
class Uebersicht extends StatelessWidget {
const Uebersicht({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
title: Text("Übersicht"),
bottom: TabBar(
tabs: [
Tab(text: 'Home', icon: Icon(Icons.home)),
Tab(text: 'Videos', icon: Icon(Icons.article_outlined)),
Tab(text: 'Bilder', icon: Icon(Icons.add_call)),
Tab(text: 'About', icon: Icon(Icons.backpack_outlined)),
],
),
),
drawer: Sidebar(),
body: TabBarView(
children: [
Uebersicht(),
Videos(),
Bilder(),
About(),
],
),
),
);
}
Main.dart
class ApoSys extends StatelessWidget {
const ApoSys({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ApoSys-Notdienst System für Apotheken',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Uebersicht(),
routes: {
'home': (context) => Uebersicht(),
'apotheken': (context) => Apotheken(),
'bezirk_melk': (context) => Bezirk_Melk(),
'bezirk_amstetten': (context) => Bezirk_Amstetten(),
'bezirk_scheibbs': (context) => Bezirk_Scheibbs(),
'kalender': (context) => Kalender(),
'notdienst': (context) => Notdienst(),
'notrufe': (context) => Notrufe(),
'videos': (context) => Videos(),
'bilder': (context) => Bilder(),
'about': (context) => About(),
},
);
}
}
Die Widget für Videos, Bilder und About existieren, es funktioniert auch das die Seiten angezeigt werden, jedoch wird wie beschrieben die TabBar 6 mal angezeigt.
Danke für die Antworten im Vorraus!
1 Antwort
Dein erstes Child ist ja auch Uebersicht() und damit zeigst du den TabController im TabController im … an. Das kann so nicht funktionieren und du musst als erste View im Tab was anders einsetzen.
Uebersicht ist dein TabController. Im ersten Tab musst du aber eine andere View wie bspw. Home anzegen.
Wie würde das aussehen, entschuldige steh gerade am Schlauch
Na ist doch eigentlich ganz klar. Du hast die View Uebersicht, die gleichzeitig der TabController ist. Dieser TabController zeigt wiederum verschiedene Views an. Der erste Tab ist dabei die View, die gleich beim Start angezeigt wird. Als erste View zeigst du aber wiederum Uebersicht an, also den TabController. Das geht so nicht und führt zu diesem rekursiven Tabs.
Du brauchst also noch eine weitere View, die im ersten Tab angezeigt wird, also bspw. eine Home View mit Logo und Begrüßung.
body: TabBarView(
children: [
Home(), // statt wieder Uebersicht
Videos(),
Bilder(),
About(),
],
),
Ah ok und in mein. Dart kann ich da bei home Übersicht stehen lassen
Ja nun hab ich das zu Home geändert und jz hab ich unter der Tabbar die appbar von home
Die tabbar hab ich in der uebericht.dart, dann eine eigene Datei für home und in main. Dart hab ich die routen definiert. Aber in main.dart muss man ja angeben was als erstes angezeigt werden soll mit den home key wort
Aber kann man die TabBar auf allen Seiten sichtbar machen oder ist sie nur auf der ersten Seite sichtbar bzw auf der Seite wo man den Code hält reinschreibt
Wenn du schon eine Home View hast, die was anderes zeigt, dann musst du deine neue View halt anders nennen. Versuche doch mal den Knoten zu lösen und nachzuvollziehen, was da genau abläuft. Schreib es am einfachsten mal so:
body: TabBarView(
children: [
Text('Willkommen bei der App'),
Videos(),
Bilder(),
About(),
],
),
Wie sieht das denn dann in der App aus?
Also in der Tabbar View statt Übersicht was anderes. Aber Übersicht soll die erste Seite sein wenn man die App öffnet