Flutter Widgets | RRTutors
Last updated Sep 09, 2022To start to develope applications with flutter we need to know about few flutter widgets which will be commonly used in any application.
Flutter framework contains 3 set of widget
- Basic Widgets
- Material Design
- Cupertino Design
We may raise some common questions while develope the flutter applications
How to change the statusbar color in flutter
How to apply gradient color to text widget in flutter
How to rotate widget in flutter
How to change orientation in flutter dynamically
How do i change theme in flutter dynamically
How to add widgets dynamically on button click in flutter
Here we are going to see few flutter widgets. you can find more flutter widgets or you can get from officcial website flutter widget catlog
Container
The Container widget is used to contain child widgets whilst
If the container has no children then it will automatically fill the given area on the screen (dependant on constraints),
otherwise it will wrap the height & width of the given child elements
Properties
Color Property: We can use the color property to apply a background color for the container.
We will use the Color Class or Colors Class
Use the Colors class
|
Center( |
We can add shade container by
|
Center( |
use Color Class with a full 8 hexadecimal digits not 6.
If we only specify six, then the leading two digits are assumed to be zero, which means fully-transparent.
We can use the .fromARGB with the color number or hexadecimal number
Child Property
Provide a child widget to be contained by the container, the container will wrap the width & height of this child
This widget can only have one child. To lay out multiple children, let this widget’s child be a widget such as Row, Column, or Stack,
which have a children property, and then provide the children to that widget
|
Center( |
Alignment property
We use an Alignment Class with the alignment property to be applied for aligning the child widgets.
Alignment take 2 parameters x and y
Alignment(0.0, 0.0) represents the center of the rectangle
Alignment will takes positions like
(-1,-1) as top left corner
(-1,1) as top right corner
(0,0) as center
(1,-1) as bottom left
(1,1) as bottom right
We can also use FractionalOffset Class with the alignment property
FractionalOffset uses a coordinate system with an origin in the top-left corner of the rectangle whereas Alignment uses a coordinate system with an origin in the center of the rectangle.
FractionalOffset will takes the position like
(0,0) as top left corner
(1,0) as top right corner
(.5,.5) as center
(0,1) as bottom left
(1,1) as bottom right
We can also use AlignmentDirectional Class with the alignment property
Constrain property
A constraint is just a property specifying the size or space a widget can take up.
Most of the widgets and UI can be build by using simple BoxConstraint.
A BoxConstraint only cares about minWidth, maxWidth, minHeight and maxHeight
| Center( child: Container( color: Color.fromARGB(255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, constraints: BoxConstraints( maxHeight: 300.0, maxWidth: 200.0, minWidth: 150.0, minHeight: 150.0 ), ), ), ); |
Margin Property
A margin is just a property specifying to add empty space to surround of the container using an EdgeInsets constant value
With below we can apply different ways of margin for widget.
- EdgeInsets.all(20)
- EdgeInsets.symmetric( vertical: 20.0,horizontal: 50.0)
- EdgeInsets.fromLTRB(1,10,5,10)
- EdgeInsets.only(left: 20.0,bottom: 40.0,top: 50.0)
Padding Property
A padding is just a property specifying to add empty space to inscribe inside the container using an EdgeInsets constant value same as the margin
With below we can apply different ways of margin for widget.
|
EdgeInsets.all(20) |
BoxDecoration
Will set the decoration for the specified widget.
|
decoration:BoxDecoration( |
ShapeDecoration
|
home: Scaffold( child:Container( width: 200, child: Text("First Flutter Demo Application this is the center widget with child text", textAlign: TextAlign.center,), ], ), ) |
It will align the childs in Horizontal direction.
|
MaterialApp( ), ), |
To arrange the childs inside Row widget will use the mainAxisAlignment property
mainAxisAlignment: MainAxisAlignment.center,
This will arrange the childrens in horizontal center
mainAxisAlignment: MainAxisAlignment.spaceAround,
This will arrange the childres in equal space arround the each child
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceBetween
This will put the child and at edges and give the space inbetween each widget
In the above if i want to align first child in left and remaing two childs at right what should i have to do?
Will show that in other chapter.
Some times we may get error like error Overflowed by text inside row widget, to resolve this error we can read How to wrap text inside row widget in flutter
It will align the childs in Vertical direction.
|
Scaffold(
Text("Column 2"), ], |
To align the childs inside column widget will use the MainAxisAlignment
Image Widget
To display an image will use the Image widget.
We can load images in Image widget by following ways
Image From Assets:
Create a assets folder in project andd add your images in this assets folder.
Now set this assets images in pubspec.yaml file below the flutter:
In the flutter Indentation is very important, we need to add assets with one indentation from the flutter package
flutter: # The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- ic_flutter.png
I have added ic_flutter.png image in assets folder and configured that in pubspec.yaml file.
Now i am going to display this image with image widget
|
MaterialApp( ), |
Image from Network
To load the Image from network we will use the Image.network constructor
|
MaterialApp( ), |
Check Flutter Image examples
|
Article Contributed By :
|
|
|
|
|
986 Views |
|