How to Maintain Animation Widget Height Inside Another Widget in Flutter?

Question

I'm working on a Flutter app that involves a countdown timer with an animation effect. The animation correctly fills from top to bottom when used standalone.

This is what I mean:

However, integrating it within another widget, specifically under an AppBar, does not maintain the expected height, leading to layout issues as depicted below:

Here's a simplified version of my code demonstrating the setup:

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePageTimerUI(),
    );
  }
}

class HomePageTimerUI extends StatefulWidget {
  @override
  _HomePageTimerUIState createState() => _HomePageTimerUIState();
}

class _HomePageTimerUIState extends State<HomePageTimerUI> with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    // Animation controller here
    controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    );
   
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animation Under AppBar"),
      ),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return Container(
            // This container represents my animation
           
            height: (MediaQuery.of(context).size.height - AppBar().preferredSize.height) * controller.value,
            color: Colors.blue,
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (controller.isAnimating) {
            controller.stop();
          } else {
            controller.forward(from: 0.0); // Restart the animation
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Expected Behavior: The animation should respect the AppBar's height and start precisely below it without affecting the overall layout.

Actual Behavior: The animation overlaps/ignores the AppBar, disrupting the intended design.

Questions:

• How can I adjust the height of the animated widget so it respects the AppBar's height?
• Is there a specific property or layout strategy in Flutter that ensures a child widget respects its parent's boundaries in cases like this?

Thank you for any insights or solutions you can provide.

Answer 1

As @Henrique Zanferrari suggested you are using height of the screen in

height: MediaQuery.of(context).size.height

Which is limiting the widgets to follow along with the appBar.

Try replacing this height with more general Widget like Expanded or Flexible like so.