1.

Text

Explanation: Displays text on the screen.

Syntax:

Text(
'This is some text',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.blue
),
)

2. Container

Explanation: A flexible and versatile widget that can hold and style other widgets. It provides
features like padding, margins, borders, colors, and more.

Syntax:

Container(
width: 200,
height: 100,
color: Colors.green,
child: Text('Hello'),
padding: EdgeInsets.all(16.0),
)

3. Column

Explanation: Arranges child widgets vertically, one below the other.

Syntax:

Column(
children: <Widget>[
Text('First line'),
Text('Second line'),
Text('Third line'),
],
)

4. Stack

Explanation: Layers child widgets on top of each other. You can control the positioning using
Positioned widgets.

Syntax:

Stack(
children: <Widget>[
Container(
color: Colors.red,
),
Positioned(
left: 10,
top: 10,
child: Text('Hello'),
),
],
)

5. Image

Explanation: Displays an image from a network URL or local asset.

Syntax:

Image.network(
'https://example.com/image.jpg',
)

or
Image.asset(
'assets/images/my_image.png',
)

6. Padding

Explanation: Adds empty space around a child widget.

Syntax:

Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello'),
)

7. Center

Explanation: Centers a child widget within its parent.

Syntax:

Center(
child: Text('Hello'),
)

8. Align

Explanation: Aligns a child widget within its parent using alignment properties.

Syntax:

Align(
alignment: Alignment.topRight,
child: Text('Hello'),
)

9. Baseline

Explanation: Aligns children based on their baselines.

Syntax:

Baseline(
baseline: 10.0,
baselineType: TextBaseline.alphabetic,
child: Text('Hello'),
)

10. ConstrainedBox
Explanation: Constrains the size of a child widget within specific limits.

Syntax:

ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 200.0,
maxHeight: 100.0,
),
child: Text('Hello'),
)

11. AspectRatio

Explanation: Maintains the aspect ratio of a child widget.

Syntax:

AspectRatio(
aspectRatio: 16 / 9,
child: Image.network('https://example.com/image.jpg'),
)

12. SizedBox

Explanation: A simple widget that occupies a specific size.

Syntax:

SizedBox(
width: 50.0,
height: 50.0,
)

13. Transform

Explanation: Applies transformations to a child widget, such as rotation, scaling, and translation.

Syntax:

Transform.rotate(
angle: pi / 4,
child: Text('Hello'),
)
14. Pointers

Explanation:

The Pointer class represents a single touch or stylus contact point on the screen.
It provides information like position, pressure, and device type.
Flutter's gesture system is built on top of Pointer events.

Syntax:

(Not directly used as a widget)

class PointerEvent extends UIPointerEvent {
// ... properties like position, pressure, etc.
}

15. Tap

Explanation: Recognizes single taps on the screen.

Syntax:

GestureDetector(
onTap: () {
// Handle single tap
},
child: Container(
color: Colors.blue,
),
)

16. DoubleTap

Explanation: Recognizes double taps on the screen.

Syntax:

GestureDetector(
onDoubleTap: () {
// Handle double tap
},
child: Container(
 color: Colors.green,
),
)

17. LongPress

Explanation: Recognizes long presses on the screen (holding down for a certain duration).

Syntax:

GestureDetector(
onLongPress: () {
// Handle long press
},
child: Container(
color: Colors.red,
),
)

18. VerticalDrag

Explanation: Recognizes vertical dragging gestures (up and down).

Syntax:
GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details) {
// Handle vertical drag updates (e.g., scrolling)
},
child: Container(
color: Colors.yellow,
),
)

19.HorizontalDrag

Explanation: Recognizes horizontal dragging gestures (left and right).

Syntax:

GestureDetector(
onHorizontalDragUpdate: (DragUpdateDetails details) {
// Handle horizontal drag updates (e.g., swiping)
},
 child: Container(
color: Colors.purple,
),
)

20.Pan

Explanation: Recognizes general dragging gestures in any direction.

Syntax:

GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
// Handle pan updates (e.g., dragging an object)
},
child: Container(
color: Colors.orange,
),
)

Key Considerations:

GestureDetector: This is the primary widget for handling touch events in Flutter. It provides
various callbacks for different gestures.

DragUpdateDetails: This class provides information about the dragging gesture, such as the
current position, delta (change in position), and velocity.

Gesture Recognition: Flutter's gesture system can automatically recognize common gestures
like taps, drags, and swipes.

21. Scaffold

Explanation:

The fundamental layout widget in Flutter.

Provides a standard structure for most Flutter applications.
Typically includes an AppBar, a body, and a floatingActionButton.

Syntax:

21.Scaffold(
appBar: AppBar(
 title: Text('My App'),
),
body: Center(
child: Text('Hello, world!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)

22. AppBar

Explanation:

The top bar of a screen, usually displaying the app's title, actions (icons), and navigation
controls.

Syntax:

AppBar(
title: Text('My App'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
)

23. BottomNavigationBar

Explanation:

A bar at the bottom of the screen for navigation between different views.

Syntax:

BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
 label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
],
selectedItemColor: Colors.amber[800],
)

24. TabBarView

Explanation:

Displays the content of different tabs.

Often used in conjunction with a TabBar widget.

Syntax:

TabBarView(
children: <Widget>[
Center(
child: Text('First Tab'),
),
Center(
child: Text('Second Tab'),
),
],
)

25. Drawer

Explanation:

A panel that slides in from the side of the screen, typically containing navigation options.

Syntax:

Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
 child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {},
),
],
),
)

26. SilverAppBar

Explanation:

An AppBar that can collapse and expand as the user scrolls.

Commonly used with a CustomScrollView or a ListView.

Syntax:

SilverAppBar(
title: Text('My App'),
expandedHeight: 200.0,
flexibleSpace: Image.asset('images/background.jpg', fit: BoxFit.cover),
)

27. FlatButton

Explanation: A flat-style button with no elevation.

Syntax:

FlatButton(
onPressed: () {},
child: Text('Click Me'),
)

28. DropdownButton

Explanation: A button that displays a dropdown list of items.

Syntax:
DropdownButton<String>(
value: _selectedValue,
onChanged: (String newValue) {
setState(() {
_selectedValue = newValue;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)

28. TextField

Explanation: A text input field for user input.

Syntax:

TextField(
onChanged: (String value) {
// Handle text input changes
},
decoration: InputDecoration(
labelText: 'Enter your name',
),
)

4. Checkbox

Explanation: A toggle button that can be checked or unchecked.

Syntax:

Checkbox(
value: _isChecked,
onChanged: (bool value) {
setState(() {
_isChecked = value;
 });
},
)

5. PopupMenuButton

Explanation: A button that displays a popup menu with a list of options.

Syntax:

PopupMenuButton<String>(
onSelected: (String value) {
// Handle selected option
},
itemBuilder: (BuildContext context) {
return ['Option 1', 'Option 2', 'Option 3']
.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
)

6. ButtonBar

Explanation: A row of buttons.

Syntax:

ButtonBar(
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text('Button 1'),
),
FlatButton(
onPressed: () {},
child: Text('Button 2'),
),
],
)

7. FloatingActionButton

Explanation: A circular button that floats above the content.

Syntax:

FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
)

8. Switch

Explanation: A toggle switch for boolean values.

Syntax:

Switch(
value: _isSwitched,
onChanged: (bool value) {
setState(() {
_isSwitched = value;
});
},
)

9. Slider

Explanation: A slider for selecting a value from a range.

Syntax:

Slider(
value: _sliderValue,
onChanged: (double value) {
setState(() {
_sliderValue = value;
});
},
 min: 0.0,
max: 100.0,
)

10. TimePicker

Explanation: A dialog for selecting a time.

Syntax:

showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
)

11. SimpleDialog

Explanation: A simple dialog with a title and content.

Syntax:

showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text('Simple Dialog'),
children: <Widget>[
Text('This is a simple dialog.'),
],
);
},
)

12. AlertDialog

Explanation: A dialog with an optional title, content, and actions.

Syntax:

showDialog(
context: context,
 builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert'),
content: Text('This is an alert.'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
)

13. BottomSheet

Explanation: A sheet that slides up from the bottom of the screen.

Syntax:

showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Center(
child: Text('BottomSheet'),
),
);
},
)

14. ExpansionPanelList and ExpansionPanel

Explanation: A list of expandable panels.

Syntax:

ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
 setState(() {
_isPanelExpanded[index] = !isExpanded;
});
},
children: [
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text('Panel 1'),
);
},
body: ListTile(
title: Text('Panel 1 content'),
),
isExpanded: _isPanelExpanded[0],
),
],
)

Cupertino Widgets (iOS-style)

CupertinoSetup: (Not a widget, for configuring iOS-style behavior)
CupertinoActionSheet: An iOS-style action sheet.
CupertinoActivityIndicator: An iOS-style activity indicator.
CupertinoAlertDialog: An iOS-style alert dialog.
CupertinoButton: An iOS-style button.
CupertinoPicker: An iOS-style picker.
CupertinoPopupSurface: An iOS-style popup surface.
CupertinoSegmentedControl: An iOS-style segmented control.
CupertinoSlider: An iOS-style slider.
CupertinoSwitch: An iOS-style switch.
CupertinoNavigationBar: An iOS-style navigation bar.
CupertinoTabBar: An iOS-style tab bar.
CupertinoTextField: An iOS-style text field.
CupertinoPageScaffold: An iOS-style scaffold for pages.
CupertinoTabScaffold: An iOS-style scaffold for tab-based navigation.

15. Snackbar

Explanation: A brief message that appears at the bottom of the screen.

Syntax:

Scaffold.of(context).showSnackBar(
 SnackBar(
content: Text('This is a snackbar.'),
),
)

16. DatePicker

Explanation: A dialog for selecting a date.

Syntax:

showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2100),
)

17. IconButton

Explanation: A button with an icon.

Syntax:

IconButton(
icon: Icon(Icons.search),
onPressed: () {},
)

18. Radio

Explanation: A radio button for selecting a single option from a group.

Syntax:

Radio<String>(
value: 'Option 1',
groupValue: _selectedOption,
onChanged: (String value) {
setState(() {
_selectedOption = value;
 });
},
)

19. RaisedButton

Explanation: An elevated button with a shadow.

Syntax:

RaisedButton(
onPressed: () {},
child: Text('Click Me'),
)

1.Icons

Explanation:

Represents an icon from the Material Design icon set.

Provides access to a vast library of icons for various purposes.

Syntax:

Icon(Icons.favorite)

2. DataTable

Explanation:
Displays tabular data with rows and columns.
Useful for presenting information in a structured format.

Syntax:

DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text('Column A'),
),
DataColumn(
label: Text('Column B'),
),
 ],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Row 1, Column A')),
DataCell(Text('Row 1, Column B')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Row 2, Column A')),
DataCell(Text('Row 2, Column B')),
],
),
],
)

3. Card

Explanation:
A material design card that elevates content slightly.
Used to group and present related information.

Syntax:

Card(
child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('And Other Tales'),
),
ListTile(
title: Text('Author'),
subtitle: Text('Hans Christian Andersen'),
),
],
),
)

4. LinearProgressIndicator
Explanation:

Displays progress in a horizontal bar.

Syntax:

LinearProgressIndicator(
value: 0.5, // Progress value (between 0.0 and 1.0)
)

5. CircularProgressIndicator

Explanation:
Displays progress in a circular indicator.

Syntax:

CircularProgressIndicator()

6. Chip

Explanation:
A small, lightweight label or tag.
Can be used for filtering, tagging, or displaying metadata.

Syntax:

Chip(
label: Text('Label'),
)

7. Tooltip

Explanation:

Displays a short message when the user hovers over an element.

Syntax:

Tooltip(
 message: 'This is a tooltip',
child: Icon(Icons.info),
)

1. GridView

Explanation: Displays a collection of widgets in a two-dimensional grid.

Syntax:

GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of columns
),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.blue,
child: Center(
child: Text('Item $index'),
),
);
},
)

2. Stepper & Step

Explanation:

Stepper: Creates a vertical set of steps, often used in multi-step forms or wizards.
Step: Represents a single step within the Stepper.

Syntax:

Stepper(
steps: [
Step(
title: Text('Step 1'),
content: Text('Content for Step 1'),
isActive: true,
),
Step(
title: Text('Step 2'),
 content: Text('Content for Step 2'),
),
],
)

3. Divider & divideTiles

Explanation:

Divider: A visual separator, typically a thin line.

ListView.separated or GridView.separated: Adds a divider between each item in a list or grid.

Syntax:

Divider(),

ListView.separated(
itemCount: 10,
itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
separatorBuilder: (context, index) => Divider(),
)

4. Aligning Widgets

Explanation:

Align: Aligns a child widget within its parent (e.g., Alignment.center, Alignment.topRight).
Positioned: Positions a child widget within a Stack using offsets.
Center: Centers a child widget within its parent.

Syntax:

Align(
alignment: Alignment.topRight,
child: Text('Aligned Text'),
),

Positioned(
left: 10,
top: 20,
child: Text('Positioned Text'),
),
5. Sizing Widgets

Explanation:

SizedBox: Creates a box with specific width and height.

ConstrainedBox: Limits the size of its child within specified constraints.
AspectRatio: Maintains a specific aspect ratio for its child.

Syntax:

SizedBox(
width: 50,
height: 50,
),

ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200),
child: Text('Constrained Text'),
),

6. Packing Widgets

Explanation:

Row: Arranges children horizontally.

Column: Arranges children vertically.
Stack: Layers children on top of each other.

Syntax:

Row(
children: [
Text('First'),
Text('Second'),
],
),

Column(
children: [
Text('First'),
Text('Second'),
 ],
),

7. Nesting Rows and Columns

Explanation:

You can nest Row and Column widgets to create complex layouts.

Syntax:

Column(
children: [
Row(
children: [
Text('First'),
Text('Second'),
],
),
Text('Third'),
],
)

8. ListView & ListTile

Explanation:

ListView: Displays a scrolling list of items.

ListTile: A convenient widget for displaying a single line with an optional leading, trailing, and
subtitle.

Syntax:

ListView.builder(
itemCount: 10,
itemBuilder: (context, index) => ListTile(
title: Text('Item $index'),
),
)

9. Add, Update, and Delete Widgets

Explanation:
You can dynamically add, update, or remove widgets using the setState() method within a
StatefulWidget.
This allows you to create interactive and responsive UIs.

Syntax: (Simplified example)

class MyWidget extends StatefulWidget {

@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

List<Widget> _widgets = [];

void _addWidget() {
setState(() {
_widgets.add(Text('New Widget'));
});
}

@override
Widget build(BuildContext context) {
return Column(
children: _widgets,
);
}
}