Widgets in Flutter

Widgets are building blocks of Flutter. Everything we see on screen in Flutter is a widget.

Now let’s talk about some of the widgets of flutter

MaterialApp widget: The MaterialApp widget is the root widget for all Flutter apps that use Material Design. It provides a number of useful features, such as a theme, a navigation system, and a number of other Material Design widgets.

The MaterialApp widget has a number of properties, including:

Title: The title of the app. This is displayed in the app bar and in the task switcher.
Home: The widget that is displayed as the home page of the app. This is typically a Scaffold widget.
Theme: The theme of the app. The theme controls the appearance of the app, such as the colors, fonts, and icons.
DarkTheme: The dark theme of the app. This is used when the app is running in dark mode.
DebugShowCheckedModeBanner: Whether to show the debug banner in the app bar.
DebugShowMaterialGrid: Whether to show the material grid overlay. This can be helpful for debugging layout issues.
Locale: The locale of the app. This controls the language and region that is used in the app.
LocalizationsDelegates: A list of localizations delegates. Localization delegates provide the translation data for the app.
NavigatorKey: A global navigation key. This can be used to navigate between screens in the app.
Routes: A map of routes. This is used to define the different screens in the app and how to navigate between them.

Below is an example

void main(){
 runApp(
   MaterialApp( title: 'MyApp',
   home: Scaffold( 
   body: Center( 
  child: Text('Hello, world!'), ), ), );
 )
}

Material Widget: It is a base widget for Material Design widgets. It provides a number of features, such as:
Clipping: The Material widget clips its child widgets to its shape.
Elevation: The Material widget can elevate its child widgets on the Z-axis to create a shadow effect.
Ink effects: The Material widget shows ink effects when its child widgets are tapped.

The Material widget in Flutter has a number of properties, including:

Color: The color of the material.
Elevation: The elevation of the material on the Z-axis. This creates a shadow effect.
Shape: The shape of the material. The default shape is a rectangle.
BorderRadius: The border-radius of the material.
ClipBehavior: Whether to clip the material’s child widgets to its shape.
Child: The child widget that will be displayed inside the material.

void main(){
 runApp(
  MaterialApp( title: 'MyApp',
 home: Scaffold( 
body: Material(
 color: Colors.blue,
 child: Center(
   child: Text(
     "Hello Flutter",
     textDirection: TextDirection.ltr,
     style: TextStyle(fontSize: 40.0,color: Colors.white),)
   ,),
),
)
}

Scaffold widget: is a base widget for building Material Design layouts. It provides a number of features, such as:
- A title bar
- A navigation drawer
- A bottom navigation bar
- A floating action button
- A body for displaying the main content of the app

The Scaffold widget is typically used as the root widget for a Flutter app. It can be customized by setting its properties, such as the app bar, drawer, bottom navigation bar, and floatingActionButton properties.

Below are some of the properties of the Scaffold widget:

appBar: An AppBar widget to display at the top of the scaffold.
drawer: A Drawer widget to display on the left side of the scaffold.
bottomNavigationBar: A BottomNavigationBar widget to display at the bottom of the scaffold.
floatingActionButton: A FloatingActionButton widget to display in the bottom right corner of the scaffold.
body: The child widget that will be displayed in the main content area of the scaffold.
endDrawer: A Drawer widget to display on the right side of the scaffold.
persistentFooterButtons: A list of widgets to display in the persistent footer of the scaffold.
drawerScrimColor: The color of the scrim that is displayed over the app when the drawer is open.
backgroundColor: The background color of the scaffold.
primary: Whether the scaffold should be displayed.
onWillPop: A callback that is called when the back button is pressed.
extendBody: Whether the body of the scaffold should extend under the app bar and bottom navigation bar.
resizeToAvoidBottomInset: Whether the scaffold should resize to avoid the bottom inset, such as the keyboard.

void main(){
 runApp(
   MaterialApp(
     title: "My Flutter App",
     home: Scaffold(
       appBar: AppBar(title: Text("My First screen"),),
       body: Material(
         color: Colors.blue,
         child: Center(
           child: Text(
             "Hello Flutter",
             textDirection: TextDirection.ltr,
             style: TextStyle(fontSize: 40.0,color: Colors.white),)
           ,),
       ),
     )
   )
 );
}

Center Widget: To center a widget in Flutter, you can use the Center widget. The Center widget centers its child widget within itself.

The Center widget in Flutter has a number of properties, including:

alignment: The alignment of the child widget within the Center widget. The default alignment is Alignment.center.
child: The child widget that will be centered within the Center widget.
heightFactor: A factor that controls the height of the Center widget. The default height factor is 1.0.
widthFactor: A factor that controls the width of the Center widget. The default width factor is 1.0.

You can customize the Center widget by setting its properties. For example, you could set the alignment property to Alignment.topLeft to center the child widget in the top left corner of the Center widget, or you could set the widthFactor property to 0.5 to make the Center widget half as wide as its child widget.

void main(){
 runApp(
MaterialApp( 
home: Scaffold( 
body: Center( 
child: Text('Hello, world!'), ), ), );
 );
}

Text Widget: The Text widget in Flutter is a widget for displaying text on the screen. It can be used to display any type of text, including plain text, rich text, and code.

The Text widget has a number of properties, including:

data: The text that you wanted to display in your field.
style: The style that you wanted to give to your text.
maxLines: The maximum number of text lines that you want to display.
overflow: decides how to handle text that does not fit within the maximum number of lines.
softWrap: This property decides whether to allow the text to wrap to the next line.
textAlign: This property decides the alignment of the text within the widget.

void main(){
 runApp(
   MaterialApp(
     title: "My Flutter App",
     home: Scaffold(
       appBar: AppBar(title: Text("My First screen"),),
       body: Material(
         color: Colors.blue,
         child: Center(
           child: Text(
             "Hello Flutter",
             textDirection: TextDirection.ltr,
             style: TextStyle(fontSize: 40.0,color: Colors.white),)
           ,),
       ),
     )
   )
 );
}

Container widget: The Container widget in Flutter is a base widget for building boxes and other shapes. It can be used to create a variety of different widgets, such as buttons, cards, and menus.

The Container widget has a number of properties, including:

child: The child widget that will be displayed inside the container.
decoration: The decoration of the container. This can include things like the color, border, and background image.
foregroundDecoration: The foreground decoration of the container. This can be used to add things like overlays and shadows.
margin: The margin around the container.
padding: The padding inside the container.
alignment: The alignment of the child widget within the container.
width: The width of the container.
height: The height of the container.
constraints: The constraints on the size of the container.

You can customize the Container widget by setting its properties. For example, you could set the decoration property to change the color of the container, or you could set the padding property to add padding around the child widget.

void main(){
 runApp(
 MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: Text('Hello, world!'),
decoration: BoxDecoration( color: Colors.red, ), ), ), ), );
 );
}