How To Change Tabbar Text Color In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

In this Google flutter code example we are going to learn how to change TabBar text color in Flutter.

How To Change Tabbar Text Color In Flutter Android App

Change Tabbar Text Color

Complete Code For Change Tabbar Text Color IN Flutter
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            body:ChangeTextColor(),
        ),
    );
  }
}

class ChangeTextColor extends StatefulWidget {
  @override
  ChangeTextColorState createState() {
    return new ChangeTextColorState();
  }
}

class ChangeTextColorState extends State<ChangeTextColor> {
  List<Color> _colors = [
    Colors.orange,
    Colors.lightGreen,
    Colors.pink,
    Colors.brown,
    Colors.indigo
  ];

  int _currentIndex = 0;
  _onChanged() {
    //update with a new color when the user taps button
    int _colorCount = _colors.length;

    setState(() {
      if (_currentIndex == _colorCount - 1) {
        _currentIndex = 0;
      } else {
        _currentIndex += 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text("Change Text Color Tabbar Example",style: TextStyle(color: Colors.black),),
          bottom: TabBar(
            indicatorColor: Colors.black,
            labelColor: _colors[_currentIndex],
            tabs: <Widget>[
              Tab(
                text: "First Tab",
              ),
              Tab(
                text: "Second Tab",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(
              child: SizedBox(
                width: 200,
                height: 50,
                child: RaisedButton(
                  onPressed: _onChanged,
                  child: Text("Change Color",),
                  color: Colors.white,
                ),
               )
            ),
            Center(
              child: SizedBox(
                width: 200,
                height: 50,
                child: RaisedButton(
                  onPressed: _onChanged,
                  child: Text("Change Color",),
                  color: Colors.white,
                ),
              )
            ),
          ],
        ),
      ),
    );
  }
}


 

Related Post