fix: animation and safe area in question page

lib/features/question/presentation/ui/question_page.dart

@@ -44,6 +44,7 @@ class QuestionPage extends StatelessWidget {
               ),
             ),
             child: SafeArea(
+              bottom: false,
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: MySpaces.s16),
                 child: Column(

lib/features/question/presentation/ui/screens/question_screen.dart

@@ -116,25 +116,39 @@ class QuestionScreen extends StatelessWidget {
           builder: (context, state) => Stack(
             clipBehavior: Clip.none,
             children: [
-              if(state.correctAnswer == false)
-                PositionedDirectional(
-                  start: -100,
-                  top: -10,
+              PositionedDirectional(
+                start: -100,
+                top: -10,
+                child: AnimatedOpacity(
+                  opacity: state.correctAnswer == false ? 1 : 0,
+                  duration: Duration(milliseconds: 200),
                   child: LeftBlob(),
                 ),
-              MyImage(
-                image: state.correctAnswer == true
-                    ? MyAssets.happyPersons
-                    : MyAssets.persons,
-                fit: BoxFit.contain,
-                size: 110,
               ),
-              if(state.correctAnswer == false)
-                PositionedDirectional(
-                  top: -30,
-                  end: -90,
+              AnimatedCrossFade(
+                duration: Duration(milliseconds: 200),
+                reverseDuration: Duration(milliseconds: 200),
+                crossFadeState: state.correctAnswer == true ? CrossFadeState
+                    .showSecond : CrossFadeState.showFirst,
+                firstChild: MyImage(
+                  image: MyAssets.persons,
+                  fit: BoxFit.contain,
+                ),
+                secondChild: MyImage(
+                  image: MyAssets.happyPersons,
+                  fit: BoxFit.contain,
+                  size: 110,
+                ),
+              ),
+              PositionedDirectional(
+                top: -30,
+                end: -90,
+                child: AnimatedOpacity(
+                  opacity: state.correctAnswer == false ? 1 : 0,
+                  duration: Duration(milliseconds: 200),
                   child: RightBlob(),
                 ),
+              ),
             ],
           ),
         ),