Let’s get right into it, shall we?
To learn more about flutter widgets and how they work, you can check out the official documentation 👉 documentation
1. AboutDialog
The AboutDialog widget displays all the information about the app including licenses. In the example below, for the onPressed argument, I’m calling the showDialog function and returning the AboutDialog widget.
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text("Show About App"),
onPressed: () {
showDialog(
context: context,
builder: (context) => const AboutDialog(
applicationLegalese: 'Legalese',
applicationName: 'Flutter App',
applicationIcon: FlutterLogo(),
applicationVersion: 'version 2.0.0',
children: [
Text('This text can be used to show other information'),
],
),
);
},
),
);
}
2. AboutListTile
The AboutListTile works like the AboutDialog. It is a tile showing the dialog when tapped, and you can set an icon to it.
Widget build(BuildContext context) {
return const Center(
child: AboutListTile(
icon: Icon(Icons.info),
applicationLegalese: 'Legalese',
applicationName: 'Example App',
applicationIcon: FlutterLogo(),
applicationVersion: 'version 2.0.0',
aboutBoxChildren: [
Text('This text can be used to show other information'),
],
));
}
3. AbsorbPointer
This widget prevents its child from receiving pointers meaning that the child widget cannot be tapped, scrolled or dragged. In the example below I used the AbsorbPointer widget to disable the second Elevated Button.
Widget build(BuildContext context) {
return Center(
child: Stack(
alignment: AlignmentDirectional.center,
children: [
SizedBox(
height: 80,
width: 200,
child: ElevatedButton(onPressed: () {}, child: null),
),
SizedBox(
height: 200,
width: 80,
child: AbsorbPointer(
child: ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.grey,
),
onPressed: () {},
child: null),
),
),
],
),
);
}
4. AlertDialog
This widget creates an alert dialog, you can set an icon above the title. You can also customise the shape of the dialog, which by default has a rounded rectangular border.
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('Show Alert Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Close'),
),
],
title: const Text('An Error Has Occurred!'),
content: const Text('This is the alert dialog'),
),
);
},
),
);
}
5. Align
This widget functions as its name suggests; it aligns its child widget according to the specified alignment properties.
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.grey,
height: 100,
width: double.infinity,
child: const Align(
alignment: Alignment.bottomCenter,
child: FlutterLogo(
size: 50,
),
),
),
);
}
6. AnimatedAlign
AnimatedAlign is the animated version of Align. It animates transitions in its child's alignment. You can play around with the curve property to enhance the animation effects.
class _Widget006State extends State<Widget006> {
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() {
selected = !selected;
}),
child: Center(
child: Container(
width: double.infinity,
height: 300,
color: Colors.grey,
child: AnimatedAlign(
alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
duration: const Duration(seconds: 2),
child: const FlutterLogo(size: 50),
),
),
),
);
}
}
7. AnimatedBuilder
AnimatedBuilder is useful for building more complex animations.
import 'dart:math' as math;
import 'package:flutter/material.dart';
class Widget007 extends StatefulWidget {
const Widget007({super.key});
@override
State<Widget007> createState() => _Widget007State();
}
class _Widget007State extends State<Widget007> with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..repeat();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, Widget? child) => Transform.rotate(
angle: _controller.value * 2.0 * math.pi,
child: child,
),
child: const FlutterLogo(
size: 100,
),
),
);
}
}
8. AnimatedContainer
This is a container that animates simple transitions between the values of its properties, In the example below, when the container is tapped, the width, height, colour, and alignment properties change depending on whether ‘selected’ is true or false.
class _Widget008State extends State<Widget008> {
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() {
selected = !selected;
}),
child: Center(
child: AnimatedContainer(
width: selected ? 200 : 100,
height: selected ? 100 : 200,
color: selected ? Colors.grey : Colors.black,
alignment: selected ? Alignment.center : Alignment.topCenter,
duration: const Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: const FlutterLogo(
size: 50,
),
),
),
);
}
}
9. AnimatedCrossFade
The AnimatedCrossFade widget animates a fade transition between its first and second child widgets. In the example below, when the button is tapped we see a smooth fade transition between the two pictures.
class _Widget009State extends State<Widget009> {
bool _bool = true;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
width: double.infinity,
height: 100,
),
TextButton(
onPressed: () => setState(() {
_bool = !_bool;
}),
child: const Text(
'Change',
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
AnimatedCrossFade(
firstChild: Image.asset(
'assets/lotus.jpg',
width: double.infinity,
),
secondChild: Image.asset(
'assets/orchid.jpg',
width: double.infinity,
),
crossFadeState:
_bool ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: const Duration(seconds: 1),
),
],
);
}
}
10. AnimatedDefaultTextStyle
This widget animates the changes in the various style properties of a text widget. In the example below, when the “change” button is tapped, the style of the text changes using animation.
class _Widget010State extends State<Widget010> {
bool _first = true;
double _fontSize = 80;
Color _color = Colors.blue;
FontWeight _fontWeight = FontWeight.bold;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedDefaultTextStyle(
style: TextStyle(
fontSize: _fontSize,
color: _color,
fontWeight: _fontWeight,
),
duration: const Duration(milliseconds: 500),
child: const Text('Flutter'),
),
TextButton(
onPressed: () => setState(() {
_first = !_first;
_fontSize = _first ? 80 : 50;
_color = _first ? Colors.blue : Colors.black;
_fontWeight = _first ? FontWeight.bold : FontWeight.normal;
}),
child: const Text('Change'),
),
],
),
);
}
}
That’s all for today, be sure to leave a comment! 😊