CODEWITHSUNDEEP
flutterflutter-animation
leonvr
leonvr

Reputation: 113

How to get rid of overflow-error on AnimatedContainer?

I implemented a MaterialBanner. I created a slide-up-effect once the user pushes the dismiss-button. Everything works ok, except for the overflow-error 'bottom overflowed by .. pixels', which appears when you click the dismiss button. The number of pixels in the error message counts down to zero as the bottom slides up. How can I solve this last issue? I expected the MaterialBanner to respect the maxHeight of the BoxConstraint instead of overflowing.

  AnimatedContainer buildAnimatedBanner(AuthViewModel vm) {
    return AnimatedContainer(
      constraints: BoxConstraints(maxHeight: _heightBanner),
      duration: Duration(seconds: 3),
      child: MaterialBanner(
        backgroundColor: Colors.green,
        leading: Icon(EvilIcons.bell,
            size: 28, color: AppTheme.appTheme().colorScheme.onBackground),
        content: Text('Please check your inbox to verify email ${vm.email}'),
        actions: <Widget>[
          FlatButton(
            child: Text(
              "Send again",
              style: TextStyle(
                  color: AppTheme.appTheme().colorScheme.onBackground),
            ),
            onPressed: () {},
          ),
          FlatButton(
            child: Text(
              "Dismiss",
              style: TextStyle(
                  color: AppTheme.appTheme().colorScheme.onBackground),
            ),
            onPressed: () => setState(() => _heightBanner = 0),
          ),
        ],
      ),
    );
  }

Upvotes: 0

Views: 2354

Answers (1)

Akora Ing. DKB
Akora Ing. DKB

Reputation: 1051

It's overflowing because while the container is reducing in height, the content of the banner is still being rendered in full. You'll still see this error for as long as the material banner is still in view.

Looking at your code, I'm thinking the purpose of the AnimatedContainer is to make a smooth transition when the height of the child (MaterialBanner) changes. You can use an AnimatedSize instead. It'll automatically handle the size change transitions for you and you don't have to worry about Overflow error. It also provides an alignment param you can use to determine the direction of the transition. Below is a code. Demo can be found in this codepen.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  MyWidget createState() => MyWidget();
}

class MyWidget extends State<MyApp> with SingleTickerProviderStateMixin {
  int itemCount = 2;
  bool pressed = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedSize(
          vsync: this,
          duration: Duration(milliseconds: 500),
          alignment: Alignment.topCenter,
          child: Container(
            color: Colors.red,
            // height: 300,
            width: 300,
            child: ListView.builder(
              itemCount: itemCount,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text("$index"),
                );
              }
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState((){
            itemCount = pressed ? 6 : 4;
            pressed = !pressed;
          });
        }
      ),
    );
  }
}

Upvotes: 2

Related Questions