Flutter error: No TabController for TabBarView

Question

我想在我的 flutter 页面中添加一些标签，但没有只有标签的页面。

简而言之，我有一些输入字段，我想在它们下面放我的标签。

我不断收到此错误：TabBarView 没有 TabController。我已经将状态 class 与 TickerProviderStateMixin 一起使用以使控制器工作，但我不明白为什么它说找不到 tabcontroller，当它存在时。

问题是我已经有一个选项卡控制器，这是代码：

class ProductBody extends StatefulWidget {
  @override
  _ProductBodyState createState() => _ProductBodyState();
}
class _ProductBodyState extends State<ProductBody> with TickerProviderStateMixin{
  TabController _controller;

  @override
  void initState() {
   
    _controller = new TabController(length: 2, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Select category:",
                style: TextStyle(
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
         
            Container(
              decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
              child: new TabBar(
                controller: _controller,
                tabs: [
                   Tab(
                    icon: const Icon(Icons.home),
                    text: 'Address',
                  ),
                  Tab(
                    icon: const Icon(Icons.my_location),
                    text: 'Location',
                  ),
                ],
              ),
            ),
             Container(
              height: 80.0,
              child: new TabBarView(
                controller: _controller,
                children: <Widget>[
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.home),
                      title: new TextField(
                        decoration: const InputDecoration(hintText: 'Search for address...'),
                      ),
                    ),
                  ),
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.location_on),
                      title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
                      trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

使用SingleTickerProviderStateMixin。你只有一个控制器。

而且我通过了你的代码 dartpad 没有任何问题它工作正常。检查你的其他代码。

只需打开 https://dartpad.dartlang.org/flutter 并粘贴这些代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ProductBody(),
        ),
      ),
    );
  }
}

class ProductBody extends StatefulWidget {
  @override
  _ProductBodyState createState() => _ProductBodyState();
}
class _ProductBodyState extends State<ProductBody> with TickerProviderStateMixin{
  TabController _controller;

  @override
  void initState() {
   
    _controller = new TabController(length: 2, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Select category:",
                style: TextStyle(
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
         
            Container(
              decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
              child: new TabBar(
                controller: _controller,
                tabs: [
                   Tab(
                    icon: const Icon(Icons.home),
                    text: 'Address',
                  ),
                  Tab(
                    icon: const Icon(Icons.my_location),
                    text: 'Location',
                  ),
                ],
              ),
            ),
             Container(
              height: 80.0,
              child: new TabBarView(
                controller: _controller,
                children: <Widget>[
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.home),
                      title: new TextField(
                        decoration: const InputDecoration(hintText: 'Search for address...'),
                      ),
                    ),
                  ),
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.location_on),
                      title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
                      trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以使用底部导航标签。标签栏将出现在页面底部，就像默认标签栏一样工作

https://medium.com/@uncoded_decimal/creating-bottom-navigation-tabs-using-flutter-2286681450d4

Flutter error: No TabController for TabBarView

Flutter error: No TabController for TabBarView

mobile

tabs

dart

flutter