Flutter widget

Flutter widget
1. AppBar
The AppBar widget is typically used to display the top navigation bar in your application. It
often includes the title of your app or page, icons like a back button, and actions like search
or settings.

Attributes:

title : The main widget in the app bar (usually a Text widget).
leading : A widget placed before the title, often an icon (like a menu icon).
actions : A list of widgets to display at the end of the AppBar (like search or notification
icons).
backgroundColor : The color of the AppBar.
elevation : Controls the shadow beneath the AppBar.
centerTitle : Whether the title should be centered.

Code Example:

AppBar(
title: Text('My App'),
leading: Icon(Icons.menu), // Menu icon on the left
actions: [
IconButton(
icon: Icon(Icons.search), // Search icon on the right
onPressed: () {
// Action when search icon is pressed
},
),
],
backgroundColor: Colors.blue, // AppBar color
elevation: 4.0, // Shadow depth
brightness: Brightness.light, // Light or dark content
centerTitle: true, // Title is centered
flexibleSpace: Container(
color: Colors.blueAccent, // Custom background
),
)

Explanation:

The AppBar has a title ( Text('My App') ), a left menu icon, and a right search icon.

1/9
 Flutter widget

centerTitle is set to true to center the title.

elevation gives the AppBar a shadow effect.

2. Text
The Text widget is used to display a string of text in the UI. It has various properties to style
the text and control its layout.

Attributes:

data : The string of text you want to display.

style : A TextStyle widget that allows you to set font size, color, weight, etc.
textAlign : Specifies the alignment of the text (left, right, center).
overflow : Defines what happens if the text overflows its container.
maxLines : Limits the number of lines the text can take.

Code Example:

Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: 24.0, // Font size
color: Colors.black, // Text color
fontWeight: FontWeight.bold, // Bold font weight
),
textAlign: TextAlign.center, // Center-align the text
overflow: TextOverflow.ellipsis, // Show "..." if text overflows
maxLines: 2, // Limit to 2 lines
)

Explanation:

The text "Hello, Flutter!" is displayed with a bold style and centered alignment.
The text is truncated with ellipsis if it overflows, and it will only use 2 lines.

3. TextButton
TextButton is a flat button with text. It's commonly used in Material design to create
clickable buttons without any elevation (no shadow effect).

Attributes:

2/9
 Flutter widget

onPressed : The function called when the button is tapped.

style : A ButtonStyle to customize the button's appearance (color, shape, etc.).
child : The content inside the button (usually Text ).

Code Example:

TextButton(
onPressed: () {
print('TextButton pressed');
},
style: TextButton.styleFrom(
primary: Colors.white, // Text color
backgroundColor: Colors.blue, // Button color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0), // Rounded corners
),
),
child: Text('Press Me'), // Text inside the button
)

Explanation:

When the button is pressed, a message is printed to the console.

The button has a blue background, white text, and rounded corners.

4. Image
The Image widget is used to display images from various sources (assets, network, file,
etc.).

Attributes:

image : The source of the image (e.g., AssetImage , NetworkImage ).

width and height : Dimensions of the image.
fit : Defines how the image should be resized to fit its container (e.g., BoxFit.cover ).
alignment : How the image should be aligned within the container.

Code Example:

Image.network(
'https://example.com/myimage.jpg', // Image URL
width: 200.0, // Set width of the image
height: 200.0, // Set height of the image
fit: BoxFit.cover, // Scale the image to cover the container
3/9
 Flutter widget

alignment: Alignment.center, // Center the image

loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) {
return child; // Image is loaded
} else {
return Center(child: CircularProgressIndicator()); // Show loading indicator
}
},
)

Explanation:

Displays an image from the network with a loading indicator while the image is loading.
The image scales to cover its container, maintaining its aspect ratio.

5. IconButton
IconButton is a clickable icon, commonly used for actions like navigation or settings.

Attributes:

onPressed : The function called when the icon is tapped.

icon : The icon to display.
iconSize : The size of the icon.
color : The color of the icon.
tooltip : A short message shown when the user long-presses the button.

Code Example:

IconButton(
icon: Icon(Icons.favorite), // Heart icon
iconSize: 30.0, // Icon size
color: Colors.red, // Icon color
onPressed: () {
print('Favorite button pressed');
},
tooltip: 'Like', // Tooltip on long press
padding: EdgeInsets.all(8.0), // Padding around the icon
)

Explanation:

The IconButton shows a heart icon, and when pressed, it prints a message to the
console.
4/9
 Flutter widget

The icon is red and has a size of 30.0.

6. BottomNavigationBar
The BottomNavigationBar is used to create a navigation bar at the bottom of the screen. It
typically contains a few BottomNavigationBarItem widgets to represent different pages.

Attributes:

items : A list of BottomNavigationBarItem widgets.

currentIndex : The index of the currently selected item.
onTap : The callback when an item is tapped.
backgroundColor : The color of the bottom bar.

Code Example:

BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), // Home icon
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search), // Search icon
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person), // Profile icon
label: 'Profile',
),
],
currentIndex: 0, // First item is selected
onTap: (index) {
print('Selected tab index: $index');
},
backgroundColor: Colors.blue, // Background color
selectedItemColor: Colors.white, // Color for selected item
unselectedItemColor: Colors.black, // Color for unselected items
)

Explanation:

The bottom navigation bar has three items: Home, Search, and Profile.

5/9
 Flutter widget

When a user taps an item, the onTap callback is triggered, and the selected tab index is
printed.

7. InkWell
InkWell is used to add a material "ripple" effect to any widget when tapped. It's commonly
used for creating tappable areas in the UI.

Attributes:

onTap : The function called when the widget is tapped.

onLongPress : The function called on a long press.
splashColor : The color of the ripple effect.
highlightColor : The color of the widget before the ripple effect appears.
borderRadius : Defines the rounded corners for the ripple effect.

Code Example:

InkWell(
onTap: () {
print('InkWell tapped');
},
onLongPress: () {
print('InkWell long pressed');
},
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue, // Background color
child: Text(
'Tap Me!',
style: TextStyle(color: Colors.white),
),
),
splashColor: Colors.blueAccent, // Ripple color
highlightColor: Colors.blue[300], // Highlight before ripple
borderRadius: BorderRadius.circular(12.0), // Rounded corners
)

Explanation:

The InkWell adds a ripple effect when the user taps the container, and the text "Tap
Me!" is displayed inside it.
The splashColor and highlightColor control the colors of the ripple effect.

6/9
 Flutter widget

8. Container
Container is one of the most commonly used widgets in Flutter, often used to apply padding

9. TextField
The TextField widget in Flutter is used to allow users to input text. It's a crucial part of any
form or user input interface. TextField can be customized in many ways, including adding
decorations, controlling input behavior, and setting restrictions.

Attributes:

controller : A TextEditingController that controls and retrieves the text in the field.
decoration : A InputDecoration widget to style the field, such as adding a label, hint, or
icons inside the input.
keyboardType : Defines the type of keyboard to display (e.g., TextInputType.text ,
TextInputType.number , etc.).
onChanged : A callback that is triggered whenever the text in the field changes.
obscureText : If set to true , hides the text input (useful for passwords).
maxLength : Limits the number of characters a user can type in the field.
onSubmitted : A callback triggered when the user submits the input (usually by pressing
the "Enter" key).

Code Example:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('TextField Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),

7/9
 Flutter widget

child: Center(
child: TextField(
controller: TextEditingController(), // Manage text input
decoration: InputDecoration(
labelText: 'Enter your name', // Label for the input field
hintText: 'John Doe', // Hint text when the field is empty
prefixIcon: Icon(Icons.person), // Icon inside the text field
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0), // Rounded borders
),
),
keyboardType: TextInputType.text, // Show a regular text keyboard
obscureText: false, // Don't obscure the text (use for passwords)
maxLength: 20, // Limit the input to 20 characters
onChanged: (text) {
print('Text entered: $text'); // Prints input as the user types
},
onSubmitted: (text) {
print('Submitted text: $text'); // Prints input when user presses
},
),
),
),
),
);
}
}

Explanation:
1. Controller:
A TextEditingController is used to manage the text input. This allows you to
retrieve or modify the text programmatically.
In this example, we create a new TextEditingController() directly in the widget, but
you can also use a variable to store the controller.
2. Decoration:
InputDecoration is used to decorate the TextField . It includes:
labelText : Text that appears above the field as a label.
hintText : Text that shows when the field is empty, guiding the user.
prefixIcon : An icon inside the input field (in this case, a person icon).
border : The border style around the text field. Here, OutlineInputBorder is
used with rounded corners.
3. KeyboardType:

8/9
 Flutter widget

keyboardType controls the type of keyboard that appears. In this example, we use
TextInputType.text , which will display a regular text input keyboard. You could use
TextInputType.number for numeric input, or other types for different use cases.
4. ObscureText:
obscureText: false ensures the text is visible. If set to true , the text input will be
obscured (like for password fields).
5. MaxLength:
The maxLength property restricts the user to typing a maximum of 20 characters in
this TextField .
6. onChanged:
This callback triggers every time the text in the TextField changes. Here, it simply
prints the current text to the console.
7. onSubmitted:
This callback triggers when the user submits the input (usually by pressing the
"Enter" key). It prints the final input to the console.

Common Customizations:
Password Field: To make the TextField behave like a password field, set
obscureText: true .

obscureText: true,

Multiline Text Input: To allow multiline input, you can set the maxLines and minLines
properties:

maxLines: 5,
minLines: 1,

Text Style: You can change the text style using the style property of TextField :

style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),

9/9