So ändern Sie hintergrund-Farbe der TabBar-ohne änderung der AppBar in flattern?

So ändern Sie hintergrund-Farbe der TabBar-ohne änderung der AppBar in flattern?
Die TabBar nicht über eine BG proprety, gibt es eine Abhilfe?

InformationsquelleAutor amater | 2018-05-28
  1. 16

    Können Sie ändern die Farbe der TabBar indem Sie das Design ändern primaryColor so:

    return new MaterialApp(
      theme: new ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar
        accentColor: Colors.cyan[600],
      ),
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              indicatorColor: Colors.lime,
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );

    Wenn Sie es nicht verwenden in einem AppBar, könnten Sie wickeln die TabBar in einem Material-widget und legen Sie das color-Attribut, so:

    class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
        ),
        body: new DefaultTabController(
          length: 3,
          child: new Column(
            children: <Widget>[
              new Container(
                constraints: BoxConstraints(maxHeight: 150.0),
                child: new Material(
                  color: Colors.indigo,
                  child: new TabBar(
                    tabs: [
                      new Tab(icon: new Icon(Icons.directions_car)),
                      new Tab(icon: new Icon(Icons.directions_transit)),
                      new Tab(icon: new Icon(Icons.directions_bike)),
                    ],
                  ),
                ),
              ),
              new Expanded(
                child: new TabBarView(
                  children: [
                    new Icon(Icons.directions_car),
                    new Icon(Icons.directions_transit),
                    new Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    • Es verändert die ganze AppBar nicht onlye TabBar, ich brauche nur die TabBar
    • Ich fügte hinzu, ein funktionierendes Beispiel.
    • danke Kumpel, das hat für mich
    • thanku, arbeitete wie ein Charme 🙂
    InformationsquelleAutor Antonino Cacace
  2. 9

    Erstellen Sie ein einfaches Widget für das, kann nicht einfacher sein:

    class ColoredTabBar extends Container implements PreferredSizeWidget {
  ColoredTabBar(this.color, this.tabBar);

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
    color: color,
    child: tabBar,
  );
}
    • Dieser arbeitete für das ändern der Farbe der tab-Leiste. Ich hatte gehofft, etwas zu finden, wo die tab-Leiste hat eine Höhe von 0 und ist transparent.
    • Sehr geschätzt wird. Dies ist eine perfekte Lösung.
    • Die Wellen-Effekte, wenn der Benutzer klickt auf die Tabs funktionieren nicht mehr mit dieser Lösung niemand weiß, warum?
    • wickeln Sie die tabBar Feld oben in ein Material - widget und stellen Sie Typ auf MaterialType.transparency
    InformationsquelleAutor Noor Dawod
  3. 1

    Ändern Sie Hintergrund-Farbe der TabBar-in-Flattern..

    Verwenden Sie einfach TabBar im Körper des Gerüstes, wickeln Sie es mit Spalte Widget, so dass Sie verwenden können beide ohne Problem. Wrap-TabBar-Container-widget zu ändern, die Registerkarte Farbe.
    Auf diese Weise können Sie ändern die Farbe der Tab-Leiste im Flattern.

    Hier ist der Beispielcode...

       Scaffold(
       appBar: AppBar(
       backgroundColor: const Color(0xFF3baee7),
       title: Text("Jobs"),
        ),
      body: Column(      //Column
         children: <Widget>[
          Container(
            color: Colors.deepOrangeAccent,        //Tab Bar color change
             child: TabBar(           //TabBar
             controller: tabController,
             unselectedLabelColor: Colors.lightBlue[100],
             labelColor: const Color(0xFF3baee7),
             indicatorWeight: 2,
             indicatorColor: Colors.blue[100],
             tabs: <Widget>[               
               Tab(
                 text: "All Jobs",
               ),
               Tab(
                 text: "Most Recent",
               ),
               Tab(
                 text: "Saved Jobs",
               )
             ],
           ),
         ),
         Expanded(
             flex: 3,
             child: TabBarView(         //Tab Bar View
             physics: BouncingScrollPhysics(),
             controller: tabController,
             children: <Widget>[AllJobScreen(), AllJobScreen(), AllJobScreen()],
               ),
            ),
         ],
    ),
  );
    • Dies ist die richtige Antwort , warum Sie Ihre Stimme nach unten...
    • Ich habe die oben genannten Methode, wickelte die Tabbar-Containers in einem container zu haben, die anderen tabbar als Grau, und legen Sie die tabbar-Anzeige-Farbe, so dass es zeigt, wie die gewählte Farbe.
    InformationsquelleAutor Sumit Singh
Schreibe einen Kommentar