如何修复 TabBar 的 No TabController

Question

我是 Flutter 的新手，我正在尝试制作一个如图所示的 TabBar 视图。但它显示“No TabController for TabBar”，并且在创建 TabBarView 时，您必须使用“controller”属性提供显式 TabController，或者必须确保 TabBarView 上方有一个 DefaultTabController。 在这种情况下，既没有显式控制器也没有默认控制器。 我尝试了互联网上提到的建议，但仍然出现错误。谁能帮我解决它？谢谢

class _TransactionState extends State<Transaction> with SingleTickerProviderStateMixin {
  int _value = 1;
  TabController controller;
  @override
  void initState() {
    controller = new TabController(vsync: this, length: 2);
    super.initState();
  }
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transaction'),
        actions: <Widget>[
          DropdownButton(
            dropdownColor: primary,
            value: _value,
            items: [
              DropdownMenuItem(
                child: Text(
                  "Daily",
                  style: TextStyle(color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                value: 1,
              ),
              DropdownMenuItem(
                child: Text("Monthly",
                  style: TextStyle(color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),),
                value: 2,
              ),
              DropdownMenuItem(
                child: Text("Yearly",
                  style: TextStyle(color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),),
                value: 3,
              ),
            ],
            onChanged: (int value){
              setState(() {
                _value = value;
              });
              //Padding(padding: EdgeInsets.all(20.0));
              style: new TextStyle(
                color: Colors.white,
              );
            },
          ),
        ],
        automaticallyImplyLeading: false,
        backgroundColor: secondary,
        bottom: new TabBar(
          controller: controller,
          tabs: <Widget>[
            new Tab(icon: new Icon(Icons.add_shopping_cart),text: "Expense",),
            new Tab(icon: new Icon(Icons.attach_money),text: "Income",),
          ],
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: <Widget>[
          new expense.TransactionExpense(),
          new income.TransactionIncome(),
        ],
      ),
    );
  }
}

Answer 1

这应该可以解决。

import 'package:flutter/material.dart';

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

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

class MyAppState extends StatefulWidget{
  
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyAppState> with TickerProviderStateMixin {
  TabController _controller;
  final List<Tab> topTabs = <Tab>[
    new Tab(text: 'Profile'),
    new Tab(text: 'Match'),
    new Tab(text: 'Chat'),
  ];

  @override
  void initState() {
   super.initState();

   _controller = TabController(vsync: this, length: 3);
  }

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


  @override
  Widget build(BuildContext context) {
      return  Scaffold(
            appBar: AppBar(
              title: Text('MyApp'),
              bottom: TabBar(
                  controller: _controller,
                  tabs: topTabs,
              ),
            ),
            body: TabBarView(
                controller: _controller,
                children: [
              new Container(
                color: Colors.lightBlueAccent,
                child: Center(child: Text('Profile', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.purpleAccent,
                child: Center(child: Text('Match', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.lightGreenAccent,
                child: Center(child: Text('Chat', style: TextStyle(color: Colors.white),),),
            )
            ]),
          );
  }
}