import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
title: 'Flutter Expanded Sample',
home: const AnimatedContainerSample(),
);
}
}
class AnimatedContainerSample extends StatefulWidget {
const AnimatedContainerSample({super.key});
@override
State<AnimatedContainerSample> createState() =>
_AnimatedContainerSampleState();
}
class _AnimatedContainerSampleState extends State<AnimatedContainerSample> {
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: AnimatedContainer(
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
alignment:
selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: const Duration(seconds: 2),
curve: Curves.bounceIn,
child: const FlutterLogo(size: 75),
),
),
);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.