Starting a new journey to develop a Flutter app for your business or personal interest?
Then welcome to a world where all your ideas have to be materialized by something called widgets.
Widgets are the building blocks of a Flutter app, providing all the visual and interactive features that give your users the experience they deserve.
Starting on a journey into an ecosystem where everything is a widget, it is essential to have a list of the important widgets to keep you going as you try out more widgets.
In this article, we will unveil 10 widgets that will help elevate your Flutter app development game.
What Are Widgets
Flutter widgets are small components of code that can be used just as they are or combined to make another complex widget, an entire widget screen, or even a module.
Flutter widgets are inspired by React where a user interface is built from components.
Types of Widgets
There are two types of widgets: stateful and stateless widgets.
Stateless widget
A stateless widget is a widget that describes a part of a user interface more concretely by mapping with a group of other similar widgets.
Usually, they are rather static and do not depend on any dynamic state to change or re-render.
If the user interface you want to describe is going to be dependent on dynamic data that has a state, consider using a Stateful widget, which we will discuss in the next section.
A Stateless widget should only rebuild on three scenarios.
When it is first inserted into the widget tree, its parent widget configuration changes, and when an inherited widget changes configuration.
However, it is important to optimize if the rebuild is frequent.
Examples of stateless widgets include Text widget, Icon, IconButton, BackButton, CircleAvatar, etc.
Stateful widgets
Stateful widgets are dynamic. This means they rebuild or rerender based on a clock-driven state or depend on a system state change.
Widgets that allow interactions with the users like Form and animation, are stateful.
10 Widgets to Use in Your Flutter App
Embarking on a journey of Flutter app development requires not just the right set of tools but also a profound knowledge of dynamic trends in the Flutter space.
In this section, we will delve into Flutter trends spotlighting the widgets that boost your app’s UI appeal.
Flutter screenutils
Having your app scale properly on various screen sizes is one nightmare for mobile app developers.
If your layout is carefully drawn, you can have texts displayed differently on different screens looking good.
To help you automatically scale every content on a screen, you can use the flutter_screenutils widget.
To use this widget, you can set a design size. This is when you are designing your app based on a design file.
It uses methods like .w and .sp to maintain the widths of containers or font size of your app on the different screens matching the design size.
With Flutter screenutils, you can supercharge your Flutter app development. You do not need media queries to make your app scale properly.
Flutter SVG
Scalable vector graphics (SVG) is one of the most used formats for rendering images because of its ability to maintain quality while scaling.
However, Flutter does not natively support rendering SVG as it is complex and has a lot of computational power, so the Flutter team decided not to support it yet as the trade-offs are not exactly definitive.
However, the Flutter community has created a native Dart package flutter_svg that allows you to render SVGs in your Flutter application.
ConstrainedBox
Imagine you have a text that spans a single line which does not meet your design needs, you can use ConstrainedBox to make your text span two lines.
Its primary use is to add size limitations to the height or width of the child.
See the below video for more:
Row and Column
Building your apps is like building a house.
You usually need a house plan that can tell you how and where a particular thing should be laid to achieve the kind of house you expect.
This is as same for building your Flutter app.
Once you have a plan in mind or sight, laying them out, you need Rows and Columns to layout your apps properly.
Row and Column is a horizontal and vertical widget that accepts a list of children.
If you add more children to the Row widget then there is more room, and it throws an error.
The way to resolve this is by making it scrollable using a SingleChildScrollView widget or a ListView instead of a Row or Column.
ListView widget
ListView is a scrollable widget that accepts a list of children but is scrollable based on the defined scroll direction.
To define your scroll direction, you can use the Axis instance.
ListView can be constructed in three other ways:
- ListView.builder: This constructor is suitable when you need to display an infinite number of children. It uses the IndexWidgetBuilder to build the children on demand.
- ListView.separated: This constructor is used when you need to show a separator between the list of children you are rendering. It is suitable for a fixed number of children.
- ListView.custom: This is used when you must delegate the number of children shown in a viewport at a time.
PageView widget
Most modern-day apps have an onboarding screen which usually introduces the users to the app’s main functionalities.
To include this in your app is pretty easy with Flutter.
A page view is all you need.
With a page view, you can make its children scroll as pages.
Each child of the page view is forced to take the size of the viewport.
The page view can also be used to create carousels in your Flutter app.
The page view widget has a property PageController which can be used to determine which page should be visible on the viewport and which page should be shown when the page view is first constructed.
GridView widget
GridView is a Flutter widget that displays a list of items in a 2D array. The items are rendered vertically and horizontally like a table.
If you need to create a gallery app, this is a perfect widget to try out. The grid widget has a property, namely:
- crossAxisAlignment: You can determine the spaces between the grid item based on the scroll direction. This means that if the scroll direction is vertical, the spacing would be on the vertical.
- mainAxisAlignment: This determines spaces between the grid item based on the main scroll direction.
Wrap
You have probably laid out widgets in a row or column and because there isn’t enough room to contain your items, you can use a wrap widget to make the items start from the next line.
It is usually helpful with widgets like Chip.
You can use the direction property to determine if the children should be laid out vertically or horizontally.
Gesture Detector
The gesture detector, when wrapped around any widget, becomes interactive; however, it is usually non-visual. If you need a visual detector, you can use an Inkwell widget.
The gesture detector has several callbacks for example, an onTap that triggers once a user taps the wrapped widget.
onLongPress when the user taps and holds the wrapped widget.
Opacity
The opacity makes its child partially transparent.
It can be used to create a fade in and out of widgets or create an inactive button.
The Opacity widget only has one opacity property and the value doubles between 0.0 to 1.0. Where 0 is completely transparent, and 1.0 is opaque.
If you want to animate your opacity when it is first created, you can use the animated opacity widget.
Conclusion
In this blog post, we have covered some of the best widgets used mainly by the top Flutter apps being made.
The above widgets always come in handy when developing your Flutter app and should be kept in mind while exploring other widgets.
However, we can do the heavy lifting and choose the best widgets for your Flutter app development process.
