Виджет TweenAnimationBuilder

Виджет TweenAnimationBuilder сам создаёт AnimationController на время перехода. Передают tween, duration и builder, который строит UI по текущему value.

Синтаксис

TweenAnimationBuilder(
	tween: tween,
	duration: duration,
	builder: builder,
)

Параметры

Параметр	Описание
`tween`	Диапазон анимируемого значения.
`duration`	Длительность перехода к новому end.
`builder`	Функция от context, value и child.

Пример

Давайте анимировать ширину блока:

import 'package:flutter/material.dart';

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

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

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

	@override
	Widget build(BuildContext context)
	{
		return MaterialApp(
			home: Scaffold(
				body: Center(
					child: Column(
						mainAxisSize: MainAxisSize.min,
						children: [
							TweenAnimationBuilder<double>(
								duration: Duration(milliseconds: 400),
								tween: Tween(
									begin: 80,
									end: wide ? 160 : 80,
								),
								builder: (context, width, child) {
									return Container(
										width: width,
										height: 40,
										color: Colors.blue,
										child: Center(
											child: Text('abcde'),
										),
									);
								},
							),
							ElevatedButton(
								onPressed: () {
									setState(() => wide = !wide);
								},
								child: Text('go'),
							),
						],
					),
				),
			),
		);
	}
}

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

На экране 'abcde' в синем блоке, ширина доедет после нажатия go.

Пример

Давайте анимировать цвет фона:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: TweenAnimationBuilder<Color?>(
						duration: Duration(milliseconds: 500),
						tween: ColorTween(
							begin: Colors.red,
							end: Colors.green,
						),
						builder: (context, color, child) {
							return Container(
								width: 120,
								height: 40,
								color: color,
								child: Center(
									child: Text('12345'),
								),
							);
						},
					),
				),
			),
		),
	);
}

На экране '12345' на фоне, который плавно зеленеет.

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

класс Tween,
который задают в tween
виджет AnimatedContainer,
когда меняют поля Container без builder
виджет AnimatedBuilder,
если нужен свой AnimationController
класс Curves,
которым задают curve перехода