Как анимировать SliverAppBar в NestedScrollView - PullRequest
Новая
       31

Как анимировать SliverAppBar в NestedScrollView

0 голосов
/ 02 июля 2019

Я пытаюсь преобразовать SliverAppBar, используя AnimatedBuilder. Мне нужно знать, как я могу использовать RenderTransform ребенка в NestedScrollView.

Я бы хотел анимировать SliverAppBar вне поля зрения при смене вкладки на TabBarView (как это делает WhatsApp при переходе на вкладку камеры.

В настоящее время я использую TabController значение анимации вместе с AnimatedBuilder для перевода SliverAppBar из поля зрения.

Вот что я сделал: 

import 'dart:async';

import 'package:flutter/material.dart';

class AppNavigator extends StatefulWidget {
  const AppNavigator({
    Key key,
    @required this.cameraWidget,
    @required this.chatsWidget,
  }) : super(key: key);

  final Widget cameraWidget;
  final Widget chatsWidget;

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

class _AppNavigatorState extends State<AppNavigator>  with SingleTickerProviderStateMixin {

  TabController _tabController;

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


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

  @override
  Widget build(BuildContext context) {
    final tabs = /* some tabs */;

    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, inner) {
          return <Widget>[
            AnimatedBuilder(
              animation: _tabController,
              child: SliverAppBar(
                title: const Text('WhatsApp'),
                pinned: true,
                floating: true,
                bottom: TabBar(
                  tabs: tabs, 
                  isScrollable: true,
                  indicatorColor: Colors.white,
                  controller: _tabController,
                ),
                backgroundColor: Color(0xff075e54),
              ),
              builder: (context, child) {
                if (_tabController.animation.value < 1) {
                  return child;
                }
                return Transform.translate(
                  child: child,
                  offset: Offset(0, _tabController.animation.value * -100),
                );
              },
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            widget.cameraWidget,
            widget.chatsWidget,
          ],
        ),
      ),
    );
  }
}

Вот ошибки, которые я получаю: 

I/flutter (25509): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (25509): The following assertion was thrown building AnimatedBuilder(animation: ScrollController#926c9(one
I/flutter (25509): client, offset 0.0), state: _AnimatedState#44dcb):
I/flutter (25509): A RenderNestedScrollViewViewport expected a child of type RenderSliver but received a child of type
I/flutter (25509): RenderTransform.
I/flutter (25509): RenderObjects expect specific types of children because they coordinate with their children during
I/flutter (25509): layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a
I/flutter (25509): RenderSliver does not understand the RenderBox layout protocol.
I/flutter (25509):
...