Translate other elements on DraggableScrollableSheet top-bottom movement

Viewed 58

Hi I have to translate two of my widgets based on the DraggableScrollableSheet drag position (you can think this bottom sheet as in GMaps). The widgets I have to move/animates are:

  • Text - It needs to translate & scale back-and-forth and in-out respectively following an arc path simultaneously. (See expected video)
  • Row - It needs to translate a bit and then out. Again back-and-forth.

Trails -

  • Text widget scaling in-out properly but translating in some weird way. (See actual video)

  • Row widget is fading in-out fine, but having a hard time translating it.

Expected Vid - https://drive.google.com/file/d/1wg3q8KJc6zMe3b6mw-LgPN62FxK4dMMj/view?usp=sharing

actual vid - https://drive.google.com/file/d/1umjDVj6PXqiatF6JVt8EeKTCxU2LyM7E/view?usp=sharing

Code -

  final Duration _animationDuration = const Duration(milliseconds: 300);
  bool _isNavShown = true;
  double yValue = -35.0;
  void _applyEffectsOnDrag(double factor) {
    print(factor);
    if (factor > 0.7) {
      _isNavShown = false;
    } else {
      _isNavShown = true;
    }
  }

  Widget _getNavigationButtons(BuildContext ctx, bool isHidden) {
    return Padding(
      padding: verticalAndHorizontailPadding,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ...[1, 2, 3]
              .map(
                (e) => Container(
                  decoration: CircleStyles.navButton,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        padding: padding
                        decoration: decoration,
                        child: Icon(Icons.verified_user),
                      ),
                      SizedBox(height: AppMediaQuery(ctx).appHeight(2)),
                      Text('block heading')
                    ],
                  ),
                ),
              )
              .toList()
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(gradient: Variables.circleGradient),
        child: Stack(
          children: [
            Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: AppMediaQuery(context).appHorizontalPadding(4),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: () {
                          // TODO: Goto home screen
                        },
                        child: Container(
                          alignment: Alignment.center,
                          width: 32,
                          height: 32,
                          decoration: backButtonStyle,
                          child: const Icon(
                            Icons.chevron_left,
                          ),
                        ),
                      ),
                      IconButton(icon: const Icon(Icons.more_horiz), onPressed: null),
                    ],
                  ),
                ),
                TweenAnimationBuilder(
                  duration: _animationDuration,
                  curve: Curves.easeInOut,
                  tween: Tween<double>(begin: 0, end: !_isNavShown ? yValue : 0),
                  child: Padding(
                    padding: somePadding,            
                    child: const Align(
                      alignment: Alignment.centerLeft,
                      child: const Text('Circles'),
                    ),
                  ),
                  builder: (_, double dy, Widget ch) {
                    return Transform.scale(
                      scale: _isNavShown ? 1 : 0.8,
                      child: Transform.translate(
                        offset: Offset(0, dy),
                        child: ch,
                      ),
                    );
                  },
                ),
                AnimatedOpacity(
                  duration: _animationDuration,
                  opacity: _isNavShown ? 1 : 0,
                  child: _getNavigationButtons(context, true),
                ),
              ],
            ),
            NotificationListener<DraggableScrollableNotification>(
              onNotification: (obj) {
                setState(() {
                  return _applyEffectsOnDrag(obj.extent);
                });
              },
              child: DraggableScrollableSheet(
                initialChildSize: 0.6,
                minChildSize: 0.6,
                maxChildSize: 0.9,
                builder: (context, ctrl) {
                  return Container(
                    decoration: CircleStyles.sheetBase,
                    child: ConversationList(ctrl),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
0 Answers
Related