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


Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
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!