Blog

This is a simple Animated Size step by step example in flutter.

Example 1: Animated Size Example

Here is the demo screenshot of this example:

This example will comprise the following files:

• AnimatedSize.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependency is needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). AnimatedSize.dart

Create a file Dart named AnimatedSize.dart

Here is the full code

import 'package:flutter/material.dart';
class AnimatedSizeDemo extends StatefulWidget {
  const AnimatedSizeDemo({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _AnimatedSizeDemoState createState() => _AnimatedSizeDemoState();
}
class _AnimatedSizeDemoState extends State<AnimatedSizeDemo>
    with TickerProviderStateMixin {
  double _height = 80.0;
  double _width = 80.0;
  var _color = Colors.blue;
  bool _resized = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedSize(
              curve: Curves.bounceInOut,
              vsync: this,
              duration: const Duration(seconds: 1),
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    if (_resized) {
                      _resized = false;
                      _color = Colors.blue;
                      _height = 80.0;
                      _width = 80.0;
                    } else {
                      _resized = true;
                      _color = Colors.blue;
                      _height = 320.0;
                      _width = 320.0;
                    }
                  });
                },
                child: Container(
                  width: _width,
                  height: _height,
                  color: _color,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.