Common Flutter Widgets and Examples

Flutter offers a wide range of widgets for building user interfaces. Here’s a list of some common widgets along with brief explanations and examples:

1. Text: Used for displaying text.

Text('Hello, Flutter!')

2. Image: Displays an image.

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

3. Container: A container that can have a background color, padding, and more.

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16.0),
  child: Text('Container Example'),
)

4. Row and Column: Used for arranging widgets horizontally and vertically, respectively.

Row(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
  ],
)

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
  ],
)

5. ListView: A scrollable list of widgets.

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

6. Card: A material design card.

Card(
  child: ListTile(
    title: Text('Card Example'),
  ),
)

7. TextField: Allows users to input text.

TextField(
  decoration: InputDecoration(labelText: 'Enter your name'),
)

8. Button: There are various types of buttons like RaisedButton, FlatButton, and IconButton.

RaisedButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Press Me'),
)

9. Checkbox and Radio: For checkboxes and radio buttons.

Checkbox(
  value: true,
  onChanged: (bool newValue) {
    // Handle checkbox change
  },
)

Radio(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? newValue) {
    // Handle radio button change
  },
)

10. Switch: A material design switch.

Switch(
  value: switchValue,
  onChanged: (bool newValue) {
    // Handle switch change
  },
)

11. DropdownButton: A dropdown button for selecting items.

DropdownButton<String>(
  value: selectedValue,
  items: <String>['Option 1', 'Option 2', 'Option 3']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    // Handle dropdown selection
  },
)

12. SnackBar: A temporary message that appears at the bottom of the screen.

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

These are just a few examples of Flutter widgets. Flutter provides a rich set of widgets for creating complex and custom user interfaces. You can combine and customize these widgets to build your app’s UI.

Hope you like it…