Commonly Used Widgets in Flutter: A Guide to Text, Image, Container, Button, and More

Spread the love

Flutter provides a wide range of pre-built widgets that simplify the process of building beautiful and interactive user interfaces. In this blog post, we will explore some of the commonly used widgets in Flutter and understand their usage and functionality.

Table of Contents

Text Widget

The Text widget allows you to display text on the screen. It supports various styling options, such as font size, color, alignment, and more.

Copy Code


Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 20, color: Colors.black),
)

Read more"Explore Flutter Widgets to Create Cross-Platform Apps"

Image Widget

The Image widget is used to display images in your Flutter app. You can load images from local assets or network URLs.

Copy Code


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

Container Widget

The Container widget is a versatile widget that provides layout and styling capabilities. It can be used to specify dimensions, padding, margin, background color, and more.

Copy Code


Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Container Widget'),
)

Button Widgets

Flutter provides multiple button widgets for handling user interactions. Some commonly used button widgets include:

ElevatedButton

The ElevatedButton widget creates a material-design-style raised button.

Copy Code


ElevatedButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Click Me'),
)

TextButton

The TextButton widget creates a text-based button.

Copy Code


TextButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Click Me'),
)

IconButton

The IconButton widget creates an icon-based button.

Copy Code


IconButton(
  onPressed: () {
    // Handle button press
  },
  icon: Icon(Icons.add),
)

ListTile Widget

The ListTile widget is used to display a row with leading and trailing widgets, typically used in lists or menus.

Copy Code


ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
  subtitle: Text('Software Engineer'),
)

Card Widget

The Card widget is used to create a material-design-style card with a shadow and rounded corners.

Copy Code


Card(
  child: ListTile(
    leading: Icon(Icons.person),
    title: Text('John Doe'),
    subtitle: Text('Software Engineer'),
  ),
)

TextField Widget

The TextField widget provides a text input field where users can enter text.

Copy Code


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

Other Commonly Used Widgets

Here are a few more commonly used widgets in Flutter:

AppBar

The AppBar widget represents the top app bar in your application. It typically contains a title, actions, and navigation buttons.

Copy Code


AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      onPressed: () {
        // Handle action button press
      },
      icon: Icon(Icons.settings),
    ),
  ],
)

Scaffold

The Scaffold widget provides a basic structure for your app, including an app bar, body, and other essential UI elements.

Copy Code


Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Container(
    child: Text('Welcome to my app!'),
  ),
)

SingleChildScrollView

The SingleChildScrollView widget allows you to create a scrollable view for content that exceeds the screen’s height.

Copy Code


SingleChildScrollView(
  child: Column(
    children: [
      // Widget content here
    ],
  ),
)

Conclusion

Understanding and utilizing commonly used widgets in Flutter is essential for building engaging and interactive user interfaces. The Text, Image, Container, Button, ListTile, Card, TextField, and other mentioned widgets offer a solid foundation for creating dynamic and visually appealing Flutter applications.

Experiment with these widgets, explore their properties and capabilities, and combine them creatively to craft stunning user interfaces in your Flutter projects. Happy widget-building!

Post Views: 1,512