10 Flutter Widgets That Come in Handy
TextButton.icon, AnimatedSwitcher, and more
Trying to learn a new language can be scary and tiresome. Many times, we wish we knew certain features that existed earlier on. In today’s article, I am gonna tell you about the handiest flutter widgets that I wish I had known about earlier.
Spacer
Spacer creates an adjustable, empty space that occupies any remaining space between widgets in a Flex container, such as row or column.
TextButton.icon
This widget replaces the need to use a row when creating a button with an icon. You must provide an icon and label.
Wrap
It displays its children horizontally or vertically depending on the provided direction value. It can be used in place of a Gridview. This widget is responsive and adapts to different screen sizes without doing much.
AnimatedSwitcher
This widget animates a new widget in place of another one. It provides a nice transition that makes the app really smooth. Always add a key to its child widget to ensure it works correctly.
SafeArea
This widget adds padding to your widgets, ensuring your app does not conflict with the operating system and device display features like status bar.
SafeArea(child: Container())RefreshIndicator
Takes scrollable widgets as a child. When the child is overscrolled, an animated circular progress indicator is faded into view and calls a future to update the scrollable`s contents.
RefreshIndicator(
child: ListView(),
onRefresh: () async {}),RichText
This allows us to display text with different styling on the same sentence or paragraph. You can include inline links, underline text, colored text, and much more.
Transform
This widget takes your animation game to a whole new level. It can implement simple animations such as rotate and scale to more complex ones such as 3D and skew animations. It provides usefully named constructors such as rotate, scale, and translation for quick implementation.
InteractiveViewer
The easiest way to introduce zoom, pan, drag, and pinching functionalities on a widget. It’s highly customizable according to your needs.
Flow
This widget harnesses the power of transformations to deliver cool animations. It’s one of those widgets that you must see in action to understand its powers. Check out the official documentation for more insights.
Chip
It’s a simple widget that displays simple data in an organized way and beautifully. It has several variants, such as InputChip, ChoiceChip, FilterChip , and ActionChip.
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: const Text('AB'), ),
label: const Text('Aaron Burr'),
)That’s a wrap, everyone. Thanks for reading.
Now that you know some really cool widgets, let’s go build for the world.
