CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
Adithya Shetty
Adithya Shetty

Reputation: 1287

Back and forth animation of 'AnimatedContainer' width from full width of device screen to a specific value in Flutter

I want to animate the animated container back and forth from the full-screen width.

I used a method to check bool and invert animation whenever the Button is tapped. But the container is not animating.

I found that since my variable animatedContainerWidth which is used to set AnimatedContainer width is set inside the build method of the widget because I wanted to use MediaQuery.of(context).size.width,

so whenever the setState is called the on the button tapped. The Build function passes the MediaQuery.of(context).size.width and hence I do not get the Container to Animate.

Can anyone suggest how can I achieve this?

I was thinking of calling a Function in width: parameter of the AnimatedContainer which would take the screen width as a parameter and then return appropriate widths instead of setting the animatedContainerWidth inside that method. But this would be a complex approach.

If anyone could suggest a simpler approach will be much appreciated. Thank You!

My Code is as follows:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;
  double screenWidth;

  double animatedSearchContainerWidth = 342;

  void containerAnimation(double _screenWidth) {
    isOpen = !isOpen;
    isOpen
        ? animatedSearchContainerWidth = 50.0
        : animatedSearchContainerWidth = _screenWidth;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    animatedSearchContainerWidth = screenWidth;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: animatedSearchContainerWidth,
          height: 50.0,
          curve: Curves.easeOut,
          color: Colors.redAccent,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => containerAnimation(screenWidth),
        tooltip: 'Animate',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Upvotes: 3

Views: 1670

Answers (1)

Kherel
Kherel

Reputation: 16185

You are putting the line animatedSearchContainerWidth = screenWidth; inside the build method so it's run on every build.

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'title',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: isOpen ? 50.0 : screenWidth,
          height: 50.0,
          curve: Curves.easeOut,
          color: Colors.redAccent,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          isOpen = !isOpen;
        }),
        tooltip: 'Animate',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Upvotes: 1

Related Questions