fix: response width to avoid weird movement at summary

VGVentures · Dec 1, 2023 · d6e1ece · d6e1ece
1 parent 041ed30
commit d6e1ece
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 60 deletions.
diff --git a/lib/home/widgets/results_view.dart b/lib/home/widgets/results_view.dart
@@ -133,7 +133,7 @@ class SearchBoxViewState extends State<SearchBoxView>
   Widget build(BuildContext context) {
     return Container(
       constraints: const BoxConstraints(
-        maxWidth: 595,
+        maxWidth: 659,
       ),
       child: SlideTransition(
         position: _offset,
@@ -253,7 +253,7 @@ class BlueContainerState extends State<BlueContainer>
 
   void _initSizeIn() {
     sizeIn = Tween<Size>(
-      begin: const Size(600, 700),
+      begin: const Size(659, 732),
       end: Size(
         widget.constraints.maxWidth,
         widget.constraints.maxHeight,
@@ -429,76 +429,122 @@ class _AiResponseState extends State<_AiResponse>
   }
 }
 
-class SummaryView extends StatelessWidget {
+class SummaryView extends StatefulWidget {
   const SummaryView({
     super.key,
   });
 
+  @override
+  State<SummaryView> createState() => _SummaryViewState();
+}
+
+class _SummaryViewState extends State<SummaryView>
+    with TickerProviderStateMixin, TransitionScreenMixin {
+  late Animation<double> _width;
+
+  @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: 1),
+    );
+
+    exitTransitionController = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 1),
+    );
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    _width = Tween<double>(begin: 563, end: 659).animate(
+      CurvedAnimation(
+        parent: exitTransitionController,
+        curve: Curves.decelerate,
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
     final parsed = context.select((HomeBloc bloc) => bloc.state.parsedSummary);
 
-    return SizedBox(
-      width: 540,
-      child: RichText(
-        text: TextSpan(
-          children: [
-            for (final element in parsed.elements)
-              if (element.isLink)
-                WidgetSpan(
-                  child: InkWell(
-                    onTap: () {
-                      final isOnSeeSourceAnswers =
-                          context.read<HomeBloc>().state.status ==
-                              Status.seeSourceAnswers;
-                      if (isOnSeeSourceAnswers) {
-                        context.read<HomeBloc>().add(
-                              NavigateSourceAnswers(
-                                element.text,
-                              ),
-                            );
-                      } else {
-                        context.read<HomeBloc>().add(
-                              SeeSourceAnswersRequested(
-                                element.text,
-                              ),
-                            );
-                      }
-                    },
-                    child: Container(
-                      margin: const EdgeInsets.symmetric(
-                        horizontal: 2,
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                        vertical: 4,
-                        horizontal: 12,
-                      ),
-                      decoration: const BoxDecoration(
-                        color: VertexColors.white,
-                        borderRadius: BorderRadius.all(
-                          Radius.circular(100),
+    return AnimatedBuilder(
+      animation: _width,
+      builder: (context, child) {
+        return SizedBox(
+          width: _width.value,
+          child: RichText(
+            text: TextSpan(
+              children: [
+                for (final element in parsed.elements)
+                  if (element.isLink)
+                    WidgetSpan(
+                      child: InkWell(
+                        onTap: () {
+                          final isOnSeeSourceAnswers =
+                              context.read<HomeBloc>().state.status ==
+                                  Status.seeSourceAnswers;
+                          if (isOnSeeSourceAnswers) {
+                            context.read<HomeBloc>().add(
+                                  NavigateSourceAnswers(
+                                    element.text,
+                                  ),
+                                );
+                          } else {
+                            context.read<HomeBloc>().add(
+                                  SeeSourceAnswersRequested(
+                                    element.text,
+                                  ),
+                                );
+                          }
+                        },
+                        child: Container(
+                          margin: const EdgeInsets.symmetric(
+                            horizontal: 2,
+                          ),
+                          padding: const EdgeInsets.symmetric(
+                            vertical: 4,
+                            horizontal: 12,
+                          ),
+                          decoration: const BoxDecoration(
+                            color: VertexColors.white,
+                            borderRadius: BorderRadius.all(
+                              Radius.circular(100),
+                            ),
+                          ),
+                          child: Text(
+                            element.text,
+                            style: textTheme.labelLarge?.copyWith(
+                              color: VertexColors.googleBlue,
+                            ),
+                          ),
                         ),
                       ),
-                      child: Text(
-                        element.text,
-                        style: textTheme.labelLarge?.copyWith(
-                          color: VertexColors.googleBlue,
-                        ),
+                    )
+                  else
+                    TextSpan(
+                      text: element.text,
+                      style: textTheme.headlineLarge?.copyWith(
+                        color: VertexColors.white,
                       ),
                     ),
-                  ),
-                )
-              else
-                TextSpan(
-                  text: element.text,
-                  style: textTheme.headlineLarge?.copyWith(
-                    color: VertexColors.white,
-                  ),
-                ),
-          ],
-        ),
-      ),
+              ],
+            ),
+          ),
+        );
+      },
     );
   }
 }

diff --git a/packages/app_ui/lib/src/widgets/question_input_text_field.dart b/packages/app_ui/lib/src/widgets/question_input_text_field.dart
@@ -66,7 +66,7 @@ class _QuestionTextFieldState extends State<QuestionInputTextField> {
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
     return Container(
-      constraints: const BoxConstraints(maxWidth: 600),
+      constraints: const BoxConstraints(maxWidth: 659),
       child: TextField(
         controller: _controller,
         style: textTheme.bodyMedium?.copyWith(