Используйте стиль AppBar для TabBar, который не является его дочерним элементом

Question

Я хочу, чтобы моя панель вкладок имела тот же стиль, что и панель инструментов.(используя один и тот же цвет значка, цвет текста и цвет фона)

Мой макет содержит раздел с вкладками слева и еще один столбец справа.Без дополнительных стилей значки TabBar не видны, потому что они и фон белые.

Итак, какой самый удобный способ применить стиль AppBar к TabBar?Спасибо за любые предложения!

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      vsync: this,
      length: 3,
      initialIndex: 0,
    );
  }

  @override
  Widget build(BuildContext context) {
    double bigSize = IconTheme.of(context).size * 4.0;
    return MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TabBar Style Problem'),
        ),
        body: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                children: [
                  SizedBox(
                    height: 36.0,
                    child: TabBar(
                      controller: _tabController,
                      tabs: [
                        Tab(icon: Icon(Icons.cake)),
                        Tab(icon: Icon(Icons.train)),
                        Tab(icon: Icon(Icons.info)),
                      ],
                    ),
                  ),
                  Flexible(
                    child: TabBarView(
                      controller: _tabController,
                      children: [
                        Icon(Icons.cake, size: bigSize),
                        Icon(Icons.train, size: bigSize),
                        Icon(Icons.info, size: bigSize),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Container(
                  color: Colors.amber.shade400,
                  alignment: FractionalOffset.center,
                  child: Text('Another Column'),
              ),
            ),
          ],
        ),
      ), 
    );
  }
}

Answer 1

Измените свой код на что-то вроде этого:

    class ProductsAdminPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold is inside DefaultTabController because DefaultTabController needs access to Scaffold
    return DefaultTabController(
      // Number of tabs
      length: 2,
      child: Scaffold(
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              AppBar(
                automaticallyImplyLeading: false,
                title: Text('Choose'),
              ),
              ListTile(
                title: Text('All Products'),
                onTap: () {
                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) => ProductsPage()));
                },
              )
            ],
          ),
        ),
        appBar: AppBar(
          title: Text('Manage Products'),
          // TabBar is added as the bottom widget of the appBar
          bottom: TabBar(
            tabs: <Widget>[
              // No of Tab() Widgets Should be equal to length
              Tab(
                icon: Icon(Icons.create),
                text: 'Create Product',
              ),
              Tab(
                icon: Icon(Icons.list),
                text: 'My Products',
              ),
            ],
          ),
        ),
        body: TabBarView(
          // No of pages should be equal to length
          children: <Widget>[ProductCreatePage(), ProductListPage()],
        ),
      ),
    );
  }
}

Answer 2

То, что в целом делает appBar, это вставка пользовательского DefaultTextStyle, который указывает на Theme.textTheme.title

Вы можете сделать то же самое, поместив часть дерева виджетов в пользовательский DefaultTextStyle.

DefaultTextStyle(
  style: Theme.of(context).textTheme.title,
  child: Text('Title')
);

Что касается цвета фона, он доступен в другом поле темы.

Container(
  color: Theme.of(context).primaryColor,
);

Answer 3

Когда вы помещаете TabBar в качестве bottom: виджета AppBar, вы получаете много вещей бесплатно.Он получает цвет фона и виджет Материал, который имеет специальную функцию.Он заставляет индикатор использовать белый цвет, когда цвет индикатора по умолчанию совпадает с цветом фона (посмотрите здесь) .

Так что, когда вы помещаете TabBar вне AppBar Вы должны справиться со всем самим.

Но, кажется, довольно просто обернуть TabBar в Material и присвоить ему primaryColor ( то же самое, что и у фреймворка здесь ).

Итак, в конце просто замените ваш SizedBox на Material и установите цвет.И вы получите всплеск чернил бесплатно.

          Material(
            color: Theme.of(context).primaryColor,
            child: TabBar(
              controller: _tabController,
              tabs: [
                Tab(icon: Icon(Icons.cake)),
                Tab(icon: Icon(Icons.train)),
                Tab(icon: Icon(Icons.info)),
              ],
            ),
          ),