Flutter development has experienced unprecedented growth in the last year. Not only has it expanded as a channel for developers to expand their skillset in Dart, but it has also allowed them to enjoy the perks of a single codebase. Whether you are making a widget on Flutter or looking for a Flutter widget that could make a difference to your app, you have landed on the right page!
2020 was the year of mobile application development. The year allowed people to execute some of the best ideas they possibly had, while some developers chose to explore new avenues to expand their skills. In this environment of change, Flutter was a welcome distraction.
Google created the free and open-source UI framework that is a convenient solution for many woes a developer might have. Launched in 2017, Flutter is a relatively new framework gaining a steady amount of learners due to its cost-effective solutions.
Not only is it free, but it also saves the time usually spend on writing two different codebases for Android and iOS.
What Makes Flutter Different?
First of all, Flutter is a Software Development Kit that is built on native machine code. This SDK makes UI development straightforward and effortless. Flutter also offers a collection of UI libraries based on widgets for reusable elements such as text inputs, buttons, sliders, and every other widget you may possibly need.
Flutter also includes the programming language Dart, created by Google in 2011 and refined over the years. Dart is a typed, object-oriented programming language. It doesn't require a background with any other programming languages, though its syntax is close to JavaScript.
4 Free Flutter Widgets You Should Know About
Apps like KlasterMe and Square have been created in Flutter due to the advantages of being able to share a codebase for Android and iOS apps. However, since the platform is so new, it can be hard to find resources for developers. With that in mind, I've collected some of the best Flutter widgets.
These are the top four widgets that make Flutter an ideal choice for mobile app development. I've listed a widget for every aspect of the UI, and I hope that it will help you sort through some of the gaps in the code.
SafeArea Widget
In short, the SafeArea Widget informs your scaffold about the safest space to lay out the elements such as texts, colors, visual graphics, etc.
This Flutter widget is a safety net for an app’s screen dimensions. Since screens are no longer flat rectangles, the SafeArea widget helps you address all the curves and edges on the app screen that are not visible on the edges.
It allows your scaffold to remain limited to the dimensions where the elements will be seen, instead of spreading visual elements all over the place. While other platforms force developers to create a new container for such specifications, Flutter already offers this widget in a ready-made package!
.png)
.png)
Here's how you write it:
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: SafeArea(
left: true,
top: true,
right: true,
bottom: true,
minimum: const EdgeInsets.all(16.0),
child: Text(
'My Widget: This is my widget. It has some content that I don\'t want '
'blocked by certain manufacturers who add notches, holes, and round corners.'),
),
);
}Wrap Widget
This Flutter widget simplifies the process of locating buttons on your app screen.
When you have three buttons on a vertical screen and need to add a fourth one, your app layout will probably show a space error and indicate that you cannot place any other buttons in there.
However, if you add the Wrap widget, the space will automatically accommodate the control either on the horizontal or vertical axis, as specified. This alignment tool works ideally for chips and dialogue buttons.
Here's a visual representation of the buttons aligned vertically:
.png)
.png)
.png)
And here's how you write this alignment:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text("GeeksForGeeks"),
),
body: Wrap(
direction: Axis.vertical,
children: <Widget>[
Container(
color: Colors.blue,
width: 100,
height: 100,
child:Center(child: Text("W1",textScaleFactor: 2.5,))
),
Container(
color: Colors.red,
width: 100,
height: 100,
child:Center(child: Text("W2",textScaleFactor: 2.5,))
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child:Center(child: Text("W3",textScaleFactor: 2.5,))
),
Container(
color: Colors.indigo,
width: 100,
height: 100,
child:Center(child: Text("W4",textScaleFactor: 2.5,))
),
Container(
color: Colors.orange,
width: 100,
height: 100,
child:Center(child: Text("W5",textScaleFactor: 2.5,))
),
],
),
);
}If you want to align the buttons horizontally, you change the direction to Axis.horizontal in the abovementioned code and it would then look like this:
.png)
.png)
.png)
RichText Widget
In short, the RichText widget helps you customize your text, and if you are developing an app you should know how handy this Flutter widget could be.
Since reading is an essential part of an app's usage, typography plays a critical role in the visibility and engagement of the app's content. Traditionally, a text widget would suffice for all the app's needs, such as the styles, fonts, and sizes.
When you need to customize a block of text within a more significant chunk of text, RichText is your resource!
The RichText widget works with TextSpan trees to form a hierarchy of text that helps you prioritize words and phrases that need to be highlighted in the app. Whether you wish to use bold for a node or change its color, this widget can help you achieve it. Gesture recognition and baseline alignment are also wrapped within this Flutter widget.
.png)
.png)
When you divide text into multiple TextSpans, you can customize each tag separately just like this.
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: RichText(
text: TextSpan(
text: 'Hello ',,
style: TextStyle(color: Colors.red),
children: <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black)),
TextSpan(
text: ' world!',
style: TextStyle(fontStyle: FontStyle.italic, color: Colors.black))
,
],
),
),
);
}Since apps are a visual medium, you can easily redirect the user’s attention to the things that matter.
In a nutshell, the RichText widget allows you to use multiple styles within a single sentence. This tool can add value to the aesthetics of your application due to the sheer play on typography.
Hero Widget
Hero transitions are considered a common UI practice in Flutter development. They are used to indicate a change of screens on the application while the interaction's front and center remain in focus.
The widget marks its child as capable of hero animations, as the contents for a screen are replaced when a new page route appears. The elements on the page ‘fly’ in the navigator as the screens are in transition.
Such transitions of the overlay must be wrapped in a Hero widget in Flutter. These navigations find their routes through the HeroController. Technically, each pair of transitions with the same tag triggers a hero animation.
When hero animations are already in process, the flight animations are directly navigated to the new destination instead. The in-flight transition thus takes the route of the Hero’s child. To trigger a hero navigation, it must exist on the first frame of animation on the new page.
Let's look at an image on the side of the screen:
.png)
.png)
.png)
Now let's say we want it to transition to the center with animation like this:
.png)
.png)
.png)
This code is how you would achieve the complete action:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transition Demo',
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
),
body: GestureDetector(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return DetailScreen();
}));
},
),
);
}
}
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}Final Thoughts
Flutter helps simplify code-writing processes by offering alternative routes for each traditional practice that lacked simplicity in the past. Flutter widgets are one of those tools that help simplify and improve the process. Whether it's easy placement of a button on an app or a simple transition between screens, these four widgets are the first of many that can be analyzed and used to create brilliant experiences for the end user without draining the developer at all.
If you are just beginning to develop apps on Flutter, this article will give you insight into developing apps with Flutter.
