? 2-Flutter Widgets - 6 Hours
? 2-Flutter Widgets - 6 Hours
Visible widget
The visible widgets are related to the user input and output data. Some of the important types of
this widget are:
Text
A Text widget holds some text to display on the screen. We can align the text widget by
using textAlign property, and style property allow the customization of Text that includes font,
font weight, font style, letter spacing, color, and many more. We can use it as like below code
snippets.
Button
This widget allows you to perform some action on click. Flutter does not allow you to use the
Button widget directly; instead, it uses a type of buttons like a FlatButton and a RaisedButton.
We can use it as like below code snippets.
In the above example, the onPressed property allows us to perform an action when you click the
button, and elevation property is used to change how much it stands out.
Image
This widget holds the image which can fetch it from multiple sources like from the asset folder or
directly from the URL. It provides many constructors for loading image, which are given below:
assets: - assets/
Image.asset('assets/computer.png')
The complete source code for adding an image is shown below in the hello world example.
class MyHomePage extends StatelessWidget { M
yHomePage({Key key, this.title}) : super(key
: key); // This widget is the home page of y
our application. final String title; @overri
de Widget build(BuildContext context) { retu
rn Scaffold( appBar: AppBar( title: Text(thi
s.title), ), body: Center( child: Image.asse
t('assets/computer.png'), ), ); } }
When you run the app, it will give the following output.
Icon
This widget acts as a container for storing the Icon in the Flutter. The following code explains it
more clearly.
Invisible widget
The invisible widgets are related to the layout and control of widgets. It provides controlling how
the widgets actually behave and how they will look onto the screen. Some of the important types
of these widgets are:
Column
A column widget is a type of widget that arranges all its children's widgets in a vertical alignment.
It provides spacing between the widgets by using
the mainAxisAlignment and crossAxisAlignment properties. In these properties, the main axis is
the vertical axis, and the cross axis is the horizontal axis.
Example
The below code snippets construct two widget elements vertically.
Row
The row widget is similar to the column widget, but it constructs a widget horizontally rather than
vertically. Here, the main axis is the horizontal axis, and the cross axis is the vertical axis.
Example
The below code snippets construct two widget elements horizontally.
Center
This widget is used to center the child widget, which comes inside it. All the previous examples
contain inside the center widget.
Example
Center( child: new clumn( mainAxisAlignment: MainAxisAlignment.spaceEvenly, chil
dren: <Widget>[ new Text( "VegElement", ), new Text( "Non-vegElement" ), ], ),
),
Padding
This widget wraps other widgets to give them padding in specified directions. You can also
provide padding in all directions. We can understand it from the below example that gives the
text widget padding of 6.0 in all directions.
Example
Scaffold
This widget provides a framework that allows you to add common material design elements like
AppBar, Floating Action Buttons, Drawers, etc.
Stack
It is an essential widget, which is mainly used for overlapping a widget, such as a button on a
background gradient.