Skip to main content

Flutter Widgets

In Flutter, there are numerous widgets available, and the choice of which widgets to use in a particular screen depends on your app's functionality and design requirements. Here is a list of some commonly used and essential widgets in Flutter:

  1. Text: Used to display text in your app.
Text("Hello World")
  1. Container: A basic rectangular visual element that can contain other widgets.
Container(
color: Colors.blue,
width: 100,
height: 100,
child: // Another widget or content here
)
  1. Image: Used to display images.
Image.asset("assets/image.png")
  1. ListView: A scrollable list of widgets.
ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
// Add more list items as needed
],
)
  1. Row and Column: Used for arranging widgets in horizontal (Row) or vertical (Column) layouts.
Column(
children: <Widget>[
Text("Widget 1"),
Text("Widget 2"),
// Add more widgets vertically
],
)
  1. Button: Widgets like ElevatedButton or TextButton for user interaction.
ElevatedButton(
onPressed: () {
// Add action here
},
child: Text("Click Me"),
)
MaterialButton(
onPressed: () {
// Add action here
},
child: Text("Click Me"),
)
  1. TextField: Allows users to input text.
TextField(
decoration: InputDecoration(labelText: 'Enter text'),
)
  1. Icon: Displays icons.
Icon(Icons.star)
  1. Padding: Adds space around a widget.
Padding(
padding: const EdgeInsets.all(16.0),
child: // Your widget here
)
  1. AppBar: The app bar for your screen.
AppBar(
title: Text("My App"),
)
  1. Drawer: A side navigation menu.
Drawer(
child: // Contents of the drawer menu
)
  1. Card: Used to display information or content in a card-like format.
Card(
child: // Card contents
)
  1. AlertDialog: Used for showing dialogs or pop-up alerts.
AlertDialog(
title: Text('Alert Title'),
content: Text('Alert content goes here.'),
actions: <Widget>[
// Add buttons or actions here
],
)

These are just a few examples of commonly used Flutter widgets. Depending on your app's requirements, you can combine and customize these widgets to create complex and interactive user interfaces. Feel free to explore the Flutter documentation for more widgets and their properties: https://api.flutter.dev/flutter/widgets/widgets-library.html