Виджет AnimatedCrossFade

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

Синтаксис

AnimatedCrossFade(
	duration: duration,
	child: child,
)

Параметры

Параметр	Описание
`duration`	Параметр `AnimatedCrossFade`.
`crossFadeState`	Параметр `AnimatedCrossFade`.
`firstChild`	Параметр `AnimatedCrossFade`.
`secondChild`	Параметр `AnimatedCrossFade`.

Пример

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

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: [
							AnimatedCrossFade(
								duration:Duration(milliseconds:400),
								crossFadeState: big?CrossFadeState.showSecond:CrossFadeState.showFirst,
								firstChild:Text('abcde'),
								secondChild:Text('12345'),
							),
							ElevatedButton(
								onPressed: () => setState(() => big = !big),
								child: Text('toggle'),
							),
						],
					),
				),
			),
		);
	}
}

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

На экране AnimatedCrossFade плавно доедет до новых значений, текст '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: [
							AnimatedCrossFade(
								duration:Duration(milliseconds:400),
								crossFadeState: big?CrossFadeState.showFirst:CrossFadeState.showSecond,
								firstChild:Text('abcde'),
								secondChild:Text('12345'),
							),
							ElevatedButton(
								onPressed: () => setState(() => big = !big),
								child: Text('toggle'),
							),
						],
					),
				),
			),
		);
	}
}

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

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

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

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