Предотвратить переполнение героя родным героем во время перехода - PullRequest
Новая
       13

Предотвратить переполнение героя родным героем во время перехода

4 голосов
/ 10 июля 2020

Я создаю анимацию героя с помощью Flutter. Я разместил svg-круги внутри карточки, и эти круги выходят за границы карточки, а переполненные части скрыты, когда он не переходит, как я хочу, чтобы это было и во время анимации.

Я искал способ вложить героев, чтобы круги оставались внутри карты, но кажется, что они удалили поддержку для этого.

Круг выходит за границы карты во время анимации, как вы можете видеть по ссылке:

Анимация

Можно ли каким-то образом обрезать круги, чтобы они не переполняли карту? 

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

...

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.red,
    body: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [SizedBox(height: 100), MyCard()],
      ),
    ),
  );
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double cardWidth = MediaQuery.of(context).size.width - 40;
    double cardHeight = cardWidth * 0.629;
    double circleWidth = cardWidth * 0.495;

    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 400),
            pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
              return MyCardFullpage();
            },
            transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
              return Align(
                child: FadeTransition(
                  opacity: new CurvedAnimation(parent: animation, curve: Curves.easeOut),
                  child: GestureDetector(
                      onTapDown: (details) {
                        Navigator.pop(context);
                      },
                      child: child),
                ),
              );
            },
          ),
        );
      },
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [BoxShadow(color: Color(0x16000000), offset: Offset(0, 4), blurRadius: 6)],
        ),
        child: Stack(
          children: [
            Hero(
              tag: 'mycard-background',
              transitionOnUserGestures: true,
              child: Container(
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.blueGrey), width: cardWidth, height: cardHeight),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: -0.092 * cardWidth,
              top: -0.215 * cardHeight,
              child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.685 * cardWidth,
              top: -0.220 * cardHeight,
              child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.600 * cardWidth,
              top: 0.344 * cardHeight,
              child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
          ],
        ),
      ),
    );
  }
}

class MyCardFullpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double fullWidth = MediaQuery.of(context).size.width;
    double fullHeight = MediaQuery.of(context).size.height;
    double circleWidth = fullHeight * 0.495;

    return Scaffold(
      body: Stack(
        children: [
          Hero(
            tag: 'mycard-background',
            child: Container(
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.blueGrey), width: fullWidth, height: fullHeight),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: -0.592 * fullWidth,
            top: -0.215 * fullHeight,
            child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.785 * fullWidth,
            top: -0.25 * fullHeight,
            child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.500 * fullWidth,
            top: 0.644 * fullHeight,
            child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
        ],
      ),
    );
  }
}
...