Есть ли способ иметь разноцветную панель вкладок во флаттере?

Question

Привет, я все еще новичок, чтобы трепетать и изучаю его около недели, сейчас я создаю приложение, которое организует средства для составления бюджета, я пытаюсь создать многоцветную панель вкладок, чтобы пользователи могли легко идентифицироватьих средства, я пытался искать по сети и читать вкладку документации, но все же не повезло, какие-либо советы?

~ edit

Что я пытаюсь добиться, это получить цвет фонакаждая панель вкладок совпадает с цветом фона скаффолда, цвет фона панели вкладок по умолчанию в настоящее время серый, он должен быть красным на первой вкладке, синим на второй вкладке, желтым на третьей вкладке.это возможно?

вот скриншот в эмуляторе: скриншот

вот пример моего кода:

/ main.dart

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
    home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }
}

/ FirstTab.dart

import 'package:flutter/material.dart';

class First extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.red
    );
  }
}

/ SecondTab.dart

import 'package:flutter/material.dart';

class Second extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.blue
    );
  }
}

/ ThirdTab.dart

import 'package:flutter/material.dart';

class Third extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.yellow
    );
  }
}

Answer 1

Да, можно попробовать это

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
      home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;
  int tabIndex =0 ;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          indicator: BoxDecoration(color: setColor(tabIndex)),
          onTap: (index){
            setState(() {
              tabIndex = index;
            });
          },
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }

  setColor(int tabIndex){
    if(tabIndex == 0){
      return Colors.red;
    }else if(tabIndex == 1){
      return Colors.blue;
    }else if(tabIndex == 2){
      return Colors.yellow;
    }
  }
}

Answer 2

Ниже автоматически устанавливается цвет Scaffold при загрузке, а вкладки отражают соответствующие цвета по умолчанию.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabBarApp(),
    );
  }
}

class TabBarApp extends StatefulWidget {
  createState() => _TabBarAppState();
}

class _TabBarAppState extends State<TabBarApp>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  List<TabData> _tabData;
  List<Tab> _tabs = [];
  List<Widget> _tabViews = [];
  Color _activeColor;

  @override
  void initState() {
    super.initState();
    _tabData = [
      TabData(title: 'First Tab', color: Colors.red),
      TabData(title: 'Second Tab', color: Colors.green),
      TabData(title: 'Third Tab', color: Colors.blue),
    ];
    _activeColor = _tabData.first.color;
    _tabData.forEach((data) {
      final tab = Tab(
        child: Container(
          constraints: BoxConstraints.expand(),
          color: data.color,
          child: Center(
            child: Text(data.title),
          ),
        ),
      );
      _tabs.add(tab);

      final widget = Scaffold(backgroundColor: data.color);
      _tabViews.add(widget);
    });
    _controller = TabController(vsync: this, length: _tabData.length)
      ..addListener(() {
        setState(() {
          _activeColor = _tabData[_controller.index].color;
        });
      });
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(primaryColor: _activeColor),
      child: Scaffold(
        backgroundColor: _activeColor,
        appBar: AppBar(
          title: Text('Multi Colored Tab Bar'),
          bottom: TabBar(
            indicatorColor: _activeColor,
            labelPadding: EdgeInsets.zero,
            controller: _controller,
            tabs: _tabs,
          ),
        ),
        body: TabBarView(
          controller: _controller,
          children: _tabViews,
        ),
      ),
    );
  }
}

class TabData {
  TabData({this.title, this.color});

  final String title;
  final Color color;
}

Answer 3

Я заработал, изменив primaryColor на theme на MaterialApp, цвет Tab можно изменить.Таким образом, в методе сборки MyTabsState вернуть MaterialApp и установить theme в переменную currentTabColor .

Объявить currentTabColor в MyTabsState и установить его на Colors.red

Затем установите onTap на обратный вызов, который возвращает индекс текущей вкладки и состояние изменения currentTabColor, используя if..else

import 'package:flutter/material.dart';

void main() {
  runApp(MyTabs());
}

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  TabController controller;
  Color currentTabColor;

  @override
  void initState() {
    super.initState();
    currentTabColor = Colors.red;
    controller = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: currentTabColor,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multi Colored Tab Bar'),
          bottom: TabBar(
            onTap: (tabIndex) {
              if (tabIndex == 0)
                currentTabColor = Colors.red;
              else if (tabIndex == 1)
                currentTabColor = Colors.blue;
              else
                currentTabColor = Colors.green;
              setState(() {
                currentTabColor = currentTabColor;
              });
            },
            controller: controller,
            tabs: <Tab>[
              Tab(
                text: 'First Tab',
              ),
              Tab(text: 'Second Tab'),
              Tab(text: 'Third Tab'),
            ],
          ),
        ),
        body: TabBarView(
          controller: controller,
          children: <Widget>[
            Scaffold(backgroundColor: Colors.red),
            Scaffold(backgroundColor: Colors.blue),
            Scaffold(backgroundColor: Colors.green),
          ],
        ),
      ),
    );
  }
}

Выход