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

How to animate repositioning when a child appears in Flutter?

During the splash screen, when user is auto signed in, after a short while, his avatar pops up.

Has this modify the size of the container, the Center widget repositions the whole thing right away where I would have preferred a quick but smooth animation.

I wrote a minimal code to reproduce the situation:


class MyWidget extends StatefulWidget {
  
  @override State<MyWidget> createState()=>_MyWidgetState();
  
}

class _MyWidgetState extends State<MyWidget> {
  
  /// Whether to show the additional container?
  bool _showContainer = false;
  
  @override
  Widget build(BuildContext context) {
    return Center(child: 
                  ListView(
                    shrinkWrap:true,
                    children:[
                      Text(
                        'Hello, World!',
                        style: Theme.of(context).textTheme.headlineMedium,
                      ),
                      
                      if(_showContainer)
                      Container(
                        color: Colors.pink, 
                        width: 100, 
                        height: 300,
                        child: const Text("How to make the apparition smooth and animated"),
                      ),
                      
                      
                      ElevatedButton(
                        onPressed: ()=>setState(()=>_showContainer=true),
                        child: const Text("SHOW CONTAINER"),
                      ),
                  ]),
     );
  }
}

By clicking on the button, you make the additional container appears. But to make the re-entering smooth and animated?

The dart pad for convenience: https://dartpad.dev/?id=db58260305bd6080d514f8b736e4ccd3

Tags:

2

Answers


  1. 0

    Can you try this

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: const MyWidget(),
    ),
  ));
}

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

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

class _MyWidgetState extends State<MyWidget> {
  /// Whether to show the additional container?
  bool _showContainer = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(shrinkWrap: true, children: [
        Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          color: Colors.pink,
          width: _showContainer ? 100 : 0,
          height: _showContainer ? 300 : 0,
          child: const Text("How to make the apparition smooth and animated"),
        ),
        ElevatedButton(
          onPressed: () => setState(() => _showContainer = true),
          child: const Text("SHOW CONTAINER"),
        ),
      ]),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Use AnimatedSize Widget

    return Scaffold(
      appBar: AppBar(),
      body: ListView(shrinkWrap: true, children: [
        Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        Container(
          padding: EdgeInsets.all(_showContainer ? 15.0 : 0),
          color: Colors.grey,
          child: AnimatedSize(
            duration: const Duration(milliseconds: 300),
            child: _showContainer ? const Text("AnimatedSize will Resize the Container as per its Child's Content") : SizedBox.shrink(),
          ),
        ),
        ElevatedButton(
          onPressed: () => setState(() => _showContainer = !_showContainer),
          child: const Text("SHOW CONTAINER"),
        ),
      ])
    );

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search