Top 10 flutter widgets we should know to get started
Hello community !
in this post we are going to talk about some basic flutter widgets that anyone should know to start making flutter apps
But before talking about widgets let me define what is a widget :
a defined class that we import from the flutter package or a custom class that we may build on our own to re use it, also we should know that any flutter app has a widget tree architecture with one main parent and more childs.
as we can see above we have one main parent MyApp and several children which compose the flutter app, we will talk more about other widgets later but in this post we will focus only on those we often use to build our apps
the first widget we will talk about is MaterialApp which is the most important widget we can start with to implement our widget tree architecture and it is used to wrap a number of widgets that are commonly required for material design
scaffold is a basic visual layout structure which draw a blank interface to place our widgets, it takes many arguments but the most commonly used are : appBar and body
as we see above is a visual layout structure that we may see in the majority of apps , the appBar contains a text and the body contains another text but we may define as much as we want of widgets on the body argument and all of them are composed into a single child widget
AppBar Widget i a toolbar used on the top of each app this widget is used in scaffold visual layout and has leading space ,title and actions,
between appBar and body of the scaffold widget we have a flexible space as we can see below :
Container is good choice if we want to paint, position or size child widgets, for example we may add a text widget inside a container in order to change text padding, margin, background color, surrounding width or height so it’s a helper widget to make a child widget easy to manipulate
What about if we want to position widgets vertically or horizontally ? in flutter we have much possible choices. but the most simple and basic will be to use Column or Row
Column : position widgets vertically it takes a children argument with a list of widgets
Row : position widgets horizontally and it also takes children argument with a list of widgets
but the inconvenience of using those both widgets is that they are not scrollable so in case you want a scrollable list of widgets then think about using other alternatives like ListView or GridView
Now Lets talk about some basic widgets used to show something ont the screen :
Text : it’s simple as it’s name and used to display a string of text with a single style
it takes many arguments such as textAlign ,overflow , style
center,
Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
)
Icon : it’s used to display a glyph icon from predefined Icons
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
)
Image : it’s used to display an image using different ways or constructors
Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)
for example here we want to show an image from a hosted image by url, there re much constructors to use i recommend to take a look at the official doc for more details
RaisedButton :
is a type of buttons in which elevation increases when it gets pressed
it takes some important arguments such as :
child which can be a text with title and
onPressed : a callback or function to call when the button is pressed
example :
RaisedButton(
onPressed: () {},
child: const Text(
'Enabled Button',
style: TextStyle(fontSize: 20)
),
)
Thats it for this post i tried to initiate you on the most basic widgets to get started we will see much more in the next topics
hope you enjoyed stay tune!