AnimatedCrossFade Widget
Project Preview
- Interested in seeing the live demo? Click here to explore.
- Want to view the source code? Visit the project on GitHub.
Code Snippet
import 'package:flutter/material.dart';
class AnimatedCrossFadeWidget extends StatefulWidget {
const AnimatedCrossFadeWidget({super.key});
@override
State<AnimatedCrossFadeWidget> createState() =>
_AnimatedCrossFadeWidgetState();
}
class _AnimatedCrossFadeWidgetState extends State<AnimatedCrossFadeWidget> {
bool _bool = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("AnimatedCrossFade Widget"),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
height: 100,
),
TextButton(
onPressed: () {
setState(() {
_bool = !_bool;
});
},
child: const Text(
'Switch',
),
),
AnimatedCrossFade(
firstChild: Image.asset(
'assets/images/1.jpg',
width: double.infinity,
),
secondChild: Image.asset(
'assets/images/2.jpg',
width: double.infinity,
),
crossFadeState:
_bool ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: const Duration(seconds: 1),
)
],
),
);
}
}