Flutter如何为不同的屏幕显示不同的tabBar?

时间:2019-03-08 17:05:43

标签: dart flutter flutter-layout

因此,在我的应用中,有三个屏幕可以使用底部栏进行导航,现在对于我要显示的三个屏幕中的每个屏幕,导航标签栏,但具有相同的appBar , 我试图使用包含底部栏元素的列表索引,然后为每个索引返回一个tabBar小部件,但最终出现错误 MyAppState是SingleTickerProviderStateMixin,但是创建了多个代码。 ,我不知道它是什么!

我真的需要解决此问题,请指导我使用溶胶或建议是否还有其他方法可以实现此目的。

main.dart

import 'package:flutter/material.dart';
import 'journal/view/journal_lists.dart';
import 'todo/view/master_list.dart';
import 'mood_checker/view/mood.dart'; 
import 'journal/view/journal.dart';


Color primary = Color(0xFF3366FF);

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Mentor101',
    home: MyApp(),
    theme: ThemeData(
        primaryColor: primary,
        fontFamily: 'Poppins',
        textTheme: TextTheme(
          headline: TextStyle(
              fontSize: 36, fontWeight: FontWeight.w600, color: Colors.white),
        )),
  ));
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  //for bottom tab
  int currentIndex = 0;
  final _screens = [Journal(), MasterList(), MoodChecker()];

  // for Tab Bar
  TabController todoTabCon;
  TabController moodTabCon;
  TabController journalTabCon;

  @override
  void initState() {
    super.initState();
    todoTabCon = TabController(vsync: this, length: 3);
    moodTabCon = TabController(vsync: this, length: 2);
    journalTabCon = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    todoTabCon.dispose();
    moodTabCon.dispose();
    journalTabCon.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar(context, 'ProApp'),
      drawer: mainDrawer(context),
      body: mainBody(),
      bottomNavigationBar: myBottomBar(),
    );
  }

  // ---------------------------------APP BAR STARTS-------------------------------//
  Widget myAppBar(BuildContext context, String title) {
    return AppBar(
      centerTitle: true,
      title: Text(
        title,
        style: Theme.of(context).textTheme.headline,
      ),
      backgroundColor: Theme.of(context).primaryColor,
      bottom: getTabBar(),
    );
  }
  // ---------------------------------APP BAR ENDS-------------------------------//

  // The problematic code
  // to get a tabBar for different screens
  Widget getTabBar() {
    switch (currentIndex) {
      case 0:
        return journalTabBar();
        break;
      case 1:
        return todoTabBar();
        break;
      case 2:
        return moodTabBar();
        break;
      default:
    }
  }

  //------------------------Tab Bars--------------------------//

  Widget todoTabBar() {
    return TabBar(
      controller: todoTabCon,
      tabs: <Widget>[
        Tab(child: Text('MasterList')),
        Tab(child: Text('DailyList')),
        Tab(child: Text('MonthlyList')),
      ],
    );
  }

  Widget moodTabBar() {
    return TabBar(
      controller: moodTabCon,
      tabs: <Widget>[
        Tab(child: Text('Checker')),
        Tab(child: Text('Review')),
      ],
    );
  }

  Widget journalTabBar() {
    return TabBar(
      controller: journalTabCon,
      tabs: <Widget>[
        Tab(child: Text('Journal')),
        Tab(child: Text('Entries List')),
      ],
    );
  }

  // ------------------------------Bottom BAR STARTS-------------------------------//

  Widget myBottomBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: primary,
      currentIndex: currentIndex,
      onTap: _onitemTapped,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('Journal')),
        BottomNavigationBarItem(
            icon: Icon(Icons.view_list), title: Text('Todos')),
        BottomNavigationBarItem(icon: Icon(Icons.mood), title: Text('Chart')),
      ],
    );
  }

  void _onitemTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

//Body starts----------
  Widget mainBody() {
    return _screens.elementAt(currentIndex);
  }
  // Body Ends---------

错误 (由于StackOverflow正文长度限制(3000字),必须从底部切出一些部分

I/flutter (20666): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (20666): The following assertion was thrown building Builder:
I/flutter (20666): _MyAppState is a SingleTickerProviderStateMixin but multiple tickers were created.
I/flutter (20666): A SingleTickerProviderStateMixin can only be used as a TickerProvider once. If a State is used for
I/flutter (20666): multiple AnimationController objects, or if it is passed to other objects and those objects might
I/flutter (20666): use it more than one time in total, then instead of mixing in a SingleTickerProviderStateMixin, use
I/flutter (20666): a regular TickerProviderStateMixin.
I/flutter (20666):
I/flutter (20666): When the exception was thrown, this was the stack:
I/flutter (20666): #0      __MyAppState&State&SingleTickerProviderStateMixin.createTicker.<anonymous closure> (package:flutter/src/widgets/ticker_provider.dart:85:7)
I/flutter (20666): #1      __MyAppState&State&SingleTickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:92:6)
I/flutter (20666): #2      new AnimationController (package:flutter/src/animation/animation_controller.dart:244:21)
I/flutter (20666): #3      new TabController (package:flutter/src/material/tab_controller.dart:86:50)
I/flutter (20666): #4      _MyAppState.initState (package:pro_app/main.dart:46:18)
I/flutter (20666): #5      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3846:58)
I/flutter (20666): #6      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #7      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #8      Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #9      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #10     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #11     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #12     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #13     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #14     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #15     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #16     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #17     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #18     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #19     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #20     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #21     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #22     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #23     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #24     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #25     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #26     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #27     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #28     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #29     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #30     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #31     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #32     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #33     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #34     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #35     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #36     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #37     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #38     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #39     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #40     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #41     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #42     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #43     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #44     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #45     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #46     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #47     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #48     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #49     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #50     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #51     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #52     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #53     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #54     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #55     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #56     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #57     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #58     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #59     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #60     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #61     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #62     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #63     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #64     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #65     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #66     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #67     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #68     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #69     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #70     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #71     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #72     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #73     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #74     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #75     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #76     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #77     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #78     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #79     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #80     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #81     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #82     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #83     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #84     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #85     Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #86     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #87     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #88     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #89     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #90     Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #91     ComponentElement.performRebuild...

1 个答案:

答案 0 :(得分:0)

创建标签的正确方法之一是在 main.dart 中指定路线,如下所示:

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new Home(),
    routes: <String, WidgetBuilder>{
    "/tabs": (BuildContext context) => new Tabs(),//add your route

现在,您需要使用相应的Class Tabs()创建 tabs.dart 文件,如下所示:

import 'package:YOURPROYECT/FOLDER/file.dart' as first; //here is your 1st tab
import 'package:YOURPROYECT/FOLDER/file.dart' as second;//and your second
//you can add more tabs, as third  or fouth, see UI/UX what they recommend.


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

class MyTabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  TabController controller;

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: new Material(
        color: color_appbar,
        child: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(icon: new Icon(Icons.home,)),
            new Tab(icon: new Icon(Icons.search)),
            new Tab(icon: new Icon(Icons.notifications)),

          ]
        )
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.Home(),
          new second.Search(),
          new fourth.Notifications(),
          new FutureBuilder(


//you can continous with you code
  

您必须为每个标签创建一个文件,并带有相应的类,   例如对于 Search()类,您可以这样开始。

import 'package:YOURPROYECT/Estilo.dart';
import 'package:flutter/material.dart';

class Search extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Search"),
    //you can continous
  

希望我能对您有所帮助。