Flutter for Beginners
Hello everyone, I am writing this article on Flutter for beginners so as to help fellow developers to get started on flutter easily. In this article, We are going to use some basic and the most used widgets of flutter to design the basic UIs, so we are not going to get into all widgets, but some of the most used ones only.
So, to get started on Flutter, we need to know the basics of Dart.
Assuming you’ve already learnt the some of basics of dart and flutter lets get started on this article.
You might have heard somewhere that everything in the flutter is a widget.
So ,What is widget in flutter?
Widget is basically the building block of flutter application. It is a description of a part of UI, but not just confined within it. A widget might display something, it might help define design, it might help with layout, it may handle user interaction, etc. So basically, the cumulation of different types of widgets in a fixed set of rules make up the flutter application. Hence, the term, “everything is widget in flutter”.
Scaffold
The Scaffold is a widget this is used to implements the basic material design UI layout structure. This is one of the most important widget in flutter as it holds the main layout of the app. This widget is able to occupy the whole device screen. In other words, we can say that it is mainly responsible for creating a base to the app screen on which the child widgets holds on and renders on. It provides many widgets for showing Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, and many more. This widget basically helps in creating the basic layout that a material app should have.
SafeArea
SafeArea widgets in flutter is used so as not to overlap them with mobile’s elements such as battery status, wifi indicator and other stuff like that. SafeArea helps you to avoid this overlapping of the Status bar.
Container
This is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc. A container widget is same as <div> tag in html. It combines common painting, positioning, and sizing of the child widgets. It is also a class to store one or more widgets and position them on the screen according to our needs. Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets, such as using margin, which separates the container with other contents.
Row
Row is one of the most essential widgets in Flutter that allows developers to align children horizontally according to our needs.
Column
Row is also one of the most essential widgets in Flutter that allows developers to align children vertically according to our needs.
Expanded
This widget in flutter helps to take up all the remaining space inside Row or Column widgets. With its flex property you can control how much space the child widget should take up.
Wrap
We often get Overflow warning while aligning widgets in flutter . This error occurs when the content within a Column / Row exceeds the max size allowed. Wrap allows you to place widget in a new line when they exceed screen’s max size.
BoxDecoration:
This widget besically describes how a box should be painted on the screen. The shape of the box can be rectangle, square or a Circle. It comes with a ton of properties we can add an image inside, add a radius to the border depending upon the radius size and cast shadow to the box.
Stack
This widget in flutter helps in stacking Widgets on top of one another. By using Positioned widget , we can position elements within the stack. Its use is similar to the absolute value for the display css property.
SizedBox
SizedBox widget is used when you need to create a box with a specific size (width / height). This widget allows specifying the dimension that the child element must have. You can also specify an infinite dimension (double.infinite) if you want that child element fill the entire size allowed. Another use of SizedBox is when you need some space between Column / Row elements.
PageView
This widget helps in creating a scrollable list of pages. You can also decide the scrolling orientation with scrollDirection property. It also has a lot of other handy properties like pageSnapping , scrollPhysics, etc which help in customizing its transition of the pages.
Snackbar / InkWell
SnackBar is a widget that pops up a quick message within the app that briefly signifies to the user when something happened.
InkWell
InkWell responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of the inkwell widget using radius and also border-radius using borderRadius. We can give the splash color using splashColor and can do a lot of things
Conclusion
As you can see, Flutter has a lot of different sets of widgets that help us customize the app. Learning when and how to use them is the key thing in a flutter.
If you have any confusion, feel free to comment down below. I have attached the source code below as well, feel free to explore it.
Happy Coding🎉🎉
GitHub Link: https://github.com/dipeshkoirala21/flutter_medium
