Виджет AnimatedContainer

Виджет AnimatedContainer анимирует изменения параметров при setState.

Синтаксис

AnimatedContainer(
	duration: duration,
	child: child,
)

Параметры

Параметр	Описание
`duration`	Параметр `AnimatedContainer`.
`curve`	Параметр `AnimatedContainer`.
`width`	Параметр `AnimatedContainer`.
`height`	Параметр `AnimatedContainer`.
`color`	Параметр `AnimatedContainer`.
`child`	Параметр `AnimatedContainer`.

Пример

Давайте сменим параметры по кнопке:

import 'package:flutter/material.dart';

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

	@override
	State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
	bool big = false;

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				body: Center(
					child: Column(
						mainAxisSize: MainAxisSize.min,
						children: [
							AnimatedContainer(
								duration: Duration(milliseconds: 400),
								width: big ? 160 : 80,
								height: 56,
								color: big ? Colors.blue : Colors.grey,
								child: Center(child: Text('abcde')),
							),
							ElevatedButton(
								onPressed: () => setState(() => big = !big),
								child: Text('toggle'),
							),
						],
					),
				),
			),
		);
	}
}

void main() {
	runApp(const Demo());
}

На экране AnimatedContainer плавно доедет до новых значений, текст 'abcde' останется внутри.

Пример

Давайте повторим переход для второго состояния:

import 'package:flutter/material.dart';

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

	@override
	State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
	bool big = false;

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				body: Center(
					child: Column(
						mainAxisSize: MainAxisSize.min,
						children: [
							AnimatedContainer(
								duration: Duration(milliseconds: 400),
								width: big ? 200 : 100,
								height: 56,
								color: big ? Colors.teal : Colors.grey,
								child: Center(child: Text('12345')),
							),
							ElevatedButton(
								onPressed: () => setState(() => big = !big),
								child: Text('toggle'),
							),
						],
					),
				),
			),
		);
	}
}

void main() {
	runApp(const Demo());
}

На экране после toggle снова сработает AnimatedContainer, подпись '12345' внутри виджета.

Смотрите также

класс AnimationController,
который задаёт duration
класс Curves,
который задаёт curve
виджет AnimatedBuilder,
когда нужен ручной builder
виджет MaterialApp,
корень примеров