Flutter Widget Part 2

10 Mins Flutter Widget!!!....(PART - II)

#16 SafeArea

On today's devices, the app rarely gets a neat little rectangle to run in. Notification bar and controls can place in your complicating layouts. That's why Flutter has SafeArea. It uses a MediaQuery to check the dimensions of the screen and pads its shell to match.

#17 Hero 

Hero transitions are a common UI pattern. Flutter has the Hero widget. it will create automatically a Hero transition between two navigator routes. Flutter will figure out where the widget is in both routes and animate the changes between locations.

In case you missed part one, 10 Min Flutter Widget!!!....

#18 CustomPaint

Do you ever wish to create a very custom user interface? With Flutter, you have access to low-level paint calls. These are fast and efficient ways to build slick graphics. Drawing lines, rectangles, circles, arcs, paths, bitmap images becomes easy. Also, you have full control over how to paint these, colors, shaders, blend modes, and more.

#19 Tooltip

The mobile screen is small, so apps often use iconography to convey meaning. there are also full of images and other visual content that might not be obvious and that is inaccessible to people with impaired vision. To keep users informed, used Tooltips. Just wrap your content with the Tooltip widget and provide a message.

#20 FittedBox

Most Flutter widgets are boxes. you can lay them out, stack them, even nest them inside each other. but what happens when one box can not fit in the other box? To help with that, there is FittedBox. Just give it a child widget and a BoxFit that describes how it should make its child fit and it will scale or clip its child automatically.

#21 LayoutBuilder

Even found yourself writing a build method and wished you could know how big your widget was going to be before you decided how it would look? well, LayoutBuild can help.

#22 AbsorbPointer

Most widgets offer some way to disable input. if you set the onPressed callback of the RaisedButton to null, it becomes disabled. but if we have a complex subtree of widgets and just need to disable touch events, try AbsorbPointer. Just put it at the topmost of the widget tree you would like to block and set the absorbing property, turn the AbsorbPointer on and off.

#23 Transform 

The Transform widget can transform a simple-looking app into an amazing Mobile App. Do you want to rotate an icon at some degrees? A fancy animated transition? Maybe a bouncy carousel? or even a cool menu? All of these things use Transform widgets. to rotate something 45 degrees, just wrap it in the Transform widget.

Also Read: New Features and Enhancements In Flutter 1.9 With Dart 2.5

#24 BackdropFilter

it's great having image support in Flutter, loading images as assets or over a network. But what if you want to tweak those images in some way, adding rotation, skew, or even blur? Flutter gives a simple way to do just that, using a combination of ImageFilter class and the BackdropFilter widget. The BackdropFilter widget takes an ImageFilter and a child as param and applies the filter to the widget beneath the child.

#25 Align 

Being able to compose widgets together is one of Flutter's most powerful features. but how you can specify. how a child positioned inside its parent? Try the Align process. Align will let you place widgets in a defined area of its parent widget such as bottomRight, topLeft wherever you fancy. you also specify the alignment values.

#26 Positioned

Being able to arbitrarily combine and overlay widgets atop one another, it's simple in Flutter using the Stack widget. But how these widgets placed in a Stack? there are many ways you can do this. but one of the best ways is to use a Positioned widget.

#27 AnimatedBuilder

Flutter's animation framework gives many options to animate any widgets. and one great choice is the AnimatedBuilder widget. Using an AnimatedBuilder is simple. First, we give it animation and give it a builder that will return the animating widget.

#28 Dismissible

Swiping list item left or right to dismiss them, is a pretty common UI pattern. To do the same task in Flutter, use the Dismissible widget. Set child, background and a key. There is also a direction property so you can swipe things vertically too.

#29 Draggable

There are a lot of UI patterns that involve dragging, like moving an address around in an email or moving documents from one folder to another try using Draggable. Draggable has a property to hold the data they represent. They have three parameters for handling data.

#30 SizedBox

Sometimes, you know exactly what you want, like the button should be 100 pix wide, not more, not less. That's easy. just wrap the button with SizeBox and give the width in pixels. SizedBox is a widget with a specific size that used to give the same height and width to its child.

Thank you for reading. (PART-III Continue......)

Our Flutter app development services ensure that your app performs seamlessly across multiple platforms with minimal downtime or latency. We critically analyze your project requirements to formulate effective mobile app development strategies for better user engagement and interactivity.