I am trying to apply hero animation on a container that is in a stack "background" but it keeps pop above all widgets when that happens, I need help please
Normal design
when using hero
this is the widget that uses hero
import 'package:elithair_mobile_app/theme/colors.dart';
import 'package:flutter/material.dart';
class CustomRectangle extends StatelessWidget {
final double height;
const CustomRectangle({Key? key, required this.height}) : super(key: key);
@override
Widget build(BuildContext context) {
return Hero(
// flightShuttleBuilder: (flightContext, animation, flightDirection,
// fromHeroContext, toHeroContext) {
// final toHero = toHeroContext.widget;
// if (flightDirection == HeroFlightDirection.pop) {
// return FadeTransition(
// opacity: const AlwaysStoppedAnimation(100),
// child: toHero,
// );
// } else {
// return toHero;
// }
// },
tag: 'animated-rect',
child: Container(
height: height,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
AppColors.gradient1,
AppColors.gradient2,
AppColors.gradient3
],
),
),
),
);
}
}First screen that uses hero widget
import 'dart:developer';
import 'package:elithair_mobile_app/routes/routes.gr.dart';
import 'package:elithair_mobile_app/theme/colors.dart';
import 'package:elithair_mobile_app/utils/app_strings.dart';
import 'package:elithair_mobile_app/widgets/bg_rectangle.dart';
import 'package:elithair_mobile_app/widgets/rounded_container.dart';
import 'package:elithair_mobile_app/widgets/slider_widget.dart';
import 'package:elithair_mobile_app/widgets/task_item.dart';
import 'package:elithair_mobile_app/widgets/text_widget.dart';
import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:sizer/sizer.dart';
import 'package:auto_route/auto_route.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var isHome = true;
bool _visible = true;
@override
Widget build(BuildContext context) {
return Stack(
children: [
CustomRectangle(
height: 30.h,
),
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 2000),
child: Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: SizedBox.expand(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 4.h,
),
Center(
child: TextWidget(
title: AppStrings.welcomeMessage2,
fontSize: 14.sp,
textWeight: FontWeight.bold,
),
),
SizedBox(
height: 1.h,
),
const Center(
child: TextWidget(title: AppStrings.dashMessage)),
SizedBox(
height: 1.h,
),
Center(
child: RoundedContainer(
shadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 7,
offset: const Offset(0, 3),
),
],
width: 95.w,
padding: EdgeInsets.all(7.w),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularPercentIndicator(
percent: 0.70,
radius: 20.w,
progressColor: AppColors.progressActiveColor,
backgroundColor: AppColors.progressInactiveColor,
animation: true,
lineWidth: 2.5.w,
circularStrokeCap: CircularStrokeCap.round,
center: CircleAvatar(
foregroundColor: Colors.white,
backgroundColor: Colors.white,
radius: 16.5.w,
backgroundImage: const AssetImage(
'assets/images/avatar.png'),
),
),
SizedBox(height: 2.h),
const TextWidget(
title: AppStrings.progressText,
textColor: Colors.black,
textWeight: FontWeight.w200,
),
SizedBox(height: 1.h),
TextWidget(
title: AppStrings.progress,
textColor: AppColors.progressActiveColor,
fontSize: 20.sp,
),
SizedBox(height: 1.h),
const TextWidget(
title: AppStrings.phaseNum,
textColor: Colors.black,
textWeight: FontWeight.bold,
)
],
),
),
),
SizedBox(
height: 4.h,
),
Padding(
padding: EdgeInsets.only(left: 2.5.w),
child: const Hero(
tag: 'tasks-title',
child: SizedBox(
child: TextWidget(
textWeight: FontWeight.w300,
title: "${AppStrings.tasksText} ",
textColor: Colors.black,
),
),
),
),
SizedBox(
height: 1.h,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 5.w),
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return const TaskWidget(
taskTitle: "Bilder von Fortschritt hochladen",
hasIndicator: true,
isDay: false,
);
},
shrinkWrap: true,
itemCount: 3,
),
),
],
),
),
),
),
),
Positioned(
bottom: 6.h,
left: 0,
right: 0,
child: SliderWidget(
height: 20.h,
onDrag: (dragEndDetails) async {
final dx = dragEndDetails.velocity.pixelsPerSecond.dx;
final dy = dragEndDetails.velocity.pixelsPerSecond.dy;
log("dx: $dx, dy: $dy");
if ((dy < -100 && dx > 100) || (dy < -100 && dx < -800)) {
setState(() {
_visible = !_visible;
});
final result =
await context.router.push(const CalendarRoute());
if (result == 'calendar') {
setState(() {
_visible = !_visible;
});
}
} else {
log("false");
}
})),
],
);
}
}Second screen that uses Hero widget.
import 'package:elithair_mobile_app/utils/app_strings.dart';
import 'package:elithair_mobile_app/widgets/bg_rectangle.dart';
import 'package:elithair_mobile_app/widgets/text_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:sizer/sizer.dart';
import 'package:auto_route/auto_route.dart';
class CalendarPage extends StatefulWidget {
const CalendarPage({Key? key}) : super(key: key);
@override
State<CalendarPage> createState() => _CalendarPageState();
}
class _CalendarPageState extends State<CalendarPage> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
CustomRectangle(
height: 7.h,
),
Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Column(
children: [
SizedBox(
height: 20.h,
),
Padding(
padding: EdgeInsets.only(left: 2.5.w),
child: const Hero(
tag: 'tasks-title',
child: SizedBox(
child: TextWidget(
textWeight: FontWeight.w300,
title: "${AppStrings.tasksText} ",
textColor: Colors.black,
),
),
),
)
],
)),
),
Positioned(
left: 0,
right: 0,
top: 10.h,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
context.router.pop('calendar');
},
child: SizedBox(
height: 2.h,
child: SvgPicture.asset(
'assets/svg/ic_arrow_downward.svg',
),
),
))
],
);
}
}as you can see from the above pictures the widget uses hero when I try to navigate to another screen it pops above the other widgets. I tried many things but it doesn't work at all, I need help please and thanks!
