如何在flutter的底部导航栏中添加左滑标和右滑标导航？

Question

我在颤动中创建了底部导航。当我切换底部标签时，那里看不到任何动画。 如何将自定义动画添加到底部导航视图？ （而不是底部导航本身）。

底部导航：

class Home extends StatelessWidget {
  final String name;

  const Home({Key key, @required this.name}) : super(key: key);

  Widget _buildTabs(BuildContext context, activeTab) {
    if (activeTab == AppTab.tasks) {
      final TodosRepository todosRepository = TodosRepository();
      return BlocProvider(
        builder: (context) =>
            TodosBloc(todosRepository: todosRepository)..dispatch(LoadTodos()),
        child: Padding(
          padding: const EdgeInsets.only(top: 64.0, left: 8.0, right: 8.0),
          child: TasksTab(),
        ),
      );
    } else if (activeTab == AppTab.goals) {
      return GoalsTab();
    } else if (activeTab == AppTab.account) {
      return Container(
        child: Center(
          child: Text('Account Tab'),
        ),
      );
    } else {
      return Container();
    }
  }

  @override
  Widget build(BuildContext context) {
    final tabBloc = BlocProvider.of<TabBloc>(context);
    return BlocBuilder(
      bloc: tabBloc,
      builder: (BuildContext context, AppTab activeTab) {
        return Scaffold(
          body: _buildTabs(context, activeTab),
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.add),
            tooltip: 'Add Todod',
          ),
          bottomNavigationBar: TabSelector(
            activeTab: activeTab,
            onTabSelected: (tab) => tabBloc.dispatch(UpdateTab(tab)),
          ),
        );
      },
    );
  }
}

您会看到我有3个标签：任务，目标和客户。

任务标签：

class TasksTabState extends State<TasksTab> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    print("Called when tab is changed");
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 100));

    _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ))
      ..addStatusListener(handler);
  }

  @override
  void dispose() {
    _controller.dispose();
    print("Component Disposed");
    super.dispose();
  }

  void handler(status) {
    print(status);
    if (status == AnimationStatus.completed) {
      _animation.removeStatusListener(handler);
      _controller.reset();
      _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeOut,
      ))
        ..addStatusListener(handler);
      _controller.reverse();
    }
  }

  Widget todoCard(Todo todo) {
    print(todo.complete);
    final double width = MediaQuery.of(context).size.width;
    _controller.forward();
    return AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          return Transform(
              transform:
                  Matrix4.translationValues(_animation.value * width, 0.0, 0.0),
              child: ExpansionTile(
                leading: CircularCheckBox(
                    activeColor: Colors.redAccent,
                    value: todo.complete,
                    materialTapTargetSize: MaterialTapTargetSize.padded,
                    onChanged: (value) {
                      print(value);
                      print("Current todo: $todo");
                    }),
                title: new Text(
                  todo.task,
                  style: new TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      fontStyle: FontStyle.italic),
                ),
                children: <Widget>[
                  new Column(
                    children: [Text(todo.note)],
                  ),
                ],
              ));
        });
  }

  Widget _buildTodosList(context, snapshots) {
    return ListView.builder(
      itemCount: snapshots.length,
      physics: ScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return todoCard(Todo.fromSnapshot(snapshots[index]));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder(
      bloc: BlocProvider.of<TodosBloc>(context),
      builder: (BuildContext context, TodosState state) {
        if (state is TodosLoading) {
          return Container(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
        if (state is LoadTodos) {
          return Container(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
        if (state is TodosLoaded) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('Project Title'),
                Text('Project description'),
                StreamBuilder(
                  stream: state.snapshotStream,
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    return !snapshot.hasData
                        ? Center(
                            child: CircularProgressIndicator(),
                          )
                        : _buildTodosList(context, snapshot.data.documents);
                  },
                ),
              ],
            ),
          );
        }
      },
    );
  }
}

在任务选项卡中，当我单击任务选项卡时，任务卡向右滑动。

但是我单击“目标”选项卡，以实现任务选项卡项目的向左滑动动画。