Question 74666 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: how to select animation direction based on value

I have this animated container:

AnimatedContainer(
                  width: ScreenSize.getScreenWidth(context),
                  height: _selectAll ? 10 : bottomBarHeight,
                  color: _selectAll ? Colors.red : Colors.green,
                  duration: const Duration(seconds: 2),
                  curve: Curves.fastLinearToSlowEaseIn,
                  child: const FlutterLogo(size: 75),
                ),

I want that when _selectAll is true, the container appears starting from bottom to top and when _selectAll is false, the container dissapears starting from top to bottom.

In this version the container behaves the exact opposite way (when false, goes bottom to top, when true goes top to bottom

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    ANSWER Wrap the container in a Column with mainAxisAlignment: MainAxisAlignment.end,

    Column(
        mainAxisAlignment: MainAxisAlignment.end,
      children:[
       AnimatedContainer(
          width: selected ? 300.0 : 300.0,
          height: selected ? 20 : 100.0,
          color: selected ? Colors.red : Colors.green,
          alignment:
              selected ? Alignment.bottomCenter : Alignment.topCenter,
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: FlutterLogo(),
        ),
      ]),

  2. 0

    Have you tried AnimatedAlign widget?

    Here is a sample code based on your code

    import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyWidget()));
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool reverse = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: AnimatedAlign(
        alignment: reverse ? Alignment.bottomCenter : Alignment.topCenter,
        duration: const Duration(seconds: 2),
        curve: Curves.fastLinearToSlowEaseIn,
        child: Container(
            width: double.infinity,
            height: 100,
            color: reverse ? Colors.green : Colors.red,
            child: const FlutterLogo()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            reverse = !reverse;
          });
        },
        child: const Icon(Icons.flip),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search