Skip to content
This repository has been archived by the owner on Jan 9, 2024. It is now read-only.

Commit

Permalink
feat: results animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@RuiMiguel
RuiMiguel committed Nov 29, 2023
1 parent 6f2f02a commit 1e4a37d
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 35 deletions.
3 changes: 2 additions & 1 deletion lib/home/widgets/dash_animation_container.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ class _DashAnimationContainerState extends State<DashAnimationContainer> {
Widget build(BuildContext context) {
return BlocListener<HomeBloc, HomeState>(
listener: (context, state) {
if (state.status == Status.askQuestionToThinking) {
if (state.status == Status.askQuestionToThinking ||
state.status == Status.resultsToSourceAnswers) {
_state.value = DashAnimationPhase.dashOut;
} else if (state.status == Status.thinkingToResults) {
_state.value = DashAnimationPhase.dashIn;
Expand Down
192 changes: 158 additions & 34 deletions lib/home/widgets/results_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ class ResultsView extends StatelessWidget {

@override
Widget build(BuildContext context) {
final response =
context.select((HomeBloc bloc) => bloc.state.vertexResponse);
return Stack(
return const Stack(
children: [
BlueContainer(summary: response.summary),
const Positioned(
BlueContainer(),
Positioned(
top: 90,
left: 0,
right: 0,
Expand Down Expand Up @@ -81,9 +79,7 @@ class _SearchBoxState extends State<_SearchBox>

class BlueContainer extends StatefulWidget {
@visibleForTesting
const BlueContainer({required this.summary, super.key});

final String summary;
const BlueContainer({super.key});

@override
State<BlueContainer> createState() => _BlueContainerState();
Expand Down Expand Up @@ -192,8 +188,6 @@ class _BlueContainerState extends State<BlueContainer>

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;

return PositionedTransition(
rect: _positionExitOut,
child: Align(
Expand All @@ -214,30 +208,7 @@ class _BlueContainerState extends State<BlueContainer>
Radius.circular(_borderRadiusExitOut.value),
),
),
padding: const EdgeInsets.symmetric(
horizontal: 48,
vertical: 64,
),
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Text(
widget.summary,
style: textTheme.headlineLarge?.copyWith(
color: VertexColors.white,
fontSize: 32,
),
),
),
const BackToAnswerButton(),
const Align(
alignment: Alignment.bottomLeft,
child: FeedbackButtons(),
),
const SeeSourceAnswersButton(),
],
),
child: const _AiResponse(),
),
);
},
Expand All @@ -249,6 +220,159 @@ class _BlueContainerState extends State<BlueContainer>
}
}

class _AiResponse extends StatefulWidget {
const _AiResponse();

@override
State<_AiResponse> createState() => _AiResponseState();
}

class _AiResponseState extends State<_AiResponse>
with TickerProviderStateMixin, TransitionScreenMixin {
late Animation<double> _leftPaddingExitOut;
late Animation<double> _topPaddingExitOut;
late Animation<double> _bottomPaddingExitOut;
late Animation<Offset> _offsetEnterIn;
late Animation<double> _rotationEnterIn;

@override
List<Status> get forwardEnterStatuses => [Status.thinkingToResults];

@override
List<Status> get forwardExitStatuses => [Status.resultsToSourceAnswers];

@override
List<Status> get backEnterStatuses => [Status.sourceAnswersBackToResults];

@override
void initializeTransitionController() {
super.initializeTransitionController();

enterTransitionController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);

exitTransitionController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
}

@override
void initState() {
super.initState();

_leftPaddingExitOut = Tween<double>(begin: 48, end: 165).animate(
CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
);

_topPaddingExitOut = Tween<double>(begin: 0, end: 155).animate(
CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
);

_bottomPaddingExitOut = Tween<double>(begin: 172, end: 40).animate(
CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
);

_offsetEnterIn =
Tween<Offset>(begin: const Offset(1, 0), end: Offset.zero).animate(
CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
);

_rotationEnterIn = Tween<double>(begin: 0.2, end: 0).animate(
CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
);
}

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;

final response =
context.select((HomeBloc bloc) => bloc.state.vertexResponse);

return AnimatedBuilder(
animation: _leftPaddingExitOut,
builder: (context, child) => Padding(
padding: EdgeInsets.fromLTRB(_leftPaddingExitOut.value, 64, 48, 64),
child: Row(
children: [
Expanded(
child: Column(
children: [
AnimatedBuilder(
animation: _topPaddingExitOut,
builder: (context, child) =>
SizedBox(height: _topPaddingExitOut.value),
),
SizeTransition(
sizeFactor: CurvedAnimation(
parent: exitTransitionController,
curve: Curves.decelerate,
),
child: const BackToAnswerButton(),
),
Flexible(
child: Expanded(
child: Text(
response.summary,
style: textTheme.headlineLarge?.copyWith(
color: VertexColors.white,
fontSize: 32,
),
),
),
),
AnimatedBuilder(
animation: _bottomPaddingExitOut,
builder: (context, child) =>
SizedBox(height: _bottomPaddingExitOut.value),
),
const Row(
children: [
FeedbackButtons(),
Expanded(child: SeeSourceAnswersButton()),
],
),
],
),
),
/*
SlideTransition(
position: _offsetEnterIn,
child: RotationTransition(
turns: _rotationEnterIn,
child: Expanded(
child: SourcesCarouselView(
documents: response.documents,
),
),
),
),
*/
],
),
),
);
}
}

class BackToAnswerButton extends StatefulWidget {
const BackToAnswerButton({super.key});

Expand Down
7 changes: 7 additions & 0 deletions test/home/widgets/dash_animation_container_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@ void main() {
await tester.pump();

expect(state.value, equals(DashAnimationPhase.dashIn));

animationController.add(
const HomeState(status: Status.resultsToSourceAnswers),
);
await tester.pump();

expect(state.value, equals(DashAnimationPhase.dashOut));
});
});
}

0 comments on commit 1e4a37d

Please sign in to comment.